diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4100f63541..e7a241e806 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,12 @@
 Changelog
 =========
 
+[Unreleased]
+------------
+
+### Added
+- Rescue inscriptions with a wrong `content_type` field via body magic-byte sniffing on `/preview/<id>`. Recognised formats: glTF/GLB, glTF+json, PNG, JPEG, GIF, WebP, MP4 (brand-filtered), Ogg, WAV, FLAC, and PDF. Brotli-encoded bodies are transparently decoded behind a 4 KiB cap. The MP4 matcher excludes HEIC/HEIF and QuickTime; no format is auto-upgraded to `Media::Iframe`. `/content/<id>`, `/embed/<id>`, thumbnails, and oEmbed are unaffected. See `docs/src/inscriptions/rendering.md` § Content-Type Fallback.
+
 [0.27.1](https://github.com/ordinals/ord/releases/tag/0.27.1) - 2026-03-10
 --------------------------------------------------------------------------
 
diff --git a/docs/src/inscriptions/rendering.md b/docs/src/inscriptions/rendering.md
index e2876f2961..b09bd37137 100644
--- a/docs/src/inscriptions/rendering.md
+++ b/docs/src/inscriptions/rendering.md
@@ -33,3 +33,61 @@ When upscaling AVIF and JPEG XL inscriptions, `image-rendering: auto` should be
 used. This allows inscribers to opt-in to non-pixelated upscaling for non-pixel
 art inscriptions. Until such time as JPEG XL is widely supported by browsers,
 it is not a recommended image format.
+
+Content-Type Fallback
+---------------------
+
+A number of inscriptions on Bitcoin were created with the wrong `content_type`
+field — typically `application/octet-stream` for a payload that is in fact a
+glTF model, PNG image, MP4 video, and so on. The on-chain state is immutable
+and cannot be amended.
+
+To preserve user-facing rendering for these inscriptions, the `/preview/<id>`
+endpoint inspects the first 4 KiB of the inscription body (transparently
+decoding brotli when `content_encoding == "br"`) and upgrades the inferred
+`Media` based on recognised magic-byte signatures. The behaviour is invoked
+only when the stored `content_type` would otherwise resolve to
+`Media::Unknown`; correctly-tagged inscriptions are routed exactly as before.
+
+The following formats are detected, in this order:
+
+| Bytes inspected                           | Format    | Rendered as              |
+| ----------------------------------------- | --------- | ------------------------ |
+| `glTF` at offset 0                        | GLB       | `Model` (model-viewer)   |
+| `{` followed by `"asset"` and `"version"` | glTF JSON | `Model` (model-viewer)   |
+| `\x89PNG\r\n\x1a\n` at offset 0           | PNG       | `Image(Pixelated)`       |
+| `\xff\xd8\xff` at offset 0                | JPEG      | `Image(Pixelated)`       |
+| `GIF87a` or `GIF89a` at offset 0          | GIF       | `Image(Pixelated)`       |
+| `RIFF????WEBP`                            | WebP      | `Image(Pixelated)`       |
+| `ftyp` at offset 4, MP4-family brand      | MP4       | `Video`                  |
+| `OggS` at offset 0                        | Ogg       | `Audio`                  |
+| `RIFF????WAVE`                            | WAV       | `Audio`                  |
+| `fLaC` at offset 0                        | FLAC      | `Audio`                  |
+| `%PDF-` at offset 0                       | PDF       | `Pdf`                    |
+
+The MP4 matcher brand-filters to `{mp4*, iso*, avc1, M4V , dash}`. HEIC, HEIF,
+and QuickTime share the ISO-BMFF `ftyp` header but are deliberately rejected
+so they fall through to the unknown preview rather than being mis-promoted to
+`Media::Video`.
+
+No format is auto-upgraded to `Media::Iframe`. Untrusted HTML or SVG bytes
+arriving under a wrong content-type label are intentionally left as
+`Media::Unknown`, because rendering arbitrary inscriptions inside an iframe
+would expand the renderable surface beyond the on-chain content-type contract
+and carries CSP and sandbox implications.
+
+The brotli decode step is bounded by a hard `.take(4 KiB)` cap, so a
+maliciously crafted small compressed payload cannot trigger an unbounded
+decompression. Encodings other than brotli are not decoded; the raw bytes are
+sniffed as-is and will simply fail to match any rule.
+
+This rescue layer applies only to `/preview/<id>`. The `/content/<id>`
+endpoint continues to serve the original on-chain `Content-Type` header,
+leaving downstream clients (`<model-viewer>`, `<img>`, `<video>`) to do their
+own content sniffing if they wish. Embed, thumbnail, and oEmbed responses
+are not covered.
+
+Implementation: `Media::from_body_head` and the `SNIFF_TABLE` constant in
+`src/inscriptions/media.rs`; `Inscription::sniffed_media` in
+`src/inscriptions/inscription.rs`; one call site in the `/preview/<id>`
+handler in `src/subcommand/server.rs`.
diff --git a/src/chain.rs b/src/chain.rs
index bae81b584f..1e2bd201d4 100644
--- a/src/chain.rs
+++ b/src/chain.rs
@@ -38,8 +38,11 @@ impl Chain {
 
   pub(crate) fn inscription_content_size_limit(self) -> Option<usize> {
     match self {
-      Self::Mainnet | Self::Regtest => None,
-      Self::Testnet | Self::Testnet4 | Self::Signet => Some(1024),
+      // Testnet4 limit lifted locally: in practice everyone bypasses the 1KB
+      // cap on testnet4, so it no longer functions as spam protection — and
+      // we need real-size inscriptions to dry-run MoBA galleries publicly.
+      Self::Mainnet | Self::Regtest | Self::Testnet4 => None,
+      Self::Testnet | Self::Signet => Some(1024),
     }
   }
 
diff --git a/src/index.rs b/src/index.rs
index 5ead80ac26..905c470440 100644
--- a/src/index.rs
+++ b/src/index.rs
@@ -2023,28 +2023,122 @@ impl Index {
     &self,
     page_size: u32,
     page_index: u32,
+    sort: crate::templates::inscriptions::Sort,
   ) -> Result<(Vec<InscriptionId>, bool)> {
+    use crate::templates::inscriptions::Sort;
+
     let rtx = self.database.begin_read()?;
 
     let sequence_number_to_inscription_entry =
       rtx.open_table(SEQUENCE_NUMBER_TO_INSCRIPTION_ENTRY)?;
 
-    let last = sequence_number_to_inscription_entry
-      .iter()?
-      .next_back()
-      .map(|result| result.map(|(number, _entry)| number.value()))
-      .transpose()?
-      .unwrap_or_default();
+    let mut inscriptions = match sort {
+      Sort::Newest => {
+        let last = sequence_number_to_inscription_entry
+          .iter()?
+          .next_back()
+          .map(|result| result.map(|(number, _entry)| number.value()))
+          .transpose()?
+          .unwrap_or_default();
 
-    let start = last.saturating_sub(page_size.saturating_mul(page_index));
+        let start = last.saturating_sub(page_size.saturating_mul(page_index));
+        let end = start.saturating_sub(page_size);
 
-    let end = start.saturating_sub(page_size);
+        sequence_number_to_inscription_entry
+          .range(end..=start)?
+          .rev()
+          .map(|result| result.map(|(_number, entry)| InscriptionEntry::load(entry.value()).id))
+          .collect::<Result<Vec<InscriptionId>, StorageError>>()?
+      }
+      Sort::Oldest => {
+        let start = page_size.saturating_mul(page_index);
+        let end = start.saturating_add(page_size);
+
+        sequence_number_to_inscription_entry
+          .range(start..=end)?
+          .map(|result| result.map(|(_number, entry)| InscriptionEntry::load(entry.value()).id))
+          .collect::<Result<Vec<InscriptionId>, StorageError>>()?
+      }
+    };
 
-    let mut inscriptions = sequence_number_to_inscription_entry
-      .range(end..=start)?
-      .rev()
-      .map(|result| result.map(|(_number, entry)| InscriptionEntry::load(entry.value()).id))
-      .collect::<Result<Vec<InscriptionId>, StorageError>>()?;
+    let more = u32::try_from(inscriptions.len()).unwrap_or(u32::MAX) > page_size;
+
+    if more {
+      inscriptions.pop();
+    }
+
+    Ok((inscriptions, more))
+  }
+
+  pub fn get_cursed_inscriptions_paginated(
+    &self,
+    page_size: u32,
+    page_index: u32,
+    sort: crate::templates::inscriptions::Sort,
+  ) -> Result<(Vec<InscriptionId>, bool)> {
+    use crate::templates::inscriptions::Sort;
+
+    let rtx = self.database.begin_read()?;
+
+    let inscription_number_to_sequence_number =
+      rtx.open_table(INSCRIPTION_NUMBER_TO_SEQUENCE_NUMBER)?;
+    let sequence_number_to_inscription_entry =
+      rtx.open_table(SEQUENCE_NUMBER_TO_INSCRIPTION_ENTRY)?;
+
+    // Cursed inscriptions are numbered densely from -1 downward, so page
+    // bounds can be computed arithmetically instead of skipping.
+    let lowest = i64::from(
+      inscription_number_to_sequence_number
+        .iter()?
+        .next()
+        .map(|result| result.map(|(number, _)| number.value()))
+        .transpose()?
+        .unwrap_or(0),
+    );
+
+    if lowest >= 0 {
+      return Ok((Vec::new(), false));
+    }
+
+    let page_size_i = i64::from(page_size);
+    let skip = page_size_i * i64::from(page_index);
+
+    let sequence_numbers: Vec<u32> = match sort {
+      // Most negative number = most recently inscribed cursed.
+      Sort::Newest => {
+        let start = lowest.saturating_add(skip);
+        if start >= 0 {
+          return Ok((Vec::new(), false));
+        }
+        let end = start.saturating_add(page_size_i + 1).min(0);
+        inscription_number_to_sequence_number
+          .range(i32::try_from(start).unwrap()..i32::try_from(end).unwrap())?
+          .map(|result| result.map(|(_, sequence)| sequence.value()))
+          .collect::<Result<Vec<u32>, StorageError>>()?
+      }
+      Sort::Oldest => {
+        let hi = -1_i64 - skip;
+        if hi < lowest {
+          return Ok((Vec::new(), false));
+        }
+        let lo = (hi - page_size_i).max(lowest);
+        inscription_number_to_sequence_number
+          .range(i32::try_from(lo).unwrap()..=i32::try_from(hi).unwrap())?
+          .rev()
+          .map(|result| result.map(|(_, sequence)| sequence.value()))
+          .collect::<Result<Vec<u32>, StorageError>>()?
+      }
+    };
+
+    let mut inscriptions = sequence_numbers
+      .into_iter()
+      .map(|sequence| {
+        sequence_number_to_inscription_entry
+          .get(&sequence)?
+          .map(|entry| InscriptionEntry::load(entry.value()).id)
+          .ok_or_else(|| anyhow!("missing inscription entry for sequence number {sequence}"))
+      })
+      .collect::<Result<Vec<InscriptionId>>>()?;
 
     let more = u32::try_from(inscriptions.len()).unwrap_or(u32::MAX) > page_size;
 
@@ -2281,7 +2375,7 @@ impl Index {
     let child_count = all_children.len();
 
     let children = all_children
-      .take(4)
+      .take(100)
       .map(|result| {
         result
           .and_then(|sequence_number| {
@@ -3926,7 +4020,7 @@ mod tests {
 
       context.mine_blocks(1);
 
-      let (inscriptions, more) = context.index.get_inscriptions_paginated(100, 0).unwrap();
+      let (inscriptions, more) = context.index.get_inscriptions_paginated(100, 0, crate::templates::inscriptions::Sort::Newest).unwrap();
       assert_eq!(inscriptions, &[inscription_id]);
       assert!(!more);
     }
@@ -3953,7 +4047,7 @@ mod tests {
 
       assert_eq!(ids.len(), 100);
 
-      let (inscriptions, more) = context.index.get_inscriptions_paginated(100, 0).unwrap();
+      let (inscriptions, more) = context.index.get_inscriptions_paginated(100, 0, crate::templates::inscriptions::Sort::Newest).unwrap();
       assert_eq!(inscriptions, ids);
       assert!(more);
     }
diff --git a/src/inscriptions/inscription.rs b/src/inscriptions/inscription.rs
index cc81bdc5fc..5139e7b2f8 100644
--- a/src/inscriptions/inscription.rs
+++ b/src/inscriptions/inscription.rs
@@ -244,6 +244,55 @@ impl Inscription {
     content_type.parse().unwrap_or(Media::Unknown)
   }
 
+  /// Like `Self::media`, but if the result is `Media::Unknown` and the body
+  /// is non-empty, peek at the first 4 KiB of the body (transparently
+  /// decoding brotli when `content_encoding == "br"`) and try to upgrade the
+  /// classification via `Media::from_body_head`.
+  ///
+  /// This is the entry point the `/preview/<id>` handler uses to rescue
+  /// inscriptions that were inscribed with the wrong (or missing)
+  /// `content_type` tag — most commonly `application/octet-stream` for what
+  /// is actually a glTF, PNG, JPEG, MP4, etc.
+  ///
+  /// On-chain state is untouched; only the preview-template choice changes.
+  /// The `/content/<id>` endpoint continues to serve the original on-chain
+  /// `Content-Type` header, leaving downstream clients (`<model-viewer>`,
+  /// `<img>`, `<video>`) to do their own content sniffing if they wish.
+  /// Embed, thumbnail, and oEmbed paths are not covered by this method.
+  pub fn sniffed_media(&self) -> Media {
+    let media = self.media();
+    if !matches!(media, Media::Unknown) {
+      return media;
+    }
+    let Some(body) = self.body() else { return media };
+    let head = self.sniff_head(body);
+    Media::from_body_head(&head).unwrap_or(Media::Unknown)
+  }
+
+  /// Return up to 4 KiB from the start of the body for magic-byte inspection.
+  ///
+  /// When `content_encoding == "br"` the body is brotli-decoded with a hard
+  /// `.take(4 KiB)` cap, so a maliciously crafted small compressed payload
+  /// cannot fan out into a multi-gigabyte decompression — the same DoS shape
+  /// that the server's `--decompress` flag warns about.
+  ///
+  /// Encodings other than brotli are not decoded; the raw bytes are passed
+  /// through, and will simply fail to match any magic-byte rule.
+  fn sniff_head(&self, body: &[u8]) -> Vec<u8> {
+    const SNIFF_BYTES: usize = 4096;
+    match self.content_encoding.as_deref() {
+      Some(b"br") => {
+        use std::io::Read;
+        let mut head = Vec::with_capacity(SNIFF_BYTES);
+        let _ = brotli::Decompressor::new(body, SNIFF_BYTES)
+          .take(SNIFF_BYTES as u64)
+          .read_to_end(&mut head);
+        head
+      }
+      _ => body[..body.len().min(SNIFF_BYTES)].to_vec(),
+    }
+  }
+
   pub fn body(&self) -> Option<&[u8]> {
     Some(self.body.as_ref()?)
   }
@@ -1415,4 +1464,71 @@ mod tests {
       .is_none()
     );
   }
+
+  #[test]
+  fn sniffed_media_passes_through_known_content_type() {
+    let i = Inscription {
+      content_type: Some(b"model/gltf+json".into()),
+      body: Some(b"not even valid gltf".to_vec()),
+      ..default()
+    };
+    assert_eq!(i.sniffed_media(), Media::Model);
+  }
+
+  #[test]
+  fn sniffed_media_upgrades_octet_stream_glb() {
+    let mut body = b"glTF".to_vec();
+    body.extend_from_slice(&[2, 0, 0, 0, 0, 0, 0, 0]);
+    let i = Inscription {
+      content_type: Some(b"application/octet-stream".into()),
+      body: Some(body),
+      ..default()
+    };
+    assert_eq!(i.sniffed_media(), Media::Model);
+  }
+
+  #[test]
+  fn sniffed_media_upgrades_octet_stream_gltf_json() {
+    let i = Inscription {
+      content_type: Some(b"application/octet-stream".into()),
+      body: Some(br#"{"asset":{"version":"2.0"},"scene":0}"#.to_vec()),
+      ..default()
+    };
+    assert_eq!(i.sniffed_media(), Media::Model);
+  }
+
+  #[test]
+  fn sniffed_media_upgrades_brotli_compressed_gltf() {
+    let gltf = br#"{"asset":{"version":"2.0"},"scene":0,"scenes":[{"nodes":[]}],"nodes":[]}"#;
+    let mut compressed = Vec::new();
+    CompressorWriter::new(&mut compressed, BROTLI_BUFFER_SIZE, 11, 22)
+      .write_all(gltf)
+      .unwrap();
+
+    let i = Inscription {
+      content_type: Some(b"application/octet-stream".into()),
+      content_encoding: Some(b"br".to_vec()),
+      body: Some(compressed),
+      ..default()
+    };
+    assert_eq!(i.sniffed_media(), Media::Model);
+  }
+
+  #[test]
+  fn sniffed_media_leaves_random_bytes_unknown() {
+    let i = Inscription {
+      content_type: Some(b"application/octet-stream".into()),
+      body: Some(vec![0xde, 0xad, 0xbe, 0xef]),
+      ..default()
+    };
+    assert_eq!(i.sniffed_media(), Media::Unknown);
+  }
+
+  #[test]
+  fn sniffed_media_no_body_is_unknown() {
+    let i = Inscription {
+      ..default()
+    };
+    assert_eq!(i.sniffed_media(), Media::Unknown);
+  }
 }
diff --git a/src/inscriptions/media.rs b/src/inscriptions/media.rs
index 21d1e536c4..5679d6b5df 100644
--- a/src/inscriptions/media.rs
+++ b/src/inscriptions/media.rs
@@ -165,6 +165,151 @@ impl Media {
 
     Ok(())
   }
+
+  /// Sniff the first bytes of an inscription body and return the most specific
+  /// `Media` variant whose magic-byte matcher accepts the head, or `None` if
+  /// no matcher recognises the bytes.
+  ///
+  /// Used to rescue inscriptions whose stored `content_type` is wrong — most
+  /// commonly `application/octet-stream` for a payload that is actually a glTF
+  /// model, PNG image, MP4 video, and so on. The on-chain state is never
+  /// modified; this only changes which preview template the server chooses at
+  /// display time.
+  ///
+  /// The caller must hand in already-decompressed bytes. The full pipeline
+  /// (including the brotli decode step for inscriptions with
+  /// `content_encoding == "br"`) lives in `Inscription::sniffed_media`.
+  pub(crate) fn from_body_head(head: &[u8]) -> Option<Self> {
+    Self::SNIFF_TABLE
+      .iter()
+      .find_map(|(matches, media)| matches(head).then_some(*media))
+  }
+
+  /// Magic-byte signatures consulted by `Self::from_body_head`.
+  ///
+  /// Each row is `(matcher, Media)`. Matchers must be cheap (no allocation,
+  /// no I/O) and decisive — the table returns on the first accepting matcher.
+  ///
+  /// To add a new format: define a `matches_*` function below and append a row.
+  /// Two invariants the table relies on:
+  ///
+  ///   - A matcher should only confirm formats whose `Media` variant is in
+  ///     fact rendered by the preview templates. The MP4 matcher, for example,
+  ///     brand-filters to exclude HEIC, HEIF, and QuickTime — bytes whose
+  ///     ISO-BMFF header would otherwise fool a naive `ftyp` check but which
+  ///     the project does not promise to render as video.
+  ///   - Nothing here should promote to `Media::Iframe`. Auto-upgrading
+  ///     unknown-tagged HTML or SVG into an iframe would expand the renderable
+  ///     surface beyond the on-chain content-type contract, which carries
+  ///     CSP and sandbox implications.
+  const SNIFF_TABLE: &'static [(fn(&[u8]) -> bool, Self)] = &[
+    (Self::matches_glb,       Self::Model),
+    (Self::matches_gltf_json, Self::Model),
+    (Self::matches_png,       Self::Image(Pixelated)),
+    (Self::matches_jpeg,      Self::Image(Pixelated)),
+    (Self::matches_gif,       Self::Image(Pixelated)),
+    (Self::matches_webp,      Self::Image(Pixelated)),
+    (Self::matches_mp4,       Self::Video),
+    (Self::matches_ogg,       Self::Audio),
+    (Self::matches_wav,       Self::Audio),
+    (Self::matches_flac,      Self::Audio),
+    (Self::matches_pdf,       Self::Pdf),
+  ];
+
+  /// glTF binary (GLB). The four-byte magic `glTF` is followed on disk by a
+  /// little-endian version and total length, but those fields are not needed
+  /// for the sniff.
+  fn matches_glb(head: &[u8]) -> bool {
+    head.starts_with(b"glTF")
+  }
+
+  /// glTF 2.0 JSON. Verifies a leading `{` (after optional ASCII whitespace)
+  /// and the presence of both `"asset"` and `"version"` somewhere in the
+  /// head, which the spec requires of every conforming glTF document.
+  fn matches_gltf_json(head: &[u8]) -> bool {
+    let trimmed = head
+      .iter()
+      .position(|b| !b.is_ascii_whitespace())
+      .map(|i| &head[i..])
+      .unwrap_or(&[]);
+    if !trimmed.starts_with(b"{") {
+      return false;
+    }
+    fn contains(haystack: &[u8], needle: &[u8]) -> bool {
+      haystack.windows(needle.len()).any(|w| w == needle)
+    }
+    contains(head, b"\"asset\"") && contains(head, b"\"version\"")
+  }
+
+  /// PNG. Eight-byte fixed signature. APNG shares it and is rendered as
+  /// `Image(Pixelated)` for consistency with the project's MIME table.
+  fn matches_png(head: &[u8]) -> bool {
+    head.starts_with(b"\x89PNG\r\n\x1a\n")
+  }
+
+  /// JPEG. Three-byte SOI marker (`\xff\xd8\xff`) followed by another segment
+  /// marker (JFIF `\xe0`, Exif `\xe1`, DQT `\xdb`, Adobe APP14 `\xee`, ...),
+  /// all of which are valid fourth bytes.
+  fn matches_jpeg(head: &[u8]) -> bool {
+    head.starts_with(b"\xff\xd8\xff")
+  }
+
+  /// GIF, either GIF87a or GIF89a.
+  fn matches_gif(head: &[u8]) -> bool {
+    head.starts_with(b"GIF87a") || head.starts_with(b"GIF89a")
+  }
+
+  /// WebP. Bytes 0..4 = `RIFF`, bytes 8..12 = `WEBP`. The FourCC at offset 8
+  /// is what distinguishes WebP from sibling RIFF containers like WAV or AVI.
+  fn matches_webp(head: &[u8]) -> bool {
+    head.len() >= 12 && &head[0..4] == b"RIFF" && &head[8..12] == b"WEBP"
+  }
+
+  /// MP4 (ISO Base Media File Format), constrained to brands the project will
+  /// actually render. Requires `ftyp` at offset 4 and a brand in the set
+  /// `{mp4*, iso*, avc1, M4V , dash}`.
+  ///
+  /// Other ISO-BMFF brands — notably HEIC and HEIF (image, not video) and
+  /// QuickTime (`qt  `, a codec the renderer does not claim to support) — are
+  /// deliberately rejected so they fall through to `PreviewUnknownHtml`
+  /// rather than being mis-promoted to `Media::Video`.
+  fn matches_mp4(head: &[u8]) -> bool {
+    if head.len() < 12 || &head[4..8] != b"ftyp" {
+      return false;
+    }
+    let brand = &head[8..12];
+    brand.starts_with(b"mp4")
+      || brand.starts_with(b"iso")
+      || brand == b"avc1"
+      || brand == b"M4V "
+      || brand == b"dash"
+  }
+
+  /// Ogg container. Always promoted to `Media::Audio` because the project's
+  /// MIME table declares only audio Ogg variants. Theora-in-Ogg would
+  /// mis-route here, but is not relevant to inscriptions in practice.
+  fn matches_ogg(head: &[u8]) -> bool {
+    head.starts_with(b"OggS")
+  }
+
+  /// WAV. Bytes 0..4 = `RIFF`, bytes 8..12 = `WAVE`. Shares the RIFF container
+  /// with WebP and AVI; the FourCC at offset 8 disambiguates.
+  fn matches_wav(head: &[u8]) -> bool {
+    head.len() >= 12 && &head[0..4] == b"RIFF" && &head[8..12] == b"WAVE"
+  }
+
+  /// FLAC. Four-byte magic `fLaC` at offset 0. Files prefixed with an ID3v2
+  /// header (rare for FLAC but permitted by some encoders) are not handled
+  /// here; they would have to be rescued via a separate ID3 matcher.
+  fn matches_flac(head: &[u8]) -> bool {
+    head.starts_with(b"fLaC")
+  }
+
+  /// PDF. Five-byte signature `%PDF-`; the version digits follow (`1.4`,
+  /// `1.7`, `2.0`, ...).
+  fn matches_pdf(head: &[u8]) -> bool {
+    head.starts_with(b"%PDF-")
+  }
 }
 
 impl FromStr for Media {
@@ -231,4 +376,145 @@ mod tests {
       }
     }
   }
+
+  #[test]
+  fn sniff_glb_magic() {
+    let mut body = b"glTF".to_vec();
+    body.extend_from_slice(&[2, 0, 0, 0]);
+    assert_eq!(Media::from_body_head(&body), Some(Media::Model));
+  }
+
+  #[test]
+  fn sniff_gltf_json() {
+    let body = br#"{
+  "asset": { "version": "2.0" },
+  "scene": 0
+}"#;
+    assert_eq!(Media::from_body_head(body), Some(Media::Model));
+  }
+
+  #[test]
+  fn sniff_gltf_json_with_leading_whitespace() {
+    let body = b"  \n  {\"asset\":{\"version\":\"2.1\"}}";
+    assert_eq!(Media::from_body_head(body), Some(Media::Model));
+  }
+
+  #[test]
+  fn sniff_random_bytes_stays_unknown() {
+    let body = [0xde, 0xad, 0xbe, 0xef, 0x00, 0x01, 0x02, 0x03];
+    assert_eq!(Media::from_body_head(&body), None);
+  }
+
+  #[test]
+  fn sniff_json_without_asset_is_not_gltf() {
+    let body = br#"{"foo":"bar"}"#;
+    assert_eq!(Media::from_body_head(body), None);
+  }
+
+  #[test]
+  fn sniff_png() {
+    let body = b"\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR";
+    assert_eq!(
+      Media::from_body_head(body),
+      Some(Media::Image(ImageRendering::Pixelated))
+    );
+  }
+
+  #[test]
+  fn sniff_jpeg() {
+    let body = b"\xff\xd8\xff\xe0\x00\x10JFIF\x00\x01";
+    assert_eq!(
+      Media::from_body_head(body),
+      Some(Media::Image(ImageRendering::Pixelated))
+    );
+  }
+
+  #[test]
+  fn sniff_gif() {
+    assert_eq!(
+      Media::from_body_head(b"GIF89a\x10\x00\x10\x00"),
+      Some(Media::Image(ImageRendering::Pixelated))
+    );
+    assert_eq!(
+      Media::from_body_head(b"GIF87a\x10\x00\x10\x00"),
+      Some(Media::Image(ImageRendering::Pixelated))
+    );
+  }
+
+  #[test]
+  fn sniff_webp() {
+    let mut body = b"RIFF".to_vec();
+    body.extend_from_slice(&[0, 0, 0, 0]);
+    body.extend_from_slice(b"WEBPVP8 ");
+    assert_eq!(
+      Media::from_body_head(&body),
+      Some(Media::Image(ImageRendering::Pixelated))
+    );
+  }
+
+  #[test]
+  fn sniff_mp4() {
+    let mut body = vec![0, 0, 0, 0x20];
+    body.extend_from_slice(b"ftypisom");
+    body.extend_from_slice(&[0, 0, 0, 0]);
+    assert_eq!(Media::from_body_head(&body), Some(Media::Video));
+  }
+
+  #[test]
+  fn sniff_mp4_mp42_brand() {
+    let mut body = vec![0, 0, 0, 0x20];
+    body.extend_from_slice(b"ftypmp42");
+    body.extend_from_slice(&[0, 0, 0, 0]);
+    assert_eq!(Media::from_body_head(&body), Some(Media::Video));
+  }
+
+  #[test]
+  fn sniff_mp4_rejects_heic() {
+    let mut body = vec![0, 0, 0, 0x20];
+    body.extend_from_slice(b"ftypheic");
+    body.extend_from_slice(&[0, 0, 0, 0]);
+    assert_eq!(Media::from_body_head(&body), None);
+  }
+
+  #[test]
+  fn sniff_mp4_rejects_quicktime() {
+    let mut body = vec![0, 0, 0, 0x20];
+    body.extend_from_slice(b"ftypqt  ");
+    body.extend_from_slice(&[0, 0, 0, 0]);
+    assert_eq!(Media::from_body_head(&body), None);
+  }
+
+  #[test]
+  fn sniff_ogg() {
+    let body = b"OggS\x00\x02\x00\x00\x00\x00\x00\x00";
+    assert_eq!(Media::from_body_head(body), Some(Media::Audio));
+  }
+
+  #[test]
+  fn sniff_wav() {
+    let mut body = b"RIFF".to_vec();
+    body.extend_from_slice(&[0, 0, 0, 0]);
+    body.extend_from_slice(b"WAVEfmt ");
+    assert_eq!(Media::from_body_head(&body), Some(Media::Audio));
+  }
+
+  #[test]
+  fn sniff_flac() {
+    let body = b"fLaC\x00\x00\x00\x22";
+    assert_eq!(Media::from_body_head(body), Some(Media::Audio));
+  }
+
+  #[test]
+  fn sniff_riff_avi_is_unknown() {
+    let mut body = b"RIFF".to_vec();
+    body.extend_from_slice(&[0, 0, 0, 0]);
+    body.extend_from_slice(b"AVI LIST");
+    assert_eq!(Media::from_body_head(&body), None);
+  }
+
+  #[test]
+  fn sniff_pdf() {
+    let body = b"%PDF-1.4\n%\xe2\xe3\xcf\xd3";
+    assert_eq!(Media::from_body_head(body), Some(Media::Pdf));
+  }
 }
diff --git a/src/subcommand/server.rs b/src/subcommand/server.rs
index 2e1e5e0b86..1571402fb5 100644
--- a/src/subcommand/server.rs
+++ b/src/subcommand/server.rs
@@ -8,9 +8,10 @@ use {
   super::*,
   crate::inscriptions::opus_metadata,
   crate::templates::{
-    AddressHtml, BlockHtml, BlocksHtml, ChildrenHtml, ClockSvg, CollectionsHtml, EmbedAudioHtml,
-    EmbedImageHtml, EmbedUnknownHtml, EmbedVideoHtml, GalleriesHtml, GalleryHtml, HomeHtml,
-    InputHtml, InscriptionHtml, InscriptionsBlockHtml, InscriptionsHtml, ItemHtml, OutputHtml,
+    AddressHtml, BlockHtml, BlocksHtml, ChildrenHtml, ClockSvg, CollectionsHtml, ComingSoonHtml, Crumb,
+    EmbedAudioHtml, EmbedImageHtml, EmbedUnknownHtml, EmbedVideoHtml, GalleriesHtml, GalleryHtml,
+    HomeHtml, InputHtml, InscriptionHtml, InscriptionsBlockHtml, InscriptionsHtml, InscriptionsSort,
+    ItemHtml, OutputHtml, SatInscription, text_title,
     PageContent, PageHtml, ParentsHtml, PreviewAudioHtml, PreviewCodeHtml, PreviewFontHtml,
     PreviewImageHtml, PreviewMarkdownHtml, PreviewModelHtml, PreviewPdfHtml, PreviewTextHtml,
     PreviewUnknownHtml, PreviewVideoHtml, RareTxt, RuneHtml, RuneNotFoundHtml, RunesHtml, SatHtml,
@@ -59,6 +60,12 @@ enum SpawnConfig {
   Redirect(String),
 }
 
+#[derive(Deserialize)]
+pub(crate) struct InscriptionsQuery {
+  pub(crate) sort: Option<InscriptionsSort>,
+  pub(crate) cursed: Option<u8>,
+}
+
 #[derive(Deserialize)]
 pub(crate) struct OutputsQuery {
   #[serde(rename = "type")]
@@ -129,6 +136,11 @@ pub struct Server {
     help = "Decompress encoded content. Currently only supports brotli. Be careful using this on production instances. A decompressed inscription may be arbitrarily large, making decompression a DoS vector."
   )]
   pub(crate) decompress: bool,
+  #[arg(
+    long,
+    help = "Use <DOMAIN> in absolute URLs served to clients, such as Open Graph images and oEmbed links. Defaults to <CSP_ORIGIN>, then <ACME_DOMAIN>, then ordinals.com. Never derived from the host machine's name."
+  )]
+  pub(crate) domain: Option<String>,
   #[arg(long, env = "ORD_SERVER_DISABLE_JSON_API", help = "Disable JSON API.")]
   pub(crate) disable_json_api: bool,
   #[arg(
@@ -213,7 +225,7 @@ impl Server {
         chain: settings.chain(),
         csp_origin: self.csp_origin.clone(),
         decompress: self.decompress,
-        domain: acme_domains.first().cloned(),
+        domain: self.public_domain(),
         index_sats: index.has_sat_index(),
         json_api_enabled: !self.disable_json_api,
         proxy: self.proxy.clone(),
@@ -241,6 +253,7 @@ impl Server {
         )
         .route("/clock", get(Self::clock))
         .route("/collections", get(Self::collections))
+        .route("/museum", get(Self::museum))
         .route("/collections/{page}", get(Self::collections_paginated))
         .route("/decode/{txid}", get(Self::decode))
         .route("/galleries", get(Self::galleries))
@@ -547,6 +560,15 @@ impl Server {
     }
   }
 
+  // Only ever an explicitly configured domain. The host machine's name is used
+  // for ACME challenges when no domain is given, but must never reach clients.
+  fn public_domain(&self) -> Option<String> {
+    self
+      .domain
+      .clone()
+      .or_else(|| self.acme_domain.first().cloned())
+  }
+
   fn http_port(&self) -> Option<u16> {
     if self.http || self.http_port.is_some() || (self.https_port.is_none() && !self.https) {
       Some(self.http_port.unwrap_or(80))
@@ -730,7 +752,7 @@ impl Server {
          }| AddressHtml {
           address: satscard.address.clone(),
           header: false,
-          inscriptions,
+          inscriptions: inscriptions.map(|ids| Self::thumbs(&index, ids)),
           outputs,
           runes_balances,
           sat_balance,
@@ -815,7 +837,7 @@ impl Server {
         SatHtml {
           address,
           blocktime,
-          inscriptions,
+          inscriptions: Self::thumbs(&index, inscriptions),
           sat,
           satpoint,
         }
@@ -846,7 +868,9 @@ impl Server {
         OutputHtml {
           chain: server_config.chain,
           confirmations: output_info.confirmations,
-          inscriptions: output_info.inscriptions,
+          inscriptions: output_info
+            .inscriptions
+            .map(|ids| Self::thumbs(&index, ids)),
           outpoint,
           output: txout,
           runes: output_info.runes,
@@ -1043,6 +1067,7 @@ impl Server {
           id,
           mintable,
           parent,
+          parent_media: None,
         })
         .into_response()
       } else {
@@ -1051,6 +1076,7 @@ impl Server {
           id,
           mintable,
           parent,
+          parent_media: parent.and_then(|parent| Self::thumbnail_media(&index, parent)),
         }
         .page(server_config)
         .into_response()
@@ -1113,7 +1139,7 @@ impl Server {
     task::block_in_place(|| {
       Ok(
         HomeHtml {
-          inscriptions: index.get_home_inscriptions()?,
+          inscriptions: Self::thumbs(&index, index.get_home_inscriptions()?),
         }
         .page(server_config),
       )
@@ -1138,9 +1164,25 @@ impl Server {
       Ok(if accept_json {
         Json(api::Blocks::new(blocks, featured_blocks)).into_response()
       } else {
-        BlocksHtml::new(blocks, featured_blocks)
-          .page(server_config)
-          .into_response()
+        let featured_medias = featured_blocks
+          .iter()
+          .map(|(hash, ids)| {
+            (
+              *hash,
+              ids
+                .iter()
+                .map(|id| Self::thumbnail_media(&index, *id))
+                .collect(),
+            )
+          })
+          .collect();
+
+        BlocksHtml {
+          featured_medias,
+          ..BlocksHtml::new(blocks, featured_blocks)
+        }
+        .page(server_config)
+        .into_response()
       })
     })
   }
@@ -1225,7 +1267,7 @@ impl Server {
         AddressHtml {
           address,
           header: true,
-          inscriptions,
+          inscriptions: inscriptions.map(|ids| Self::thumbs(&index, ids)),
           outputs,
           runes_balances,
           sat_balance,
@@ -1236,6 +1278,21 @@ impl Server {
     })
   }
 
+  fn thumbnail_media(index: &Index, id: InscriptionId) -> Option<Media> {
+    index
+      .get_inscription_by_id(id)
+      .ok()
+      .flatten()
+      .map(|inscription| inscription.sniffed_media())
+  }
+
+  fn thumbs(index: &Index, ids: Vec<InscriptionId>) -> Vec<(InscriptionId, Option<Media>)> {
+    ids
+      .into_iter()
+      .map(|id| (id, Self::thumbnail_media(index, id)))
+      .collect()
+  }
+
   fn address_info(index: &Index, address: &Address) -> ServerResult<Option<api::AddressInfo>> {
     if !index.has_address_index() {
       return Ok(None);
@@ -1306,7 +1363,7 @@ impl Server {
           Height(height),
           Self::index_height(&index)?,
           total_num,
-          featured_inscriptions,
+          Self::thumbs(&index, featured_inscriptions),
           runes,
         )
         .page(server_config)
@@ -1333,6 +1390,7 @@ impl Server {
           chain: server_config.chain,
           etching: index.get_etching(txid)?,
           inscription_count,
+          inscription_medias: Vec::new(),
           transaction,
           txid,
         })
@@ -1342,6 +1400,10 @@ impl Server {
           chain: server_config.chain,
           etching: index.get_etching(txid)?,
           inscription_count,
+          inscription_medias: ParsedEnvelope::from_transaction(&transaction)
+            .into_iter()
+            .map(|envelope| Some(envelope.payload.sniffed_media()))
+            .collect(),
           transaction,
           txid,
         }
@@ -1825,7 +1887,7 @@ impl Server {
           .ok_or_not_found(|| format!("delegate {inscription_id}"))?
       }
 
-      let media = inscription.media();
+      let media = inscription.sniffed_media();
 
       if let Media::Iframe = media {
         return Ok(
@@ -1985,18 +2047,22 @@ impl Server {
 
       let properties = inscription.properties();
 
-      let item = properties
-        .gallery
+      let items = properties.gallery.clone();
+      let item = items
         .get(i)
         .ok_or_not_found(|| format!("gallery {query} item {i}"))?
         .clone();
+      let gallery_title = properties.attributes.title.clone();
+      let total = items.len();
 
       Ok(
         ItemHtml {
           gallery_id: info.id,
           gallery_number: info.number,
+          gallery_title,
           i,
           item,
+          total,
         }
         .page(server_config),
       )
@@ -2242,22 +2308,39 @@ impl Server {
 
         let properties = inscription.properties();
 
+        // Render the breadcrumb trail when there's somewhere to navigate to,
+        // i.e. the inscription has at least one parent OR at least one
+        // child. Inscriptions with neither (an isolated leaf) get no
+        // breadcrumb — a single bold current crumb with an empty dropdown
+        // is just clutter.
+        let breadcrumbs = if info.parents.is_empty() && info.child_count == 0 {
+          Vec::new()
+        } else {
+          Self::breadcrumb_trails(&index, info.id, 0)?
+        };
+
         InscriptionHtml {
+          breadcrumbs,
           chain: server_config.chain,
           charms: Charm::Vindicated.unset(info.charms.iter().fold(0, |mut acc, charm| {
             charm.set(&mut acc);
             acc
           })),
           child_count: info.child_count,
-          children: info.children,
+          children: Self::thumbs(index, info.children),
           fee: info.fee,
+          gallery_media: properties
+            .gallery
+            .iter()
+            .map(|item| Self::thumbnail_media(index, item.id()))
+            .collect(),
           height: info.height,
           id: info.id,
           inscription,
           next: info.next,
           number: info.number,
           output: txout,
-          parents: info.parents,
+          parents: Self::thumbs(index, info.parents),
           previous: info.previous,
           properties,
           rune: info.rune,
@@ -2271,6 +2354,101 @@ impl Server {
     })
   }
 
+  fn breadcrumb_trails(
+    index: &Index,
+    id: InscriptionId,
+    depth: usize,
+  ) -> ServerResult<Vec<Vec<Crumb>>> {
+    const MAX_DEPTH: usize = 10;
+    const MAX_TRAILS: usize = 5;
+
+    let Some(entry) = index.get_inscription_entry(id)? else {
+      return Ok(Vec::new());
+    };
+
+    let title = index.get_inscription_by_id(id)?.and_then(|inscription| {
+      let title = inscription.properties().attributes.title;
+      title.or_else(|| text_title(&inscription))
+    });
+
+    let reinscriptions = match entry.sat {
+      Some(sat) => index
+        .get_inscription_ids_by_sat(sat)?
+        .into_iter()
+        .filter(|&sat_id| sat_id != id)
+        .map(|sat_id| {
+          Ok(SatInscription {
+            id: sat_id,
+            label: Self::inscription_label(index, sat_id)?,
+          })
+        })
+        .collect::<ServerResult<Vec<SatInscription>>>()?,
+      None => Vec::new(),
+    };
+
+    // Children for every crumb in the trail, including the current
+    // inscription itself. (We initially skipped children for the current
+    // crumb because the page body already lists them, but that omission
+    // felt arbitrary — the dropdown is a navigation shortcut, and not
+    // having it on the current crumb only made the trail asymmetric.)
+    let (child_ids, _) =
+      index.get_children_by_sequence_number_paginated(entry.sequence_number, 21, 0)?;
+    let more_children = child_ids.len() > 20;
+    let children = child_ids
+      .into_iter()
+      .take(20)
+      .map(|child_id| {
+        Ok(SatInscription {
+          id: child_id,
+          label: Self::inscription_label(index, child_id)?,
+        })
+      })
+      .collect::<ServerResult<Vec<SatInscription>>>()?;
+
+    let crumb = Crumb {
+      id,
+      title: title.unwrap_or_else(|| format!("#{}", entry.inscription_number)),
+      reinscriptions,
+      children,
+      more_children,
+    };
+
+    let (parents, _) = index.get_parents_by_sequence_number_paginated(entry.parents, 100, 0)?;
+
+    if parents.is_empty() || depth >= MAX_DEPTH {
+      return Ok(vec![vec![crumb]]);
+    }
+
+    let mut trails = Vec::new();
+    'outer: for parent in parents {
+      for mut trail in Self::breadcrumb_trails(index, parent, depth + 1)? {
+        trail.push(crumb.clone());
+        trails.push(trail);
+        if trails.len() >= MAX_TRAILS {
+          break 'outer;
+        }
+      }
+    }
+
+    Ok(trails)
+  }
+
+  fn inscription_label(index: &Index, id: InscriptionId) -> ServerResult<String> {
+    if let Some(inscription) = index.get_inscription_by_id(id)? {
+      let title = inscription.properties().attributes.title;
+      if let Some(title) = title.or_else(|| text_title(&inscription)) {
+        return Ok(title);
+      }
+    }
+
+    let number = index
+      .get_inscription_entry(id)?
+      .map(|entry| entry.inscription_number)
+      .unwrap_or_default();
+
+    Ok(format!("#{number}"))
+  }
+
   async fn inscriptions_json(
     Extension(index): Extension<Arc<Index>>,
     AcceptJson(accept_json): AcceptJson,
@@ -2316,6 +2494,12 @@ impl Server {
     Self::collections_paginated(Extension(server_config), Extension(index), Path(0)).await
   }
 
+  async fn museum(
+    Extension(server_config): Extension<Arc<ServerConfig>>,
+  ) -> ServerResult {
+    Ok(ComingSoonHtml {}.page(server_config).into_response())
+  }
+
   async fn collections_paginated(
     Extension(server_config): Extension<Arc<ServerConfig>>,
     Extension(index): Extension<Arc<Index>>,
@@ -2331,7 +2515,7 @@ impl Server {
 
       Ok(
         CollectionsHtml {
-          inscriptions: collections,
+          inscriptions: Self::thumbs(&index, collections),
           prev,
           next,
         }
@@ -2377,7 +2561,7 @@ impl Server {
         .into_response()
       } else {
         GalleriesHtml {
-          inscriptions: galleries,
+          inscriptions: Self::thumbs(&index, galleries),
           prev,
           next,
         }
@@ -2449,7 +2633,11 @@ impl Server {
         GalleryHtml {
           id,
           number,
-          items,
+          title: properties.attributes.title.clone(),
+          items: items
+            .into_iter()
+            .map(|(i, item_id)| (i, item_id, Self::thumbnail_media(&index, item_id)))
+            .collect(),
           prev_page,
           next_page,
         }
@@ -2505,7 +2693,7 @@ impl Server {
         ChildrenHtml {
           parent,
           parent_number,
-          children,
+          children: Self::thumbs(&index, children),
           prev_page,
           next_page,
         }
@@ -2518,12 +2706,14 @@ impl Server {
   async fn inscriptions(
     Extension(server_config): Extension<Arc<ServerConfig>>,
     Extension(index): Extension<Arc<Index>>,
+    Query(query): Query<InscriptionsQuery>,
     accept_json: AcceptJson,
   ) -> ServerResult {
     Self::inscriptions_paginated(
       Extension(server_config),
       Extension(index),
       Path(0),
+      Query(query),
       accept_json,
     )
     .await
@@ -2533,10 +2723,17 @@ impl Server {
     Extension(server_config): Extension<Arc<ServerConfig>>,
     Extension(index): Extension<Arc<Index>>,
     Path(page_index): Path<u32>,
+    Query(query): Query<InscriptionsQuery>,
     AcceptJson(accept_json): AcceptJson,
   ) -> ServerResult {
     task::block_in_place(|| {
-      let (inscriptions, more) = index.get_inscriptions_paginated(100, page_index)?;
+      let sort = query.sort.unwrap_or_default();
+      let cursed = query.cursed == Some(1);
+      let (inscriptions, more) = if cursed {
+        index.get_cursed_inscriptions_paginated(100, page_index, sort)?
+      } else {
+        index.get_inscriptions_paginated(100, page_index, sort)?
+      };
 
       let prev = page_index.checked_sub(1);
 
@@ -2551,9 +2748,11 @@ impl Server {
         .into_response()
       } else {
         InscriptionsHtml {
-          inscriptions,
+          inscriptions: Self::thumbs(&index, inscriptions),
           next,
           prev,
+          sort,
+          cursed,
         }
         .page(server_config)
         .into_response()
@@ -2607,7 +2806,7 @@ impl Server {
         InscriptionsBlockHtml::new(
           block_height,
           index.block_height()?.unwrap_or(Height(0)).n(),
-          inscriptions,
+          Self::thumbs(&index, inscriptions),
           more,
           page_index,
         )
@@ -2651,7 +2850,7 @@ impl Server {
         ParentsHtml {
           id,
           number: child.inscription_number,
-          parents,
+          parents: Self::thumbs(&index, parents),
           prev_page,
           next_page,
         }
@@ -3081,7 +3280,7 @@ mod tests {
         content,
         Arc::new(ServerConfig {
           chain: self.index.chain(),
-          domain: Some(System::host_name().unwrap()),
+          domain: None,
           ..Default::default()
         }),
       )
@@ -3906,6 +4105,7 @@ mod tests {
         entry,
         mintable: false,
         parent: Some(parent),
+        parent_media: None,
       },
     );
 
@@ -4710,7 +4910,7 @@ mod tests {
       .assert_response_regex(
         "/",
         StatusCode::OK,
-        ".*<a href=/ title=home>Ordinals<sup>regtest</sup></a>.*",
+        ".*<a href=/ title=home>Ordinals\\.Gallery<sup>regtest</sup></a>.*",
       );
   }
 
@@ -6282,7 +6482,7 @@ mod tests {
       format!("/preview/{inscription_id}"),
       StatusCode::OK,
       &format!("default-src {origin} 'unsafe-inline'"),
-      format!(r".*background-image: url\(/content/{inscription_id}\);.*"),
+      format!(r".*<img src=/content/{inscription_id} .*"),
     );
   }
 
@@ -6460,7 +6660,7 @@ mod tests {
     server.assert_response_regex(
       format!("/gallery/{}/0", Sat(5000000000).name()),
       StatusCode::OK,
-      ".*<title>Gallery 0 Item 0</title.*",
+      ".*<title>Gallery 0 / Item 0</title.*",
     );
   }
 
@@ -6739,7 +6939,7 @@ mod tests {
       r".*
 <h1>Collections</h1>
 <div class=thumbnails>
-  <a href=/inscription/.*><iframe .* src=/preview/.*></iframe></a>
+  <a href=/inscription/.*><img .* src=/content/.*></a>
   (<a href=/inscription/[[:xdigit:]]{64}i0>.*</a>\s*){99}
 </div>
 <div class=center>
@@ -6756,7 +6956,7 @@ prev
       ".*
 <h1>Collections</h1>
 <div class=thumbnails>
-  <a href=/inscription/.*><iframe .* src=/preview/.*></iframe></a>
+  <a href=/inscription/.*><img .* src=/content/.*></a>
 </div>
 <div class=center>
 <a class=prev href=/collections/0>prev</a>
@@ -7044,7 +7244,7 @@ next
       r".*
 <h1>Galleries</h1>
 <div class=thumbnails>
-  <a href=/inscription/.*><iframe .* src=/preview/.*></iframe></a>
+  <a href=/inscription/.*><img .* src=/content/.*></a>
   (<a href=/inscription/[[:xdigit:]]{64}i0>.*</a>\s*){99}
 </div>
 <div class=center>
@@ -7061,7 +7261,7 @@ prev
       ".*
 <h1>Galleries</h1>
 <div class=thumbnails>
-  <a href=/inscription/.*><iframe .* src=/preview/.*></iframe></a>
+  <a href=/inscription/.*><img .* src=/content/.*></a>
 </div>
 <div class=center>
 <a class=prev href=/galleries/0>prev</a>
@@ -7613,7 +7813,7 @@ next
     server.assert_response_regex(
       format!("/inscription/{parent_inscription_id}"),
       StatusCode::OK,
-      format!(".*<title>Inscription 0</title>.*<dt>children</dt>.*<a href=/inscription/{inscription_id}>.*</a>.*"),
+      format!(".*<title>Inscription 0</title>.*<dt class=with-toolbar>children.*<a href=/inscription/{inscription_id}>.*</a>.*"),
     );
 
     assert_eq!(
@@ -7631,6 +7831,55 @@ next
     );
   }
 
+  #[test]
+  fn inscription_breadcrumb_falls_back_to_number_when_untitled() {
+    let server = TestServer::builder().chain(Chain::Regtest).build();
+    server.mine_blocks(1);
+
+    let parent_txid = server.core.broadcast_tx(TransactionTemplate {
+      inputs: &[(1, 0, 0, inscription("image/png", "hello").to_witness())],
+      ..default()
+    });
+
+    server.mine_blocks(1);
+
+    let parent_inscription_id = InscriptionId {
+      txid: parent_txid,
+      index: 0,
+    };
+
+    let txid = server.core.broadcast_tx(TransactionTemplate {
+      inputs: &[
+        (
+          2,
+          0,
+          0,
+          Inscription {
+            content_type: Some("image/png".into()),
+            body: Some("hello".into()),
+            parents: vec![parent_inscription_id.value()],
+            ..default()
+          }
+          .to_witness(),
+        ),
+        (2, 1, 0, Default::default()),
+      ],
+      ..default()
+    });
+
+    server.mine_blocks(1);
+
+    let inscription_id = InscriptionId { txid, index: 0 };
+
+    server.assert_response_regex(
+      format!("/inscription/{inscription_id}"),
+      StatusCode::OK,
+      format!(
+        ".*<div class=breadcrumbs>.*<a href=/inscription/{parent_inscription_id}>#0</a>.*<span class=current>#1</span>.*"
+      ),
+    );
+  }
+
   #[test]
   fn inscription_with_and_without_children_page() {
     let server = TestServer::builder().chain(Chain::Regtest).build();
@@ -7753,13 +8002,13 @@ next
       format!("/gallery/{gallery_id}"),
       StatusCode::OK,
       format!(
-        ".*<title>Inscription \\d+ Gallery</title>.*<h1><a href=/inscription/{gallery_id}>Inscription \\d+</a> Gallery</h1>.*<div class=thumbnails>.*<a href=/gallery/{gallery_id}/0><iframe .* src=/preview/{item_id}\\?thumb=1></iframe></a>.*",
+        ".*<title>Inscription \\d+ Gallery</title>.*<h1><a href=/inscription/{gallery_id}>Inscription \\d+</a> / Gallery</h1>.*<div class=thumbnails>.*<a href=/gallery/{gallery_id}/0><iframe .* src=/preview/{item_id}\\?thumb=1></iframe></a>.*",
       ),
     );
   }
 
   #[test]
-  fn inscriptions_page_shows_max_four_children() {
+  fn inscriptions_page_shows_all_children() {
     let server = TestServer::builder().chain(Chain::Regtest).build();
     server.mine_blocks(1);
 
@@ -7852,6 +8101,7 @@ next
 .*<a href=/inscription/.*><iframe .* src=/preview/.*\\?thumb=1></iframe></a>.*
 .*<a href=/inscription/.*><iframe .* src=/preview/.*\\?thumb=1></iframe></a>.*
 .*<a href=/inscription/.*><iframe .* src=/preview/.*\\?thumb=1></iframe></a>.*
+.*<a href=/inscription/.*><iframe .* src=/preview/.*\\?thumb=1></iframe></a>.*
 .*<a href=/inscription/.*><iframe .* src=/preview/.*\\?thumb=1></iframe></a>.*
     <div class=center>
       <a href=/children/{parent_inscription_id}>all \\(5\\)</a>
@@ -7927,7 +8177,7 @@ next
       StatusCode::OK,
       format!(
         ".*<title>Inscription \\d+</title>.*
-.*<dt>gallery</dt>.*
+.*<dt class=with-toolbar>gallery.*
 .*<a href=/gallery/{gallery_id}/.*><iframe .* src=/preview/.*></iframe></a>.*
 .*<a href=/gallery/{gallery_id}/.*><iframe .* src=/preview/.*></iframe></a>.*
 .*<a href=/gallery/{gallery_id}/.*><iframe .* src=/preview/.*></iframe></a>.*
@@ -8146,7 +8396,7 @@ next
     server.assert_response_regex(
       format!("/inscription/{inscription_id}"),
       StatusCode::OK,
-      ".*<title>Inscription -1</title>.*<h1>Inscription -1</h1>.*<div class=thumbnails>(.*<a href=/inscription/.*><iframe .* src=/preview/.*></iframe></a>.*){4}.*",
+      ".*<title>Inscription -1</title>.*<h1>.*</h1>.*<div class=thumbnails>(.*<a href=/inscription/.*><iframe .* src=/preview/.*></iframe></a>.*){4}.*",
     );
   }
 
@@ -8173,7 +8423,7 @@ next
       format!("/inscription/{inscription_id}"),
       StatusCode::OK,
       format!(
-        ".*<h1>Inscription 0</h1>.*
+        ".*<h1>.*</h1>.*
 <dl>
   <dt>id</dt>
   <dd class=collapse>{inscription_id}</dd>.*"
@@ -8183,7 +8433,7 @@ next
       "/inscription/0",
       StatusCode::OK,
       format!(
-        ".*<h1>Inscription 0</h1>.*
+        ".*<h1>.*</h1>.*
 <dl>
   <dt>id</dt>
   <dd class=collapse>{inscription_id}</dd>.*"
@@ -8194,7 +8444,7 @@ next
       "/inscription/-1",
       StatusCode::OK,
       format!(
-        ".*<h1>Inscription -1</h1>.*
+        ".*<h1>.*</h1>.*
 <dl>
   <dt>id</dt>
   <dd class=collapse>{cursed_inscription_id}</dd>.*"
@@ -8225,7 +8475,7 @@ next
       format!("/inscription/{id}"),
       StatusCode::OK,
       format!(
-        ".*<h1>Inscription -1</h1>.*
+        ".*<h1>.*</h1>.*
 <dl>
   <dt>id</dt>
   <dd class=collapse>{id}</dd>
@@ -8264,7 +8514,7 @@ next
       format!("/inscription/{id}"),
       StatusCode::OK,
       format!(
-        ".*<h1>Inscription 0</h1>.*
+        ".*<h1>.*</h1>.*
 <dl>
   <dt>id</dt>
   <dd class=collapse>{id}</dd>
@@ -8300,7 +8550,7 @@ next
       format!("/inscription/{id}"),
       StatusCode::OK,
       format!(
-        ".*<h1>Inscription 0</h1>.*
+        ".*<h1>.*</h1>.*
 <dl>
   <dt>id</dt>
   <dd class=collapse>{id}</dd>
@@ -8336,7 +8586,7 @@ next
       format!("/inscription/{id}"),
       StatusCode::OK,
       format!(
-        ".*<h1>Inscription 0</h1>.*
+        ".*<h1>.*</h1>.*
 <dl>
   <dt>id</dt>
   <dd class=collapse>{id}</dd>
@@ -8372,7 +8622,7 @@ next
       format!("/inscription/{id}"),
       StatusCode::OK,
       format!(
-        ".*<h1>Inscription 0</h1>.*
+        ".*<h1>.*</h1>.*
 <dl>
   <dt>id</dt>
   <dd class=collapse>{id}</dd>
@@ -8412,7 +8662,7 @@ next
       format!("/inscription/{id}"),
       StatusCode::OK,
       format!(
-        ".*<h1>Inscription -1</h1>.*
+        ".*<h1>.*</h1>.*
 <dl>
   <dt>id</dt>
   <dd class=collapse>{id}</dd>
@@ -8476,7 +8726,7 @@ next
       format!("/inscription/{id}"),
       StatusCode::OK,
       format!(
-        ".*<h1>Inscription 0</h1>.*
+        ".*<h1>.*</h1>.*
 <dl>
   <dt>id</dt>
   <dd class=collapse>{id}</dd>
@@ -8537,7 +8787,7 @@ next
       format!("/inscription/{id}"),
       StatusCode::OK,
       format!(
-        ".*<h1>Inscription 0</h1>.*
+        ".*<h1>.*</h1>.*
 <dl>
   <dt>id</dt>
   <dd class=collapse>{id}</dd>
@@ -8587,7 +8837,7 @@ next
       format!("/inscription/{id}"),
       StatusCode::OK,
       format!(
-        ".*<h1>Inscription -1</h1>.*
+        ".*<h1>.*</h1>.*
 <dl>
   <dt>id</dt>
   <dd class=collapse>{id}</dd>
@@ -8623,7 +8873,7 @@ next
       format!("/inscription/{id}"),
       StatusCode::OK,
       format!(
-        ".*<h1>Inscription 0</h1>.*
+        ".*<h1>.*</h1>.*
 <dl>
   <dt>id</dt>
   <dd class=collapse>{id}</dd>
@@ -8649,7 +8899,7 @@ next
       format!("/inscription/{id}"),
       StatusCode::OK,
       format!(
-        ".*<h1>Inscription 0</h1>.*
+        ".*<h1>.*</h1>.*
 <dl>
   <dt>id</dt>
   <dd class=collapse>{id}</dd>
@@ -9468,7 +9718,7 @@ next
       format!("/inscription/{id}"),
       StatusCode::OK,
       format!(
-        ".*<h1>Inscription 1</h1>.*
+        ".*<h1>.*</h1>.*
         <dl>
           <dt>id</dt>
           <dd class=collapse>{id}</dd>
diff --git a/src/templates.rs b/src/templates.rs
index 0c935f949b..d8f7770f0e 100644
--- a/src/templates.rs
+++ b/src/templates.rs
@@ -8,13 +8,14 @@ pub(crate) use {
   children::ChildrenHtml,
   clock::ClockSvg,
   collections::CollectionsHtml,
+  coming_soon::ComingSoonHtml,
   embed::{EmbedAudioHtml, EmbedImageHtml, EmbedUnknownHtml, EmbedVideoHtml},
   galleries::GalleriesHtml,
   gallery::GalleryHtml,
   home::HomeHtml,
   iframe::Iframe,
   input::InputHtml,
-  inscriptions::InscriptionsHtml,
+  inscriptions::{InscriptionsHtml, Sort as InscriptionsSort},
   inscriptions_block::InscriptionsBlockHtml,
   metadata::MetadataHtml,
   output::OutputHtml,
@@ -30,8 +31,13 @@ pub(crate) use {
 };
 
 pub use {
-  blocks::BlocksHtml, inscription::InscriptionHtml, item::ItemHtml, rune::RuneHtml,
-  runes::RunesHtml, status::StatusHtml, transaction::TransactionHtml,
+  blocks::BlocksHtml,
+  inscription::{text_title, Crumb, InscriptionHtml, SatInscription},
+  item::ItemHtml,
+  rune::RuneHtml,
+  runes::RunesHtml,
+  status::StatusHtml,
+  transaction::TransactionHtml,
 };
 
 pub mod address;
@@ -41,6 +47,7 @@ pub mod blocks;
 mod children;
 mod clock;
 pub mod collections;
+mod coming_soon;
 mod embed;
 mod galleries;
 mod gallery;
@@ -79,11 +86,7 @@ where
   }
 
   fn og_image(&self) -> String {
-    if let Some(domain) = &self.config.domain {
-      format!("https://{domain}/static/favicon.png")
-    } else {
-      "https://ordinals.com/static/favicon.png".into()
-    }
+    format!("{}/static/favicon.png", self.page_origin())
   }
 
   fn page_origin(&self) -> String {
@@ -107,9 +110,17 @@ where
     )
   }
 
+  fn home_text(&self) -> &'static str {
+    if self.config.chain == Chain::Mainnet {
+      "Ordinals"
+    } else {
+      "Ordinals.Gallery"
+    }
+  }
+
   fn superscript(&self) -> String {
     if self.config.chain == Chain::Mainnet {
-      "beta".into()
+      "Gallery".into()
     } else {
       self.config.chain.to_string()
     }
@@ -173,15 +184,17 @@ mod tests {
 \s*
     <link rel=icon href=/static/favicon.png>
     <link rel=icon href=/static/favicon.svg>
+    <script src=/static/theme-init.js></script>
     <link rel=stylesheet href=/static/index.css>
     <link rel=stylesheet href=/static/modern-normalize.css>
+    <script src=/static/marketplaces.js></script>
     <script src=/static/index.js></script>
     <script src=/static/inscription-embed.js defer></script>
   </head>
   <body>
   <header>
     <nav>
-      <a href=/ title=home>Ordinals<sup>beta</sup></a>
+      <a href=/ title=home>Ordinals<sup>Gallery</sup></a>
       .*
       <a href=/clock title=clock>.*</a>
       <a href=/rare.txt title=rare>.*</a>
@@ -211,7 +224,7 @@ mod tests {
         index_sats: true,
         ..default()
       })),
-      r".*<nav>\s*<a href=/ title=home>Ordinals<sup>beta</sup></a>.*"
+      r".*<nav>\s*<a href=/ title=home>Ordinals<sup>Gallery</sup></a>.*"
     );
   }
 
@@ -225,7 +238,7 @@ mod tests {
         index_sats: false,
         ..default()
       })),
-      r".*<nav>\s*<a href=/ title=home>Ordinals<sup>beta</sup></a>.*<a href=/clock title=clock>.*</a>\s*<form action=/search.*",
+      r".*<nav>\s*<a href=/ title=home>Ordinals<sup>Gallery</sup></a>.*<a href=/clock title=clock>.*</a>.*<form action=/search.*",
     );
   }
 
@@ -239,7 +252,33 @@ mod tests {
         index_sats: true,
         ..default()
       })),
-      r".*<nav>\s*<a href=/ title=home>Ordinals<sup>signet</sup></a>.*"
+      r".*<nav>\s*<a href=/ title=home>Ordinals\.Gallery<sup>signet</sup></a>.*"
+    );
+  }
+
+  #[test]
+  fn og_image_prefers_csp_origin_over_domain() {
+    assert_regex_match!(
+      Foo.page(Arc::new(ServerConfig {
+        chain: Chain::Mainnet,
+        csp_origin: Some("https://ordinals.gallery".into()),
+        domain: Some("some-laptop.local".into()),
+        ..default()
+      })),
+      r".*<meta property=og:image content='https://ordinals\.gallery/static/favicon\.png'>.*"
+    );
+  }
+
+  #[test]
+  fn og_image_falls_back_to_ordinals_com() {
+    assert_regex_match!(
+      Foo.page(Arc::new(ServerConfig {
+        chain: Chain::Mainnet,
+        csp_origin: None,
+        domain: None,
+        ..default()
+      })),
+      r".*<meta property=og:image content='https://ordinals\.com/static/favicon\.png'>.*"
     );
   }
 }
diff --git a/src/templates/address.rs b/src/templates/address.rs
index 1425ce5028..c33e8450a2 100644
--- a/src/templates/address.rs
+++ b/src/templates/address.rs
@@ -4,7 +4,7 @@ use super::*;
 pub(crate) struct AddressHtml {
   pub(crate) address: Address,
   pub(crate) header: bool,
-  pub(crate) inscriptions: Option<Vec<InscriptionId>>,
+  pub(crate) inscriptions: Option<Vec<(InscriptionId, Option<Media>)>>,
   pub(crate) outputs: Vec<OutPoint>,
   pub(crate) runes_balances: Option<Vec<(SpacedRune, Decimal, Option<char>)>>,
   pub(crate) sat_balance: u64,
@@ -28,7 +28,7 @@ mod tests {
         .unwrap(),
       header: true,
       outputs: vec![outpoint(1), outpoint(2)],
-      inscriptions: Some(vec![inscription_id(1)]),
+      inscriptions: Some(vec![(inscription_id(1), None)]),
       sat_balance: 99,
       runes_balances: Some(vec![
         (
diff --git a/src/templates/block.rs b/src/templates/block.rs
index 4bc2425631..648a452a05 100644
--- a/src/templates/block.rs
+++ b/src/templates/block.rs
@@ -4,7 +4,7 @@ use super::*;
 pub(crate) struct BlockHtml {
   best_height: Height,
   block: Block,
-  featured_inscriptions: Vec<InscriptionId>,
+  featured_inscriptions: Vec<(InscriptionId, Option<Media>)>,
   hash: BlockHash,
   height: Height,
   inscription_count: usize,
@@ -18,7 +18,7 @@ impl BlockHtml {
     height: Height,
     best_height: Height,
     inscription_count: usize,
-    featured_inscriptions: Vec<InscriptionId>,
+    featured_inscriptions: Vec<(InscriptionId, Option<Media>)>,
     runes: Vec<SpacedRune>,
   ) -> Self {
     Self {
diff --git a/src/templates/blocks.rs b/src/templates/blocks.rs
index 26c764e759..d639609919 100644
--- a/src/templates/blocks.rs
+++ b/src/templates/blocks.rs
@@ -5,6 +5,8 @@ pub struct BlocksHtml {
   pub last: u32,
   pub blocks: Vec<BlockHash>,
   pub featured_blocks: BTreeMap<BlockHash, Vec<InscriptionId>>,
+  #[serde(skip)]
+  pub featured_medias: BTreeMap<BlockHash, Vec<Option<Media>>>,
 }
 
 impl BlocksHtml {
@@ -20,6 +22,7 @@ impl BlocksHtml {
         .unwrap_or(0),
       blocks: blocks.into_iter().map(|(_, hash)| hash).collect(),
       featured_blocks,
+      featured_medias: BTreeMap::new(),
     }
   }
 }
diff --git a/src/templates/children.rs b/src/templates/children.rs
index 1ee68aebe7..8bbe5f415e 100644
--- a/src/templates/children.rs
+++ b/src/templates/children.rs
@@ -4,7 +4,7 @@ use super::*;
 pub(crate) struct ChildrenHtml {
   pub(crate) parent: InscriptionId,
   pub(crate) parent_number: i32,
-  pub(crate) children: Vec<InscriptionId>,
+  pub(crate) children: Vec<(InscriptionId, Option<Media>)>,
   pub(crate) prev_page: Option<usize>,
   pub(crate) next_page: Option<usize>,
 }
@@ -25,7 +25,7 @@ mod tests {
       ChildrenHtml {
         parent: inscription_id(1),
         parent_number: 0,
-        children: vec![inscription_id(2), inscription_id(3)],
+        children: vec![(inscription_id(2), None), (inscription_id(3), None)],
         prev_page: None,
         next_page: None,
       },
@@ -50,7 +50,7 @@ mod tests {
       ChildrenHtml {
         parent: inscription_id(1),
         parent_number: 0,
-        children: vec![inscription_id(2), inscription_id(3)],
+        children: vec![(inscription_id(2), None), (inscription_id(3), None)],
         next_page: Some(3),
         prev_page: Some(1),
       },
diff --git a/src/templates/collections.rs b/src/templates/collections.rs
index 481daeb493..47f813b2c5 100644
--- a/src/templates/collections.rs
+++ b/src/templates/collections.rs
@@ -2,7 +2,7 @@ use super::*;
 
 #[derive(Boilerplate)]
 pub(crate) struct CollectionsHtml {
-  pub(crate) inscriptions: Vec<InscriptionId>,
+  pub(crate) inscriptions: Vec<(InscriptionId, Option<Media>)>,
   pub(crate) prev: Option<usize>,
   pub(crate) next: Option<usize>,
 }
@@ -21,7 +21,7 @@ mod tests {
   fn without_prev_and_next() {
     assert_regex_match!(
       CollectionsHtml {
-        inscriptions: vec![inscription_id(1), inscription_id(2)],
+        inscriptions: vec![(inscription_id(1), None), (inscription_id(2), None)],
         prev: None,
         next: None,
       },
@@ -44,7 +44,7 @@ mod tests {
   fn with_prev_and_next() {
     assert_regex_match!(
       CollectionsHtml {
-        inscriptions: vec![inscription_id(1), inscription_id(2)],
+        inscriptions: vec![(inscription_id(1), None), (inscription_id(2), None)],
         prev: Some(1),
         next: Some(2),
       },
diff --git a/src/templates/coming_soon.rs b/src/templates/coming_soon.rs
new file mode 100644
index 0000000000..8fa1d3c1de
--- /dev/null
+++ b/src/templates/coming_soon.rs
@@ -0,0 +1,20 @@
+use super::*;
+
+#[derive(Boilerplate)]
+pub(crate) struct ComingSoonHtml {}
+
+impl PageContent for ComingSoonHtml {
+  fn title(&self) -> String {
+    "Coming Soon".into()
+  }
+}
+
+#[cfg(test)]
+mod tests {
+  use super::*;
+
+  #[test]
+  fn coming_soon() {
+    assert_regex_match!(ComingSoonHtml {}, "<h1>Coming Soon\\.</h1>\n",);
+  }
+}
diff --git a/src/templates/galleries.rs b/src/templates/galleries.rs
index dff71978cf..bb97769249 100644
--- a/src/templates/galleries.rs
+++ b/src/templates/galleries.rs
@@ -2,7 +2,7 @@ use super::*;
 
 #[derive(Boilerplate)]
 pub(crate) struct GalleriesHtml {
-  pub(crate) inscriptions: Vec<InscriptionId>,
+  pub(crate) inscriptions: Vec<(InscriptionId, Option<Media>)>,
   pub(crate) prev: Option<u32>,
   pub(crate) next: Option<u32>,
 }
@@ -21,7 +21,7 @@ mod tests {
   fn without_prev_and_next() {
     assert_regex_match!(
       GalleriesHtml {
-        inscriptions: vec![inscription_id(1), inscription_id(2)],
+        inscriptions: vec![(inscription_id(1), None), (inscription_id(2), None)],
         prev: None,
         next: None,
       },
@@ -44,7 +44,7 @@ mod tests {
   fn with_prev_and_next() {
     assert_regex_match!(
       GalleriesHtml {
-        inscriptions: vec![inscription_id(1), inscription_id(2)],
+        inscriptions: vec![(inscription_id(1), None), (inscription_id(2), None)],
         prev: Some(1),
         next: Some(2),
       },
diff --git a/src/templates/gallery.rs b/src/templates/gallery.rs
index 8aa7b47ebb..a7cfe42697 100644
--- a/src/templates/gallery.rs
+++ b/src/templates/gallery.rs
@@ -4,14 +4,18 @@ use super::*;
 pub(crate) struct GalleryHtml {
   pub(crate) id: InscriptionId,
   pub(crate) number: i32,
-  pub(crate) items: Vec<(usize, InscriptionId)>,
+  pub(crate) title: Option<String>,
+  pub(crate) items: Vec<(usize, InscriptionId, Option<Media>)>,
   pub(crate) prev_page: Option<usize>,
   pub(crate) next_page: Option<usize>,
 }
 
 impl PageContent for GalleryHtml {
   fn title(&self) -> String {
-    format!("Inscription {} Gallery", self.number)
+    match &self.title {
+      Some(title) => format!("{title} Gallery"),
+      None => format!("Inscription {} Gallery", self.number),
+    }
   }
 }
 
@@ -25,12 +29,13 @@ mod tests {
       GalleryHtml {
         id: inscription_id(1),
         number: 0,
-        items: vec![(0, inscription_id(2)), (1, inscription_id(3))],
+        title: None,
+        items: vec![(0, inscription_id(2), None), (1, inscription_id(3), None)],
         prev_page: None,
         next_page: None,
       },
       "
-        <h1><a href=/inscription/1{64}i1>Inscription 0</a> Gallery</h1>
+        <h1><a href=/inscription/1{64}i1>Inscription 0</a> / Gallery</h1>
         <div class=thumbnails>
           <a href=/gallery/1{64}i1/0><iframe .* src=/preview/2{64}i2\\?thumb=1></iframe></a>
           <a href=/gallery/1{64}i1/1><iframe .* src=/preview/3{64}i3\\?thumb=1></iframe></a>
@@ -50,12 +55,13 @@ mod tests {
       GalleryHtml {
         id: inscription_id(1),
         number: 0,
-        items: vec![(0, inscription_id(2)), (1, inscription_id(3))],
+        title: None,
+        items: vec![(0, inscription_id(2), None), (1, inscription_id(3), None)],
         next_page: Some(3),
         prev_page: Some(1),
       },
       "
-        <h1><a href=/inscription/1{64}i1>Inscription 0</a> Gallery</h1>
+        <h1><a href=/inscription/1{64}i1>Inscription 0</a> / Gallery</h1>
         <div class=thumbnails>
           <a href=/gallery/1{64}i1/0><iframe .* src=/preview/2{64}i2\\?thumb=1></iframe></a>
           <a href=/gallery/1{64}i1/1><iframe .* src=/preview/3{64}i3\\?thumb=1></iframe></a>
@@ -68,4 +74,23 @@ mod tests {
       .unindent()
     );
   }
+
+  #[test]
+  fn with_title() {
+    assert_regex_match!(
+      GalleryHtml {
+        id: inscription_id(1),
+        number: 0,
+        title: Some("Bitcoin Shrooms".into()),
+        items: vec![(0, inscription_id(2), None)],
+        prev_page: None,
+        next_page: None,
+      },
+      "
+        <h1><a href=/inscription/1{64}i1>Bitcoin Shrooms</a> / Gallery</h1>
+        .*
+      "
+      .unindent()
+    );
+  }
 }
diff --git a/src/templates/home.rs b/src/templates/home.rs
index 8ce7eeb6ea..1340c8a039 100644
--- a/src/templates/home.rs
+++ b/src/templates/home.rs
@@ -2,7 +2,7 @@ use super::*;
 
 #[derive(Boilerplate)]
 pub(crate) struct HomeHtml {
-  pub(crate) inscriptions: Vec<InscriptionId>,
+  pub(crate) inscriptions: Vec<(InscriptionId, Option<Media>)>,
 }
 
 impl PageContent for HomeHtml {
@@ -19,7 +19,7 @@ mod tests {
   fn html() {
     assert_regex_match!(
       HomeHtml {
-        inscriptions: vec![inscription_id(1), inscription_id(2)],
+        inscriptions: vec![(inscription_id(1), None), (inscription_id(2), None)],
       }
       .to_string()
       .unindent(),
diff --git a/src/templates/iframe.rs b/src/templates/iframe.rs
index 42fe68c8e1..50cb626298 100644
--- a/src/templates/iframe.rs
+++ b/src/templates/iframe.rs
@@ -3,6 +3,7 @@ use super::*;
 pub(crate) struct Iframe {
   inscription_id: InscriptionId,
   kind: IframeKind,
+  media: Option<Media>,
 }
 
 enum IframeKind {
@@ -12,10 +13,16 @@ enum IframeKind {
 }
 
 impl Iframe {
-  pub(crate) fn item(inscription_id: InscriptionId, i: usize, id: InscriptionId) -> Trusted<Self> {
+  pub(crate) fn item(
+    inscription_id: InscriptionId,
+    i: usize,
+    id: InscriptionId,
+    media: Option<Media>,
+  ) -> Trusted<Self> {
     Trusted(Self {
       inscription_id,
       kind: IframeKind::Item { i, id },
+      media,
     })
   }
 
@@ -23,29 +30,54 @@ impl Iframe {
     Trusted(Self {
       inscription_id,
       kind: IframeKind::Main,
+      media: None,
     })
   }
 
-  pub(crate) fn thumbnail(inscription_id: InscriptionId) -> Trusted<Self> {
+  pub(crate) fn thumbnail(inscription_id: InscriptionId, media: Option<Media>) -> Trusted<Self> {
     Trusted(Self {
       inscription_id,
       kind: IframeKind::Thumbnail,
+      media,
     })
   }
+
+  // Images render as plain <img> tags pointing straight at /content: the
+  // browser caches and persists them across scrolling, unlike lazy iframes
+  // which are discarded offscreen and reload on re-entry. Arbitrary HTML
+  // inscriptions ship script-less: thumbnails are inert (pointer-events:
+  // none) yet a grid of live apps accumulates enough CPU that iOS kills the
+  // renderer. Recursive art is script-driven and renders blank while inert,
+  // so `data-scriptable` marks these for index.js, which grants
+  // sandbox=allow-scripts to a capped number of on-screen thumbnails and
+  // revokes it as they scroll away. The inert form is the no-JS floor: SVG
+  // still paints without scripts. Our own preview wrappers (text, code,
+  // markdown, …) need their scripts to render and stay trusted.
+  fn thumbnail_body(&self, content_id: InscriptionId, f: &mut Formatter) -> fmt::Result {
+    match self.media {
+      Some(Media::Image(rendering)) => write!(
+        f,
+        "<img loading=lazy decoding=async class=rendering-{rendering} src=/content/{content_id}>",
+      ),
+      Some(Media::Iframe) => write!(
+        f,
+        "<iframe data-scriptable sandbox scrolling=no loading=lazy src=/preview/{content_id}?thumb=1></iframe>",
+      ),
+      _ => write!(
+        f,
+        "<iframe sandbox=allow-scripts scrolling=no loading=lazy src=/preview/{content_id}?thumb=1></iframe>",
+      ),
+    }
+  }
 }
 
 impl Display for Iframe {
   fn fmt(&self, f: &mut Formatter) -> fmt::Result {
     match self.kind {
       IframeKind::Item { i, id } => {
-        write!(
-          f,
-          "<a href=/gallery/{}/{i}>\
-            <iframe sandbox=allow-scripts scrolling=no loading=lazy src=/preview/{id}?thumb=1>\
-            </iframe>\
-          </a>",
-          self.inscription_id,
-        )
+        write!(f, "<a href=/gallery/{}/{i}>", self.inscription_id)?;
+        self.thumbnail_body(id, f)?;
+        write!(f, "</a>")
       }
       IframeKind::Main => {
         write!(
@@ -55,14 +87,9 @@ impl Display for Iframe {
         )
       }
       IframeKind::Thumbnail => {
-        write!(
-          f,
-          "<a href=/inscription/{}>\
-            <iframe sandbox=allow-scripts scrolling=no loading=lazy src=/preview/{}?thumb=1>\
-            </iframe>\
-          </a>",
-          self.inscription_id, self.inscription_id,
-        )
+        write!(f, "<a href=/inscription/{}>", self.inscription_id)?;
+        self.thumbnail_body(self.inscription_id, f)?;
+        write!(f, "</a>")
       }
     }
   }
@@ -75,7 +102,7 @@ mod tests {
   #[test]
   fn gallery_item() {
     assert_regex_match!(
-      Iframe::item(inscription_id(1), 2, inscription_id(3))
+      Iframe::item(inscription_id(1), 2, inscription_id(3), None)
         .0
         .to_string(),
       "<a href=/gallery/1{64}i1/2><iframe sandbox=allow-scripts scrolling=no loading=lazy src=/preview/3{64}i3\\?thumb=1></iframe></a>",
@@ -93,8 +120,46 @@ mod tests {
   #[test]
   fn thumbnail() {
     assert_regex_match!(
-      Iframe::thumbnail(inscription_id(1)).0.to_string(),
+      Iframe::thumbnail(inscription_id(1), None).0.to_string(),
       "<a href=/inscription/1{64}i1><iframe sandbox=allow-scripts scrolling=no loading=lazy src=/preview/1{64}i1\\?thumb=1></iframe></a>",
     );
   }
+
+  #[test]
+  fn thumbnail_image_renders_img() {
+    assert_regex_match!(
+      Iframe::thumbnail(
+        inscription_id(1),
+        Some(Media::Image(media::ImageRendering::Pixelated))
+      )
+      .0
+      .to_string(),
+      "<a href=/inscription/1{64}i1><img loading=lazy decoding=async class=rendering-pixelated src=/content/1{64}i1></a>",
+    );
+  }
+
+  #[test]
+  fn thumbnail_html_renders_scriptless_iframe() {
+    assert_regex_match!(
+      Iframe::thumbnail(inscription_id(1), Some(Media::Iframe))
+        .0
+        .to_string(),
+      "<a href=/inscription/1{64}i1><iframe data-scriptable sandbox scrolling=no loading=lazy src=/preview/1{64}i1\\?thumb=1></iframe></a>",
+    );
+  }
+
+  #[test]
+  fn item_image_renders_img() {
+    assert_regex_match!(
+      Iframe::item(
+        inscription_id(1),
+        2,
+        inscription_id(3),
+        Some(Media::Image(media::ImageRendering::Auto))
+      )
+      .0
+      .to_string(),
+      "<a href=/gallery/1{64}i1/2><img loading=lazy decoding=async class=rendering-auto src=/content/3{64}i3></a>",
+    );
+  }
 }
diff --git a/src/templates/inscription.rs b/src/templates/inscription.rs
index 40f4161ae3..10bacf7f3a 100644
--- a/src/templates/inscription.rs
+++ b/src/templates/inscription.rs
@@ -1,19 +1,73 @@
 use {super::*, crate::inscriptions::opus_metadata};
 
+#[derive(Clone, Debug)]
+pub struct SatInscription {
+  pub id: InscriptionId,
+  pub label: String,
+}
+
+#[derive(Clone, Debug)]
+pub struct Crumb {
+  pub id: InscriptionId,
+  pub title: String,
+  pub reinscriptions: Vec<SatInscription>,
+  pub children: Vec<SatInscription>,
+  pub more_children: bool,
+}
+
+/// View helper: the breadcrumb trail set collapsed into a single-line
+/// inline form with a vertical fork only where the parent paths diverge.
+///
+/// * `prefix`  — crumbs shared by every trail at the start (may be empty).
+/// * `middles` — per-trail divergent middle (empty when only one trail
+///   exists; with multiple trails, one entry per trail in input order; an
+///   entry may itself be empty when a trail goes directly from the common
+///   prefix into the common suffix).
+/// * `suffix`  — crumbs shared by every trail at the end (always contains
+///   at least the current inscription's crumb when any trail is present).
+#[derive(Clone, Debug)]
+pub struct BreadcrumbLayout {
+  pub prefix: Vec<Crumb>,
+  pub middles: Vec<Vec<Crumb>>,
+  pub suffix: Vec<Crumb>,
+}
+
+pub fn text_title(inscription: &Inscription) -> Option<String> {
+  const MAX_LEN: usize = 64;
+
+  if inscription.content_encoding().is_some() {
+    return None;
+  }
+
+  if !inscription.content_type()?.starts_with("text/plain") {
+    return None;
+  }
+
+  let text = std::str::from_utf8(inscription.body()?).ok()?.trim();
+
+  if text.is_empty() || text.contains(['\n', '\r']) || text.chars().count() > MAX_LEN {
+    return None;
+  }
+
+  Some(text.to_string())
+}
+
 #[derive(Boilerplate, Default)]
 pub struct InscriptionHtml {
+  pub breadcrumbs: Vec<Vec<Crumb>>,
   pub chain: Chain,
   pub charms: u16,
   pub child_count: u64,
-  pub children: Vec<InscriptionId>,
+  pub children: Vec<(InscriptionId, Option<Media>)>,
   pub fee: u64,
+  pub gallery_media: Vec<Option<Media>>,
   pub height: u32,
   pub id: InscriptionId,
   pub inscription: Inscription,
   pub next: Option<InscriptionId>,
   pub number: i32,
   pub output: Option<TxOut>,
-  pub parents: Vec<InscriptionId>,
+  pub parents: Vec<(InscriptionId, Option<Media>)>,
   pub previous: Option<InscriptionId>,
   pub properties: Properties,
   pub rune: Option<SpacedRune>,
@@ -33,6 +87,89 @@ impl PageContent for InscriptionHtml {
 }
 
 impl InscriptionHtml {
+  /// Collapse `self.breadcrumbs` into a `BreadcrumbLayout`: longest common
+  /// prefix + per-trail divergent middle + longest common suffix. With a
+  /// single trail (or trails that dedupe to one) `middles` is empty and
+  /// the template renders a single line; with multiple distinct trails it
+  /// renders a vertical fork only across the divergent middle.
+  pub fn breadcrumb_layout(&self) -> BreadcrumbLayout {
+    // Two trails through equivalent ancestors shouldn't produce a fork of
+    // identical rows, so dedupe by the trail's id sequence first.
+    let mut trails: Vec<Vec<Crumb>> = Vec::new();
+    for trail in &self.breadcrumbs {
+      if !trails.iter().any(|existing| {
+        existing.len() == trail.len()
+          && existing.iter().zip(trail).all(|(a, b)| a.id == b.id)
+      }) {
+        trails.push(trail.clone());
+      }
+    }
+
+    if trails.is_empty() {
+      return BreadcrumbLayout {
+        prefix: Vec::new(),
+        middles: Vec::new(),
+        suffix: Vec::new(),
+      };
+    }
+
+    if trails.len() == 1 {
+      let mut single = trails.into_iter().next().unwrap();
+      let suffix = match single.pop() {
+        Some(current) => vec![current],
+        None => Vec::new(),
+      };
+      return BreadcrumbLayout {
+        prefix: single,
+        middles: Vec::new(),
+        suffix,
+      };
+    }
+
+    // Multi-trail: longest common prefix, capped so the current crumb is
+    // always reserved for the suffix.
+    let min_len = trails.iter().map(|t| t.len()).min().unwrap_or(0);
+    let max_prefix = min_len.saturating_sub(1);
+    let mut prefix_len = 0;
+    while prefix_len < max_prefix
+      && trails
+        .iter()
+        .all(|t| t[prefix_len].id == trails[0][prefix_len].id)
+    {
+      prefix_len += 1;
+    }
+
+    // Longest common suffix, walked from each trail's end, capped at the
+    // remaining length of the shortest trail so middles never go negative.
+    let max_suffix = trails
+      .iter()
+      .map(|t| t.len() - prefix_len)
+      .min()
+      .unwrap_or(0);
+    let mut suffix_len = 0;
+    while suffix_len < max_suffix
+      && trails.iter().all(|t| {
+        t[t.len() - 1 - suffix_len].id
+          == trails[0][trails[0].len() - 1 - suffix_len].id
+      })
+    {
+      suffix_len += 1;
+    }
+
+    let prefix = trails[0][..prefix_len].to_vec();
+    let suffix = trails[0][trails[0].len() - suffix_len..].to_vec();
+    let middles: Vec<Vec<Crumb>> = trails
+      .iter()
+      .map(|t| t[prefix_len..t.len() - suffix_len].to_vec())
+      .collect();
+
+    BreadcrumbLayout {
+      prefix,
+      middles,
+      suffix,
+    }
+  }
+
   fn metadata_sections_from_values(
     opus_metadata: Option<Value>,
     metadata: Option<Value>,
@@ -99,7 +236,11 @@ mod tests {
         ..default()
       },
       "
-        <h1>Inscription 1</h1>
+        <h1>HELLOWORLD</h1>
+        <div class=subtitle-row>
+          <p class=subtitle>Inscription 1</p>
+          <div class=title-links></div>
+        </div>
         <div class=inscription>
         <div>❮</div>
         <iframe .* src=/preview/1{64}i1></iframe>
@@ -143,6 +284,443 @@ mod tests {
     );
   }
 
+  #[test]
+  fn with_title() {
+    assert_regex_match!(
+      InscriptionHtml {
+        fee: 1,
+        inscription: inscription("text/plain;charset=utf-8", "HELLOWORLD"),
+        id: inscription_id(1),
+        number: 1,
+        properties: Properties {
+          attributes: Attributes {
+            title: Some("Bitcoin Shrooms".into()),
+            ..default()
+          },
+          ..default()
+        },
+        satpoint: satpoint(1, 0),
+        ..default()
+      },
+      "
+        <h1>Bitcoin Shrooms</h1>
+        <div class=subtitle-row>
+          <p class=subtitle>Inscription 1</p>
+          <div class=title-links></div>
+        </div>
+        .*
+      "
+      .unindent()
+    );
+  }
+
+  #[test]
+  fn bitmap_text_used_as_heading() {
+    assert_regex_match!(
+      InscriptionHtml {
+        fee: 1,
+        inscription: inscription("text/plain;charset=utf-8", "12345.bitmap"),
+        id: inscription_id(1),
+        number: 1,
+        satpoint: satpoint(1, 0),
+        ..default()
+      },
+      "
+        <h1>12345.bitmap</h1>
+        <div class=subtitle-row>
+          <p class=subtitle>Inscription 1</p>
+          <div class=title-links></div>
+        </div>
+        .*
+      "
+      .unindent()
+    );
+  }
+
+  #[test]
+  fn long_text_keeps_number_heading() {
+    assert_regex_match!(
+      InscriptionHtml {
+        fee: 1,
+        inscription: inscription(
+          "text/plain;charset=utf-8",
+          "this text is far too long to be used as an inscription heading so it is ignored",
+        ),
+        id: inscription_id(1),
+        number: 1,
+        satpoint: satpoint(1, 0),
+        ..default()
+      },
+      "
+        <h1>Inscription 1</h1>
+        .*
+      "
+      .unindent()
+    );
+  }
+
+  #[test]
+  fn with_breadcrumbs() {
+    assert_regex_match!(
+      InscriptionHtml {
+        breadcrumbs: vec![vec![
+          Crumb {
+            id: inscription_id(2),
+            title: "MoBA".into(),
+            reinscriptions: Vec::new(),
+            children: Vec::new(),
+            more_children: false,
+          },
+          Crumb {
+            id: inscription_id(1),
+            title: "Bitcoin Shrooms".into(),
+            reinscriptions: Vec::new(),
+            children: Vec::new(),
+            more_children: false,
+          },
+        ]],
+        fee: 1,
+        inscription: inscription("text/plain;charset=utf-8", "HELLOWORLD"),
+        id: inscription_id(1),
+        number: 1,
+        satpoint: satpoint(1, 0),
+        ..default()
+      },
+      "
+        .*
+        <div class=breadcrumbs>
+        .*
+        <a href=/inscription/2{64}i2>MoBA</a>
+        .*
+        <span class=current>Bitcoin Shrooms</span>
+        .*
+      "
+      .unindent()
+    );
+  }
+
+  #[test]
+  fn breadcrumb_reinscriptions_render_dropdown() {
+    assert_regex_match!(
+      InscriptionHtml {
+        breadcrumbs: vec![vec![
+          Crumb {
+            id: inscription_id(2),
+            title: "MoBA".into(),
+            reinscriptions: vec![
+              SatInscription {
+                id: inscription_id(2),
+                label: "#1".into(),
+              },
+              SatInscription {
+                id: inscription_id(3),
+                label: "12345.bitmap".into(),
+              },
+            ],
+            children: Vec::new(),
+            more_children: false,
+          },
+          Crumb {
+            id: inscription_id(1),
+            title: "Bitcoin Shrooms".into(),
+            reinscriptions: Vec::new(),
+            children: Vec::new(),
+            more_children: false,
+          },
+        ]],
+        fee: 1,
+        inscription: inscription("text/plain;charset=utf-8", "HELLOWORLD"),
+        id: inscription_id(1),
+        number: 1,
+        satpoint: satpoint(1, 0),
+        ..default()
+      },
+      "
+        .*
+        <a href=/inscription/2{64}i2>MoBA</a>
+        <button class=crumb-toggle type=button aria-label=reinscriptions>.*</button>
+        <span class=crumb-menu>
+        <a href=/inscription/2{64}i2>#1</a>
+        <a href=/inscription/3{64}i3>12345.bitmap</a>
+        </span>
+        .*
+      "
+      .unindent()
+    );
+  }
+
+  #[test]
+  fn breadcrumb_children_render_dropdown() {
+    assert_regex_match!(
+      InscriptionHtml {
+        breadcrumbs: vec![vec![
+          Crumb {
+            id: inscription_id(2),
+            title: "MoBA".into(),
+            reinscriptions: Vec::new(),
+            children: vec![
+              SatInscription {
+                id: inscription_id(4),
+                label: "Sound Gallery".into(),
+              },
+              SatInscription {
+                id: inscription_id(5),
+                label: "Image Gallery".into(),
+              },
+            ],
+            more_children: false,
+          },
+          Crumb {
+            id: inscription_id(1),
+            title: "Bitcoin Shrooms".into(),
+            reinscriptions: Vec::new(),
+            children: Vec::new(),
+            more_children: false,
+          },
+        ]],
+        fee: 1,
+        inscription: inscription("text/plain;charset=utf-8", "HELLOWORLD"),
+        id: inscription_id(1),
+        number: 1,
+        satpoint: satpoint(1, 0),
+        ..default()
+      },
+      "
+        .*
+        <a href=/inscription/2{64}i2>MoBA</a>
+        <button class=crumb-toggle type=button aria-label=reinscriptions>.*</button>
+        <span class=crumb-menu>
+        <a href=/inscription/4{64}i4>Sound Gallery</a>
+        <a href=/inscription/5{64}i5>Image Gallery</a>
+        </span>
+        .*
+      "
+      .unindent()
+    );
+  }
+
+  #[test]
+  fn breadcrumb_fork_collapses_common_prefix_and_suffix() {
+    assert_regex_match!(
+      InscriptionHtml {
+        breadcrumbs: vec![
+          vec![
+            Crumb {
+              id: inscription_id(2),
+              title: "MoBA".into(),
+              reinscriptions: Vec::new(),
+              children: Vec::new(),
+              more_children: false,
+            },
+            Crumb {
+              id: inscription_id(3),
+              title: "Inscription Clubs".into(),
+              reinscriptions: Vec::new(),
+              children: Vec::new(),
+              more_children: false,
+            },
+            Crumb {
+              id: inscription_id(1),
+              title: "Ordinal Archaeology".into(),
+              reinscriptions: Vec::new(),
+              children: Vec::new(),
+              more_children: false,
+            },
+          ],
+          vec![
+            Crumb {
+              id: inscription_id(2),
+              title: "MoBA".into(),
+              reinscriptions: Vec::new(),
+              children: Vec::new(),
+              more_children: false,
+            },
+            Crumb {
+              id: inscription_id(4),
+              title: "Library".into(),
+              reinscriptions: Vec::new(),
+              children: Vec::new(),
+              more_children: false,
+            },
+            Crumb {
+              id: inscription_id(1),
+              title: "Ordinal Archaeology".into(),
+              reinscriptions: Vec::new(),
+              children: Vec::new(),
+              more_children: false,
+            },
+          ],
+        ],
+        fee: 1,
+        inscription: inscription("text/plain;charset=utf-8", "HELLOWORLD"),
+        id: inscription_id(1),
+        number: 1,
+        satpoint: satpoint(1, 0),
+        ..default()
+      },
+      "
+        .*
+        <a href=/inscription/2{64}i2>MoBA</a>
+        .*
+        <div class=breadcrumb-fork>
+        <div class=breadcrumb-fork-row>
+        .*<a href=/inscription/3{64}i3>Inscription Clubs</a>.*
+        </div>
+        <div class=breadcrumb-fork-row>
+        .*<a href=/inscription/4{64}i4>Library</a>.*
+        </div>
+        </div>
+        .*
+        <span class=current>Ordinal Archaeology</span>
+        .*
+      "
+      .unindent()
+    );
+  }
+
+  #[test]
+  fn breadcrumb_fork_blank_row_when_trail_has_no_divergent_middle() {
+    // Trail A: [X, Y, Z, current]. Trail B: [X, Z, current]. After
+    // collapsing the shared prefix [X] and the shared suffix [Z, current],
+    // A's middle is [Y] and B's middle is empty — render B's row blank.
+    assert_regex_match!(
+      InscriptionHtml {
+        breadcrumbs: vec![
+          vec![
+            Crumb {
+              id: inscription_id(2),
+              title: "X".into(),
+              reinscriptions: Vec::new(),
+              children: Vec::new(),
+              more_children: false,
+            },
+            Crumb {
+              id: inscription_id(3),
+              title: "Y".into(),
+              reinscriptions: Vec::new(),
+              children: Vec::new(),
+              more_children: false,
+            },
+            Crumb {
+              id: inscription_id(4),
+              title: "Z".into(),
+              reinscriptions: Vec::new(),
+              children: Vec::new(),
+              more_children: false,
+            },
+            Crumb {
+              id: inscription_id(1),
+              title: "Current".into(),
+              reinscriptions: Vec::new(),
+              children: Vec::new(),
+              more_children: false,
+            },
+          ],
+          vec![
+            Crumb {
+              id: inscription_id(2),
+              title: "X".into(),
+              reinscriptions: Vec::new(),
+              children: Vec::new(),
+              more_children: false,
+            },
+            Crumb {
+              id: inscription_id(4),
+              title: "Z".into(),
+              reinscriptions: Vec::new(),
+              children: Vec::new(),
+              more_children: false,
+            },
+            Crumb {
+              id: inscription_id(1),
+              title: "Current".into(),
+              reinscriptions: Vec::new(),
+              children: Vec::new(),
+              more_children: false,
+            },
+          ],
+        ],
+        fee: 1,
+        inscription: inscription("text/plain;charset=utf-8", "HELLOWORLD"),
+        id: inscription_id(1),
+        number: 1,
+        satpoint: satpoint(1, 0),
+        ..default()
+      },
+      "
+        .*
+        <a href=/inscription/2{64}i2>X</a>
+        .*
+        <div class=breadcrumb-fork>
+        <div class=breadcrumb-fork-row>
+        .*<a href=/inscription/3{64}i3>Y</a>.*
+        </div>
+        <div class=breadcrumb-fork-row>
+        </div>
+        </div>
+        .*
+        <a href=/inscription/4{64}i4>Z</a>
+        .*
+        <span class=current>Current</span>
+        .*
+      "
+      .unindent()
+    );
+  }
+
+  #[test]
+  fn breadcrumb_combines_reinscriptions_and_children_with_more() {
+    assert_regex_match!(
+      InscriptionHtml {
+        breadcrumbs: vec![vec![
+          Crumb {
+            id: inscription_id(2),
+            title: "MoBA".into(),
+            reinscriptions: vec![
+              SatInscription {
+                id: inscription_id(3),
+                label: "12345.bitmap".into(),
+              },
+            ],
+            children: vec![
+              SatInscription {
+                id: inscription_id(4),
+                label: "Sound Gallery".into(),
+              },
+            ],
+            more_children: true,
+          },
+          Crumb {
+            id: inscription_id(1),
+            title: "Bitcoin Shrooms".into(),
+            reinscriptions: Vec::new(),
+            children: Vec::new(),
+            more_children: false,
+          },
+        ]],
+        fee: 1,
+        inscription: inscription("text/plain;charset=utf-8", "HELLOWORLD"),
+        id: inscription_id(1),
+        number: 1,
+        satpoint: satpoint(1, 0),
+        ..default()
+      },
+      "
+        .*
+        <a href=/inscription/2{64}i2>MoBA</a>
+        <button class=crumb-toggle type=button aria-label=reinscriptions>.*</button>
+        <span class=crumb-menu>
+        <a href=/inscription/3{64}i3>12345.bitmap</a>
+        <div class=crumb-menu-divider></div>
+        <a href=/inscription/4{64}i4>Sound Gallery</a>
+        <a href=/children/2{64}i2>all children</a>
+        </span>
+        .*
+      "
+      .unindent()
+    );
+  }
+
   #[test]
   fn with_output() {
     assert_regex_match!(
@@ -156,7 +734,11 @@ mod tests {
         ..default()
       },
       "
-        .*<h1>Inscription 1</h1>
+        .*<h1>HELLOWORLD</h1>
+        <div class=subtitle-row>
+          <p class=subtitle>Inscription 1</p>
+          <div class=title-links></div>
+        </div>
         <div class=inscription>
         <div>❮</div>
         <iframe .* src=/preview/1{64}i1></iframe>
@@ -189,7 +771,7 @@ mod tests {
         ..default()
       },
       "
-        <h1>Inscription 1</h1>
+        <h1>HELLOWORLD</h1>
         .*
         <dl>
           .*
@@ -221,7 +803,11 @@ mod tests {
         ..default()
       },
       "
-        <h1>Inscription 1</h1>
+        <h1>HELLOWORLD</h1>
+        <div class=subtitle-row>
+          <p class=subtitle>Inscription 1</p>
+          <div class=title-links></div>
+        </div>
         <div class=inscription>
         <a class=prev href=/inscription/1{64}i1>❮</a>
         <iframe .* src=/preview/2{64}i2></iframe>
@@ -250,7 +836,7 @@ mod tests {
         ..default()
       },
       "
-        <h1>Inscription -1</h1>
+        <h1>HELLOWORLD</h1>
         .*
         <dl>
           .*
@@ -269,7 +855,7 @@ mod tests {
   fn with_parent() {
     assert_regex_match!(
       InscriptionHtml {
-        parents: vec![inscription_id(2)],
+        parents: vec![(inscription_id(2), None)],
         fee: 1,
         inscription: inscription("text/plain;charset=utf-8", "HELLOWORLD"),
         id: inscription_id(1),
@@ -278,7 +864,11 @@ mod tests {
         ..default()
       },
       "
-        <h1>Inscription 1</h1>
+        <h1>HELLOWORLD</h1>
+        <div class=subtitle-row>
+          <p class=subtitle>Inscription 1</p>
+          <div class=title-links></div>
+        </div>
         <div class=inscription>
         <div>❮</div>
         <iframe .* src=/preview/1{64}i1></iframe>
@@ -336,7 +926,7 @@ mod tests {
     assert_regex_match!(
       InscriptionHtml {
         child_count: 2,
-        children: vec![inscription_id(2), inscription_id(3)],
+        children: vec![(inscription_id(2), None), (inscription_id(3), None)],
         fee: 1,
         inscription: inscription("text/plain;charset=utf-8", "HELLOWORLD"),
         id: inscription_id(1),
@@ -345,18 +935,31 @@ mod tests {
         ..default()
       },
       "
-        <h1>Inscription 1</h1>
+        <h1>HELLOWORLD</h1>
+        <div class=subtitle-row>
+          <p class=subtitle>Inscription 1</p>
+          <div class=title-links></div>
+        </div>
         <div class=inscription>
         <div>❮</div>
         <iframe .* src=/preview/1{64}i1></iframe>
         <div>❯</div>
         </div>
         <dl>
-          <dt>children</dt>
+          <dt class=with-toolbar>children
+            <div class=gallery-toolbar>
+              <button class=\"gallery-view-btn active\" type=button data-mode=scroll aria-label=\"strip view\"><img class=icon src=/static/view-strip.svg></button>
+              <button class=gallery-view-btn type=button data-mode=all aria-label=\"grid view\"><img class=icon src=/static/view-grid.svg></button>
+            </div>
+          </dt>
           <dd>
-            <div class=thumbnails>
-              <a href=/inscription/2{64}i2><iframe .* src=/preview/2{64}i2\\?thumb=1></iframe></a>
-              <a href=/inscription/3{64}i3><iframe .* src=/preview/3{64}i3\\?thumb=1></iframe></a>
+            <div class=\"gallery-row gallery-mode-scroll\" data-gallery-total=\"2\" data-load-more-url=\"/r/children/1{64}i1\">
+              <button class=gallery-prev type=button aria-label=\"previous\">❮</button>
+              <div class=thumbnails>
+                <a href=/inscription/2{64}i2><iframe .* src=/preview/2{64}i2\\?thumb=1></iframe></a>
+                <a href=/inscription/3{64}i3><iframe .* src=/preview/3{64}i3\\?thumb=1></iframe></a>
+              </div>
+              <button class=gallery-next type=button aria-label=\"next\">❯</button>
             </div>
             <div class=center>
               <a href=/children/1{64}i1>all \\(2\\)</a>
@@ -404,7 +1007,7 @@ mod tests {
     assert_regex_match!(
       InscriptionHtml {
         child_count: 1,
-        children: vec![inscription_id(2)],
+        children: vec![(inscription_id(2), None)],
         fee: 1,
         inscription: inscription("text/plain;charset=utf-8", "HELLOWORLD"),
         id: inscription_id(1),
@@ -413,17 +1016,30 @@ mod tests {
         ..default()
       },
       "
-        <h1>Inscription 1</h1>
+        <h1>HELLOWORLD</h1>
+        <div class=subtitle-row>
+          <p class=subtitle>Inscription 1</p>
+          <div class=title-links></div>
+        </div>
         <div class=inscription>
         <div>❮</div>
         <iframe .* src=/preview/1{64}i1></iframe>
         <div>❯</div>
         </div>
         <dl>
-          <dt>children</dt>
+          <dt class=with-toolbar>children
+            <div class=gallery-toolbar>
+              <button class=\"gallery-view-btn active\" type=button data-mode=scroll aria-label=\"strip view\"><img class=icon src=/static/view-strip.svg></button>
+              <button class=gallery-view-btn type=button data-mode=all aria-label=\"grid view\"><img class=icon src=/static/view-grid.svg></button>
+            </div>
+          </dt>
           <dd>
-            <div class=thumbnails>
-              <a href=/inscription/2{64}i2><iframe .* src=/preview/2{64}i2\\?thumb=1></iframe></a>
+            <div class=\"gallery-row gallery-mode-scroll\" data-gallery-total=\"1\" data-load-more-url=\"/r/children/1{64}i1\">
+              <button class=gallery-prev type=button aria-label=\"previous\">❮</button>
+              <div class=thumbnails>
+                <a href=/inscription/2{64}i2><iframe .* src=/preview/2{64}i2\\?thumb=1></iframe></a>
+              </div>
+              <button class=gallery-next type=button aria-label=\"next\">❯</button>
             </div>
             <div class=center>
               <a href=/children/1{64}i1>all \\(1\\)</a>
@@ -482,7 +1098,7 @@ mod tests {
         ..default()
       },
       "
-        <h1>Inscription 1</h1>
+        <h1>HELLOWORLD</h1>
         .*
         <dl>
           <dt>rune</dt>
diff --git a/src/templates/inscriptions.rs b/src/templates/inscriptions.rs
index fe7c6cc542..de45fc9bfa 100644
--- a/src/templates/inscriptions.rs
+++ b/src/templates/inscriptions.rs
@@ -1,10 +1,48 @@
 use super::*;
 
+#[derive(Clone, Copy, Debug, Deserialize, Default, PartialEq, Serialize)]
+#[serde(rename_all = "lowercase")]
+pub enum Sort {
+  #[default]
+  Newest,
+  Oldest,
+}
+
+impl std::fmt::Display for Sort {
+  fn fmt(&self, f: &mut std::fmt::Formatter) -> std::fmt::Result {
+    f.write_str(match self {
+      Sort::Newest => "newest",
+      Sort::Oldest => "oldest",
+    })
+  }
+}
+
 #[derive(Boilerplate)]
 pub(crate) struct InscriptionsHtml {
-  pub(crate) inscriptions: Vec<InscriptionId>,
+  pub(crate) inscriptions: Vec<(InscriptionId, Option<Media>)>,
   pub(crate) prev: Option<u32>,
   pub(crate) next: Option<u32>,
+  pub(crate) sort: Sort,
+  pub(crate) cursed: bool,
+}
+
+impl InscriptionsHtml {
+  pub(crate) fn query_string(&self) -> &'static str {
+    match (self.sort, self.cursed) {
+      (Sort::Newest, false) => "",
+      (Sort::Oldest, false) => "?sort=oldest",
+      (Sort::Newest, true) => "?cursed=1",
+      (Sort::Oldest, true) => "?sort=oldest&cursed=1",
+    }
+  }
+
+  pub(crate) fn cursed_checked(&self) -> &'static str {
+    if self.cursed { " checked" } else { "" }
+  }
+
+  pub(crate) fn selected_if(&self, sort: Sort) -> &'static str {
+    if self.sort == sort { " selected" } else { "" }
+  }
 }
 
 impl PageContent for InscriptionsHtml {
@@ -21,12 +59,14 @@ mod tests {
   fn without_prev_and_next() {
     assert_regex_match!(
       InscriptionsHtml {
-        inscriptions: vec![inscription_id(1), inscription_id(2)],
+        inscriptions: vec![(inscription_id(1), None), (inscription_id(2), None)],
         prev: None,
         next: None,
+        sort: Sort::Newest,
+        cursed: false,
       },
       "
-        <h1>All Inscriptions</h1>
+        .*<h1>All Inscriptions</h1>.*
         <div class=thumbnails>
           <a href=/inscription/1{64}i1><iframe .* src=/preview/1{64}i1\\?thumb=1></iframe></a>
           <a href=/inscription/2{64}i2><iframe .* src=/preview/2{64}i2\\?thumb=1></iframe></a>
@@ -44,20 +84,33 @@ mod tests {
   fn with_prev_and_next() {
     assert_regex_match!(
       InscriptionsHtml {
-        inscriptions: vec![inscription_id(1), inscription_id(2)],
+        inscriptions: vec![(inscription_id(1), None), (inscription_id(2), None)],
         prev: Some(1),
         next: Some(2),
+        sort: Sort::Newest,
+        cursed: false,
       },
       "
-        <h1>All Inscriptions</h1>
-        <div class=thumbnails>
-          <a href=/inscription/1{64}i1><iframe .* src=/preview/1{64}i1\\?thumb=1></iframe></a>
-          <a href=/inscription/2{64}i2><iframe .* src=/preview/2{64}i2\\?thumb=1></iframe></a>
-        </div>
-        .*
-        <a class=prev href=/inscriptions/1>prev</a>
-        <a class=next href=/inscriptions/2>next</a>
-        .*
+        .*<a class=prev href=/inscriptions/1>prev</a>
+        <a class=next href=/inscriptions/2>next</a>.*
+      "
+      .unindent()
+    );
+  }
+
+  #[test]
+  fn oldest_sort_preserved_in_pagination_links() {
+    assert_regex_match!(
+      InscriptionsHtml {
+        inscriptions: vec![(inscription_id(1), None)],
+        prev: Some(0),
+        next: Some(2),
+        sort: Sort::Oldest,
+        cursed: false,
+      },
+      "
+        .*<a class=prev href=/inscriptions/0\\?sort=oldest>prev</a>
+        <a class=next href=/inscriptions/2\\?sort=oldest>next</a>.*
       "
       .unindent()
     );
diff --git a/src/templates/inscriptions_block.rs b/src/templates/inscriptions_block.rs
index fcb1b0a1f6..553f607853 100644
--- a/src/templates/inscriptions_block.rs
+++ b/src/templates/inscriptions_block.rs
@@ -3,7 +3,7 @@ use super::*;
 #[derive(Boilerplate)]
 pub(crate) struct InscriptionsBlockHtml {
   pub(crate) block: u32,
-  pub(crate) inscriptions: Vec<InscriptionId>,
+  pub(crate) inscriptions: Vec<(InscriptionId, Option<Media>)>,
   pub(crate) prev_block: Option<u32>,
   pub(crate) next_block: Option<u32>,
   pub(crate) prev_page: Option<u32>,
@@ -14,7 +14,7 @@ impl InscriptionsBlockHtml {
   pub(crate) fn new(
     block: u32,
     current_blockheight: u32,
-    inscriptions: Vec<InscriptionId>,
+    inscriptions: Vec<(InscriptionId, Option<Media>)>,
     more_inscriptions: bool,
     page_index: u32,
   ) -> Self {
@@ -52,7 +52,7 @@ mod tests {
     assert_regex_match!(
       InscriptionsBlockHtml {
         block: 21,
-        inscriptions: vec![inscription_id(1), inscription_id(2)],
+        inscriptions: vec![(inscription_id(1), None), (inscription_id(2), None)],
         prev_block: None,
         next_block: None,
         prev_page: None,
@@ -78,7 +78,7 @@ mod tests {
     assert_regex_match!(
       InscriptionsBlockHtml {
         block: 21,
-        inscriptions: vec![inscription_id(1), inscription_id(2)],
+        inscriptions: vec![(inscription_id(1), None), (inscription_id(2), None)],
         prev_block: Some(20),
         next_block: Some(22),
         next_page: Some(3),
diff --git a/src/templates/item.rs b/src/templates/item.rs
index a86a0e072e..8f3e3dca9c 100644
--- a/src/templates/item.rs
+++ b/src/templates/item.rs
@@ -4,13 +4,25 @@ use super::*;
 pub struct ItemHtml {
   pub gallery_id: InscriptionId,
   pub gallery_number: i32,
+  pub gallery_title: Option<String>,
   pub i: usize,
   pub item: Item,
+  pub total: usize,
 }
 
 impl PageContent for ItemHtml {
   fn title(&self) -> String {
-    format!("Gallery {} Item {}", self.gallery_number, self.i)
+    let gallery_part = self
+      .gallery_title
+      .clone()
+      .unwrap_or_else(|| format!("Gallery {}", self.gallery_number));
+    let item_part = self
+      .item
+      .attributes
+      .title
+      .clone()
+      .unwrap_or_else(|| format!("Item {}", self.i));
+    format!("{} / {}", gallery_part, item_part)
   }
 }
 
@@ -24,7 +36,9 @@ mod tests {
       ItemHtml {
         gallery_id: inscription_id(2),
         gallery_number: 1,
+        gallery_title: Some("Bar".into()),
         i: 2,
+        total: 5,
         item: Item {
           id: Some(inscription_id(1)),
           attributes: Attributes {
@@ -32,19 +46,24 @@ mod tests {
             traits: Traits::default(),
           },
           index: None,
-        }
+        },
       },
       "
-        <h1>Gallery 1 Item 2</h1>
-        <p class=subtitle>foo</p>
-        <div class=inscription>
+        <h1>foo</h1>
+        <div class=subtitle-row>
+          <p class=subtitle><a href=/inscription/2{64}i2>\\s*Bar\\s*</a> / Item 2</p>
+          <div class=title-links data-ord-path=/inscription/1{64}i1></div>
+        </div>
+        <div class=\"inscription gallery-item-nav\">
+        <a class=prev href=/gallery/2{64}i2/1>❮</a>
         <iframe .* src=/preview/1{64}i1></iframe>
+        <a class=next href=/gallery/2{64}i2/3>❯</a>
         </div>
         <dl>
           <dt>inscription</dt>
-          <dd><a href=/inscription/1{64}i1>1{64}i1</a></dd>
+          <dd><a class=collapse href=/inscription/1{64}i1>1{64}i1</a></dd>
           <dt>gallery</dt>
-          <dd><a href=/inscription/2{64}i2>2{64}i2</a></dd>
+          <dd><a class=collapse href=/inscription/2{64}i2>2{64}i2</a></dd>
           <dt>title</dt>
         <dd>foo</dd>
 
@@ -54,13 +73,41 @@ mod tests {
     );
   }
 
+  #[test]
+  fn body_without_item_title() {
+    assert_regex_match!(
+      ItemHtml {
+        gallery_id: inscription_id(2),
+        gallery_number: 1,
+        gallery_title: Some("Bar".into()),
+        i: 2,
+        total: 5,
+        item: Item {
+          id: Some(inscription_id(1)),
+          attributes: Attributes::default(),
+          index: None,
+        },
+      },
+      "
+        <h1>Gallery 1 Item 2</h1>
+        <div class=subtitle-row>
+          <div class=title-links data-ord-path=/inscription/1{64}i1></div>
+        </div>
+        .*
+      "
+      .unindent()
+    );
+  }
+
   #[test]
   fn title() {
     assert_eq!(
       ItemHtml {
         gallery_id: inscription_id(2),
         gallery_number: 1,
+        gallery_title: Some("Bar".into()),
         i: 2,
+        total: 5,
         item: Item {
           id: Some(inscription_id(1)),
           attributes: Attributes {
@@ -68,10 +115,10 @@ mod tests {
             traits: Traits::default(),
           },
           index: None,
-        }
+        },
       }
       .title(),
-      "Gallery 1 Item 2",
+      "Bar / foo",
     );
   }
 }
diff --git a/src/templates/output.rs b/src/templates/output.rs
index 6efc371bf2..6fcee81393 100644
--- a/src/templates/output.rs
+++ b/src/templates/output.rs
@@ -4,7 +4,7 @@ use super::*;
 pub(crate) struct OutputHtml {
   pub(crate) chain: Chain,
   pub(crate) confirmations: u32,
-  pub(crate) inscriptions: Option<Vec<InscriptionId>>,
+  pub(crate) inscriptions: Option<Vec<(InscriptionId, Option<Media>)>>,
   pub(crate) outpoint: OutPoint,
   pub(crate) output: TxOut,
   pub(crate) runes: Option<BTreeMap<SpacedRune, Pile>>,
@@ -156,7 +156,7 @@ mod tests {
       OutputHtml {
         chain: Chain::Mainnet,
         confirmations: 6,
-        inscriptions: Some(vec![inscription_id(1)]),
+        inscriptions: Some(vec![(inscription_id(1), None)]),
         outpoint: outpoint(1),
         output: TxOut {
           value: Amount::from_sat(3),
diff --git a/src/templates/parents.rs b/src/templates/parents.rs
index e185ec6abd..fa7293ac68 100644
--- a/src/templates/parents.rs
+++ b/src/templates/parents.rs
@@ -4,7 +4,7 @@ use super::*;
 pub(crate) struct ParentsHtml {
   pub(crate) id: InscriptionId,
   pub(crate) number: i32,
-  pub(crate) parents: Vec<InscriptionId>,
+  pub(crate) parents: Vec<(InscriptionId, Option<Media>)>,
   pub(crate) prev_page: Option<usize>,
   pub(crate) next_page: Option<usize>,
 }
@@ -25,7 +25,7 @@ mod tests {
       ParentsHtml {
         id: inscription_id(1),
         number: 0,
-        parents: vec![inscription_id(2), inscription_id(3)],
+        parents: vec![(inscription_id(2), None), (inscription_id(3), None)],
         prev_page: None,
         next_page: None,
       },
@@ -50,7 +50,7 @@ mod tests {
       ParentsHtml {
         id: inscription_id(1),
         number: 0,
-        parents: vec![inscription_id(2), inscription_id(3)],
+        parents: vec![(inscription_id(2), None), (inscription_id(3), None)],
         next_page: Some(3),
         prev_page: Some(1),
       },
diff --git a/src/templates/rune.rs b/src/templates/rune.rs
index 51e293e08e..b75ff59d08 100644
--- a/src/templates/rune.rs
+++ b/src/templates/rune.rs
@@ -6,6 +6,8 @@ pub struct RuneHtml {
   pub id: RuneId,
   pub mintable: bool,
   pub parent: Option<InscriptionId>,
+  #[serde(skip)]
+  pub parent_media: Option<Media>,
 }
 
 impl RuneHtml {
@@ -72,6 +74,7 @@ mod tests {
           txid: Txid::all_zeros(),
           index: 0,
         }),
+        parent_media: None,
       },
       "<h1>B•CGDENLQRQWDSLRUGSNLBTMFIJAV</h1>
 .*<a href=/inscription/.*<iframe .* src=/preview/0{64}i0\\?thumb=1></iframe></a>.*
@@ -154,6 +157,7 @@ mod tests {
         id: RuneId { block: 10, tx: 9 },
         mintable: false,
         parent: None,
+        parent_media: None,
       },
       "<h1>B•CGDENLQRQWDSLRUGSNLBTMFIJAV</h1>
 <dl>.*
@@ -188,6 +192,7 @@ mod tests {
         id: RuneId { block: 10, tx: 9 },
         mintable: false,
         parent: None,
+        parent_media: None,
       },
       "<h1>B•CGDENLQRQWDSLRUGSNLBTMFIJAV</h1>
 <dl>.*
@@ -227,6 +232,7 @@ mod tests {
         id: RuneId { block: 10, tx: 9 },
         mintable: false,
         parent: None,
+        parent_media: None,
       },
       "<h1>B•CGDENLQRQWDSLRUGSNLBTMFIJAV</h1>
 <dl>.*
@@ -286,6 +292,7 @@ mod tests {
           txid: Txid::all_zeros(),
           index: 0,
         }),
+        parent_media: None,
       },
       ".*
       <dt>mintable</dt>
@@ -323,6 +330,7 @@ mod tests {
           txid: Txid::all_zeros(),
           index: 0,
         }),
+        parent_media: None,
       },
       ".*
       <dt>mintable</dt>
diff --git a/src/templates/sat.rs b/src/templates/sat.rs
index 979c23f53d..4e9847cb0b 100644
--- a/src/templates/sat.rs
+++ b/src/templates/sat.rs
@@ -4,7 +4,7 @@ use super::*;
 pub(crate) struct SatHtml {
   pub(crate) address: Option<Address>,
   pub(crate) blocktime: Blocktime,
-  pub(crate) inscriptions: Vec<InscriptionId>,
+  pub(crate) inscriptions: Vec<(InscriptionId, Option<Media>)>,
   pub(crate) sat: Sat,
   pub(crate) satpoint: Option<SatPoint>,
 }
@@ -119,7 +119,7 @@ mod tests {
         sat: Sat(0),
         satpoint: None,
         blocktime: Blocktime::confirmed(0),
-        inscriptions: vec![inscription_id(1)],
+        inscriptions: vec![(inscription_id(1), None)],
       },
       "
         <h1>Sat 0</h1>
@@ -141,7 +141,7 @@ mod tests {
         sat: Sat(0),
         satpoint: None,
         blocktime: Blocktime::confirmed(0),
-        inscriptions: vec![inscription_id(1), inscription_id(2)],
+        inscriptions: vec![(inscription_id(1), None), (inscription_id(2), None)],
       },
       "
         <h1>Sat 0</h1>
diff --git a/src/templates/transaction.rs b/src/templates/transaction.rs
index a353e8a7ba..15d570f70f 100644
--- a/src/templates/transaction.rs
+++ b/src/templates/transaction.rs
@@ -5,6 +5,8 @@ pub struct TransactionHtml {
   pub chain: Chain,
   pub etching: Option<SpacedRune>,
   pub inscription_count: u32,
+  #[serde(skip)]
+  pub inscription_medias: Vec<Option<Media>>,
   pub transaction: Transaction,
   pub txid: Txid,
 }
@@ -49,6 +51,7 @@ mod tests {
         chain: Chain::Mainnet,
         etching: None,
         inscription_count: 0,
+        inscription_medias: Vec::new(),
         txid: transaction.compute_txid(),
         transaction,
       }.to_string(),
diff --git a/src/wallet/batch/plan.rs b/src/wallet/batch/plan.rs
index 117f9c983d..c9b08a2fc1 100644
--- a/src/wallet/batch/plan.rs
+++ b/src/wallet/batch/plan.rs
@@ -696,7 +696,9 @@ impl Plan {
         range: None,
         next_index: None,
         internal: Some(false),
-        label: Some("commit tx recovery key".to_string()),
+        // Bitcoin Core v30+ rejects labels on inactive descriptors with
+        // `Internal addresses should not have a label` (-8). Drop the label.
+        label: None,
       })?;
 
     for result in response {
diff --git a/static/chevron-down.svg b/static/chevron-down.svg
new file mode 100644
index 0000000000..b90e7ba7ee
--- /dev/null
+++ b/static/chevron-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" width="12" height="8"><path d="M1 1.5 6 6.5 11 1.5" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
diff --git a/static/copy.svg b/static/copy.svg
new file mode 100644
index 0000000000..6f0f9de4d9
--- /dev/null
+++ b/static/copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="#a1adb8"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z"/></svg>
diff --git a/static/index.css b/static/index.css
index 1367241350..ac977e53b7 100644
--- a/static/index.css
+++ b/static/index.css
@@ -80,7 +80,10 @@ nav > :first-child {
 }
 
 nav a.active {
-  color: #ffffff;
+  /* Theme-aware: --light-fg is #ffffff in dark theme (current behavior) and
+     #000000 in light theme, so the active home logo stays visible against
+     the white nav background in light mode instead of disappearing. */
+  color: var(--light-fg);
 }
 
 nav a.active img {
@@ -220,40 +223,71 @@ a.mythic {
 }
 
 .thumbnails > a {
-  border-radius: 2%;
-  border: 1px solid #222;
+  aspect-ratio: 1 / 1;
+  contain-intrinsic-size: auto 180px;
+  content-visibility: auto;
   margin: 1%;
   overflow: hidden;
+  position: relative;
   width: 23%;
 }
 
-.thumbnails > a:hover {
-  border-color: #444;
+.thumbnails iframe {
+  height: 400%;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  transform: scale(0.25);
+  transform-origin: 0 0;
+  width: 400%;
 }
 
-.thumbnails iframe {
+.thumbnails img {
   height: 100%;
-  pointer-events: none;
+  object-fit: contain;
   width: 100%;
 }
 
+img.rendering-pixelated {
+  image-rendering: pixelated;
+}
+
+img.rendering-auto {
+  image-rendering: auto;
+}
+
 .inscription {
   display: flex;
+  gap: 0.5rem;
   justify-content: center;
 }
 
 .inscription > *:nth-child(1), .inscription > *:nth-child(3) {
   align-items: center;
-  color: var(--dark-bg);
+  color: #a1adb8;
   display: flex;
   flex: 1;
   font-size: 200%;
   justify-content: center;
+  opacity: 0;
   text-decoration: none;
+  transition: opacity 200ms, color 200ms;
 }
 
 .inscription > a:nth-child(1):hover, .inscription > a:nth-child(3):hover {
-  color: var(--dark-fg);
+  color: #ffffff;
+  opacity: 1;
+}
+
+:root[data-theme=light] .inscription > a:nth-child(1):hover,
+:root[data-theme=light] .inscription > a:nth-child(3):hover {
+  color: #000000;
+}
+
+.inscription.gallery-item-nav > *:nth-child(1),
+.inscription.gallery-item-nav > *:nth-child(3) {
+  opacity: 0.3;
 }
 
 .inscription > *:nth-child(2) {
@@ -264,6 +298,18 @@ a.mythic {
   width: 100%;
 }
 
+@media (max-width: 38rem) {
+  .inscription.gallery-item-nav > *:nth-child(1),
+  .inscription.gallery-item-nav > *:nth-child(3) {
+    font-size: 150%;
+  }
+
+  .inscription.gallery-item-nav > *:nth-child(2) {
+    flex-basis: 70%;
+    min-width: 0;
+  }
+}
+
 .satscard-error {
   color: red;
 }
@@ -302,9 +348,549 @@ a.mythic {
 }
 
 .subtitle {
-  margin-top: 0.25rem;
+  margin: 0;
 }
 
-h1:has(+ .subtitle) {
+h1:has(+ .subtitle), h1:has(+ .subtitle-row) {
   margin-bottom: 0;
 }
+
+.subtitle-row {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  margin: 0.25rem 0 1rem;
+}
+
+.subtitle-row > .subtitle {
+  flex: 1;
+  min-width: 0;
+}
+
+.title-links {
+  display: flex;
+  flex-shrink: 0;
+  gap: 0.75rem;
+  margin-left: auto;
+}
+
+.title-links > a {
+  align-items: center;
+  display: inline-flex;
+}
+
+.title-links img.icon {
+  height: 1.1rem;
+  width: 1.1rem;
+}
+
+.title-links > .title-dropdown {
+  align-items: center;
+  display: inline-flex;
+  position: relative;
+}
+
+.title-dropdown-toggle {
+  align-items: center;
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  gap: 0.25rem;
+  padding: 0;
+}
+
+.title-dropdown-caret {
+  border-left: 0.3em solid transparent;
+  border-right: 0.3em solid transparent;
+  border-top: 0.35em solid currentColor;
+  display: inline-block;
+  height: 0;
+  width: 0;
+}
+
+.title-dropdown-menu {
+  background: var(--light-bg);
+  border: 1px solid var(--dark-fg);
+  border-radius: 0.25rem;
+  display: none;
+  margin-top: 0.25rem;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  z-index: 5;
+}
+
+.title-dropdown-menu.open {
+  display: block;
+}
+
+.title-dropdown-menu a {
+  color: var(--light-fg);
+  display: block;
+  padding: 0.2rem 0.6rem;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.title-dropdown-menu a:hover {
+  text-decoration: underline;
+}
+
+.breadcrumbs {
+  font-size: 0.85rem;
+  margin: 1.25rem 0 0;
+  /* Keep the breadcrumb in a single horizontal row regardless of viewport
+     width. When the content is wider than the available space (typical on
+     mobile) this container scrolls horizontally instead of wrapping. */
+  overflow-x: auto;
+  /* Space between the breadcrumb text and the horizontal scrollbar so they
+     don't crowd each other. */
+  padding-bottom: 0.5rem;
+  /* Static right-edge fade as a scroll affordance. Progressive JS extends
+     this to also fade the left edge once the user has scrolled past the
+     start; without JS, the right fade alone is still a decent hint that
+     there's more to swipe to. */
+  mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
+  -webkit-mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
+}
+
+.breadcrumb {
+  align-items: center;
+  display: flex;
+  /* No wrap — the .breadcrumbs container handles overflow via scroll. */
+  flex-wrap: nowrap;
+  gap: 0.4rem;
+  margin: 0.15rem 0;
+  /* Force the row to its natural content width so it can extend past the
+     container's clientWidth and trigger horizontal scrolling. */
+  width: max-content;
+}
+
+.breadcrumb-fork {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.breadcrumb-fork-row {
+  align-items: center;
+  display: inline-flex;
+  /* Same single-row enforcement as the parent .breadcrumb. */
+  flex-wrap: nowrap;
+  gap: 0.4rem;
+  /* Empty middles (a trail with no divergent crumbs after collapsing
+     prefix/suffix) still reserve a full line of vertical space. */
+  min-height: 1.2em;
+}
+
+/* Wraps the inline <svg> branch + its .breadcrumb-fork at every fork
+   level (outer + each nested sub-fork). The two are flex siblings so the
+   SVG sits on the LEFT of the fork rows and they wrap together as a unit
+   on narrow viewports. */
+.breadcrumb-tree-group {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 0.4rem;
+}
+
+/* The drawn tree branch. JS sets its `height` to match the fork's actual
+   rendered height so the arm y-coordinates (which are percentages in a
+   100x100 viewBox) land on each row's vertical centre. */
+.breadcrumb-tree-branch {
+  display: block;
+  flex-shrink: 0;
+  width: 1.4em;
+}
+
+.breadcrumb a,
+.breadcrumb a:visited {
+  color: inherit;
+  text-decoration: none;
+}
+
+.breadcrumb a:hover {
+  text-decoration: underline;
+}
+
+.breadcrumb .current {
+  font-weight: bold;
+}
+
+.crumb {
+  position: relative;
+  white-space: nowrap;
+}
+
+.crumb-toggle {
+  background: none;
+  border-bottom: 0;
+  border-left: 0.4em solid transparent;
+  border-right: 0.4em solid transparent;
+  border-top: 0.45em solid currentColor;
+  color: inherit;
+  cursor: pointer;
+  display: inline-block;
+  height: 0;
+  margin-left: 0.4em;
+  padding: 0;
+  vertical-align: middle;
+  width: 0;
+}
+
+.crumb-menu {
+  background: var(--light-bg);
+  border: 1px solid var(--dark-fg);
+  border-radius: 0.25rem;
+  display: none;
+  left: 0;
+  margin-top: 0.25rem;
+  padding: 0.25rem 0;
+  position: absolute;
+  top: 100%;
+  white-space: nowrap;
+  z-index: 10;
+}
+
+.crumb-menu.open {
+  display: block;
+}
+
+.crumb-menu a {
+  color: var(--light-fg);
+  display: block;
+  padding: 0.2rem 0.6rem;
+  text-decoration: none;
+}
+
+.crumb-menu a:hover {
+  text-decoration: underline;
+}
+
+.crumb-menu-divider {
+  border-top: 1px solid var(--light-fg);
+  margin: 0.25rem 0;
+  opacity: 0.4;
+}
+
+.gallery-row {
+  align-items: center;
+  display: flex;
+}
+
+.gallery-row > .thumbnails {
+  flex: 1;
+}
+
+.gallery-mode-scroll > .thumbnails {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+
+.gallery-mode-scroll > .thumbnails::-webkit-scrollbar {
+  display: none;
+}
+
+.gallery-mode-scroll > .thumbnails > a {
+  flex: 0 0 23%;
+  scroll-snap-align: center;
+}
+
+.gallery-mode-all > .thumbnails > a[hidden] {
+  display: none;
+}
+
+.gallery-row .gallery-prev,
+.gallery-row .gallery-next {
+  background: none;
+  border: none;
+  color: #a1adb8;
+  cursor: pointer;
+  flex-shrink: 0;
+  font-family: inherit;
+  font-size: 1.5em;
+  padding: 0 0.4em;
+}
+
+.gallery-row .gallery-prev[disabled],
+.gallery-row .gallery-next[disabled] {
+  cursor: default;
+  opacity: 0.3;
+}
+
+dt.with-toolbar {
+  align-items: center;
+  display: flex;
+}
+
+.gallery-toolbar {
+  display: flex;
+  gap: 0.25em;
+  margin-left: auto;
+}
+
+.gallery-view-btn {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 0.25em;
+}
+
+.gallery-view-btn:hover {
+  border-color: #333;
+}
+
+.gallery-view-btn.active {
+  background: #1f2426;
+  border-color: #444;
+}
+
+.gallery-view-btn img.icon {
+  display: block;
+  height: 18px;
+  width: 18px;
+}
+
+@media (max-width: 38rem) {
+  .gallery-mode-scroll > .gallery-prev,
+  .gallery-mode-scroll > .gallery-next {
+    display: none;
+  }
+}
+
+@keyframes gallery-scroll-hint {
+  0%, 100% { transform: translateX(0); }
+  40% { transform: translateX(-18px); }
+}
+
+.gallery-row.scroll-hint > .thumbnails {
+  animation: gallery-scroll-hint 900ms ease-in-out;
+}
+
+.nav-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  padding: 0;
+}
+
+.sort-form {
+  display: flex;
+  flex: 0;
+  justify-content: flex-end;
+  margin-bottom: 0.5rem;
+}
+
+.sort-form label {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.4rem;
+}
+
+.sort-form select {
+  background: var(--light-bg);
+  border: 1px solid var(--light-fg);
+  border-radius: 3px;
+  color: var(--light-fg);
+  cursor: pointer;
+  font: inherit;
+  padding: 0.2rem 0.4rem;
+}
+
+/* Filter toolbar — its own row beneath the page heading */
+.inscriptions-toolbar {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0 0 1rem;
+  padding: 0;
+  width: auto;
+}
+
+/* Shared sizing so every control is the same height */
+.toolbar-btn,
+.inscriptions-toolbar select {
+  background: var(--light-bg);
+  border: 1px solid var(--light-fg);
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: var(--light-fg);
+  cursor: pointer;
+  font: inherit;
+  height: 2rem;
+  line-height: 1;
+}
+
+.toolbar-btn {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.4rem;
+  list-style: none;
+  padding: 0 0.7rem;
+  user-select: none;
+}
+
+.inscriptions-toolbar select {
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url(/static/chevron-down.svg);
+  background-position: right 0.7rem center;
+  background-repeat: no-repeat;
+  background-size: 0.7rem auto;
+  padding: 0 1.8rem 0 0.7rem;
+}
+
+.toolbar-btn::-webkit-details-marker {
+  display: none;
+}
+
+.toolbar-btn img.icon {
+  height: 1rem;
+  width: 1rem;
+}
+
+/* Square cursed toggle so the skull sits centred */
+.cursed-toggle {
+  justify-content: center;
+  padding: 0;
+  width: 2rem;
+}
+
+.cursed-toggle input {
+  display: none;
+}
+
+.cursed-toggle:has(input:checked) {
+  background: var(--dark-fg);
+  border-color: var(--dark-fg);
+}
+
+.cursed-toggle:has(input:checked) img.icon {
+  filter: brightness(0);
+}
+
+:root[data-theme=light] .cursed-toggle:has(input:checked) {
+  background: #000;
+  border-color: #000;
+}
+
+:root[data-theme=light] .cursed-toggle:has(input:checked) img.icon {
+  filter: invert(1);
+}
+
+.range-popover {
+  position: relative;
+}
+
+.range-popover[open] > summary {
+  background: var(--dark-fg);
+  border-color: var(--dark-fg);
+  color: var(--dark-bg);
+}
+
+.range-fields {
+  align-items: center;
+  background: var(--light-bg);
+  border: 1px solid var(--light-fg);
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin-top: 0.25rem;
+  padding: 0.6rem;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  z-index: 5;
+}
+
+.range-fields label {
+  align-items: center;
+  display: flex;
+  gap: 0.4rem;
+}
+
+.range-fields input[type=number] {
+  background: var(--dark-bg);
+  border: 1px solid var(--light-fg);
+  border-radius: 3px;
+  color: var(--dark-fg);
+  font: inherit;
+  padding: 0.2rem 0.4rem;
+  width: 8rem;
+}
+
+dd:has(.copy-btn) {
+  white-space: nowrap;
+}
+
+.copy-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-left: 0.5em;
+  padding: 0;
+  vertical-align: middle;
+}
+
+.copy-btn img.icon {
+  height: 0.9rem;
+  opacity: 0.5;
+  transition: opacity 150ms;
+  width: 0.9rem;
+}
+
+.copy-btn:hover img.icon,
+.copy-btn.copied img.icon {
+  opacity: 1;
+}
+
+:root[data-theme=dark] {
+  --dark-bg: #131516;
+  --light-bg: #000000;
+  --dark-fg: #ffffff;
+  --light-fg: #ffffff;
+}
+
+:root[data-theme=dark] img.icon {
+  filter: brightness(0) invert(1);
+}
+
+:root[data-theme=dark] nav {
+  border-bottom: 1px solid #333;
+}
+
+:root[data-theme=light] {
+  --dark-bg: #ffffff;
+  --light-bg: #ffffff;
+  --dark-fg: #000000;
+  --light-fg: #000000;
+}
+
+:root[data-theme=light] img.icon {
+  filter: brightness(0);
+}
+
+:root[data-theme=light] nav {
+  border-bottom: 1px solid #ddd;
+}
+
+:root[data-theme=light] input[type=text] {
+  background-color: #f0f0f0;
+  border-color: #cccccc;
+}
+
+:root[data-theme=light] .gallery-view-btn.active {
+  background: none;
+  border-color: #000;
+}
+
diff --git a/static/index.js b/static/index.js
index 652bd48a7c..e332d6464e 100644
--- a/static/index.js
+++ b/static/index.js
@@ -3,6 +3,407 @@ addEventListener("DOMContentLoaded", () => {
     time.setAttribute('title', new Date(time.textContent));
   }
 
+  let titleLinks = document.querySelector('.title-links');
+  if (titleLinks) {
+    let urls = [];
+    for (let dt of document.querySelectorAll('dt')) {
+      if (dt.textContent.trim().toLowerCase() === 'links') {
+        let dd = dt.nextElementSibling;
+        if (dd) {
+          for (let item of dd.querySelectorAll('li, a')) {
+            let raw = item.tagName === 'A' ? item.href : item.textContent.trim();
+            try {
+              let u = new URL(raw);
+              if ((u.protocol === 'http:' || u.protocol === 'https:') && u.hostname) {
+                urls.push(u);
+              }
+            } catch (_) {}
+          }
+        }
+        break;
+      }
+    }
+    // Title-link factories — 1 link renders as a direct anchor; 2+ render as
+    // icon + caret + dropdown menu. Used uniformly for marketplace, website,
+    // and X icons so adding a new multi-link kind is just another call.
+    function makeDirect(src, alt, label, href) {
+      let a = document.createElement('a');
+      a.href = href;
+      a.target = '_blank';
+      a.rel = 'noopener noreferrer';
+      a.title = label;
+      let img = document.createElement('img');
+      img.className = 'icon';
+      img.src = src;
+      img.alt = alt;
+      a.appendChild(img);
+      return a;
+    }
+
+    function makeDropdown(src, alt, label, items) {
+      let wrap = document.createElement('span');
+      wrap.className = 'title-dropdown';
+      let toggle = document.createElement('button');
+      toggle.type = 'button';
+      toggle.className = 'title-dropdown-toggle';
+      toggle.title = label;
+      let img = document.createElement('img');
+      img.className = 'icon';
+      img.src = src;
+      img.alt = alt;
+      toggle.appendChild(img);
+      let caret = document.createElement('span');
+      caret.className = 'title-dropdown-caret';
+      toggle.appendChild(caret);
+      let menu = document.createElement('div');
+      menu.className = 'title-dropdown-menu';
+      for (let item of items) {
+        let a = document.createElement('a');
+        a.href = item.href;
+        a.target = '_blank';
+        a.rel = 'noopener noreferrer';
+        a.textContent = item.name;
+        menu.appendChild(a);
+      }
+      toggle.addEventListener('click', e => {
+        e.stopPropagation();
+        let isOpen = menu.classList.contains('open');
+        for (let m of document.querySelectorAll('.crumb-menu.open, .title-dropdown-menu.open')) {
+          m.classList.remove('open');
+        }
+        if (!isOpen) menu.classList.add('open');
+      });
+      wrap.appendChild(toggle);
+      wrap.appendChild(menu);
+      return wrap;
+    }
+
+    // Marketplace items — off-chain (see marketplaces.js). Slugs vary per
+    // marketplace, so this is hand-maintained, not derived from on-chain data.
+    let mItems = [];
+    let mIdMatch = location.pathname.match(/\/inscription\/([0-9a-f]{64}i\d+)/);
+    let mSlugs = mIdMatch
+      && typeof GALLERY_MARKETPLACES !== 'undefined'
+      && GALLERY_MARKETPLACES[mIdMatch[1]];
+    if (mSlugs && typeof MARKETPLACES !== 'undefined') {
+      for (let key of Object.keys(MARKETPLACES)) {
+        if (mSlugs[key]) {
+          mItems.push({name: MARKETPLACES[key].name, href: MARKETPLACES[key].base + mSlugs[key]});
+        }
+      }
+    }
+
+    // Group on-chain links from the inscription's `links` attribute.
+    let websites = [], xLinks = [];
+    for (let u of urls) {
+      let host = u.hostname.replace(/^www\./, '');
+      if (host === 'x.com' || host === 'twitter.com') xLinks.push(u);
+      else websites.push(u);
+    }
+
+    // Render order: marketplace, website(s), X, ordinals.com.
+    if (mItems.length === 1) {
+      titleLinks.appendChild(makeDirect('/static/marketplace.svg', 'marketplace', mItems[0].name, mItems[0].href));
+    } else if (mItems.length > 1) {
+      titleLinks.appendChild(makeDropdown('/static/marketplace.svg', 'marketplaces', 'marketplaces', mItems));
+    }
+
+    if (websites.length === 1) {
+      titleLinks.appendChild(makeDirect('/static/link.svg', 'website', 'website', websites[0].href));
+    } else if (websites.length > 1) {
+      let items = websites.map(u => ({name: u.hostname.replace(/^www\./, ''), href: u.href}));
+      titleLinks.appendChild(makeDropdown('/static/link.svg', 'websites', 'websites', items));
+    }
+
+    if (xLinks.length === 1) {
+      titleLinks.appendChild(makeDirect('/static/x.svg', 'X', 'X', xLinks[0].href));
+    } else if (xLinks.length > 1) {
+      let items = xLinks.map(u => {
+        let handle = (u.pathname.split('/').filter(Boolean)[0]) || u.hostname;
+        return {name: '@' + handle, href: u.href};
+      });
+      titleLinks.appendChild(makeDropdown('/static/x.svg', 'X accounts', 'X accounts', items));
+    }
+
+    let ordPath = titleLinks.dataset.ordPath || (location.pathname + location.search);
+    titleLinks.appendChild(makeDirect('/static/ordinals.svg', 'view on ordinals.com', 'view on ordinals.com', 'https://ordinals.com' + ordPath));
+  }
+
+  for (let form of document.querySelectorAll('.sort-form, .inscriptions-toolbar')) {
+    for (let control of form.querySelectorAll('select[name=sort], input[name=cursed]')) {
+      control.addEventListener('change', () => form.submit());
+    }
+  }
+
+  let themeToggle = document.getElementById('theme-toggle');
+  if (themeToggle) {
+    const THEMES = ['dark', 'light'];
+    themeToggle.addEventListener('click', () => {
+      let current = document.documentElement.getAttribute('data-theme') || 'dark';
+      let next = THEMES[(THEMES.indexOf(current) + 1) % THEMES.length];
+      document.documentElement.setAttribute('data-theme', next);
+      localStorage.setItem('theme', next);
+    });
+  }
+
+  // Thumbnails marked `data-scriptable` (HTML and SVG inscriptions) ship with
+  // a valueless `sandbox`, so their scripts never run — a grid of live
+  // inscriptions burns enough CPU that iOS kills the renderer. Recursive art
+  // is script-driven and renders blank while inert, so grant allow-scripts to
+  // thumbnails that are on screen and revoke it once they leave, never
+  // exceeding MAX_LIVE_THUMBNAILS at once.
+  //
+  // Sandbox flags are only applied when a frame navigates, so each transition
+  // swaps in a fresh clone: setting `sandbox` before insertion means the load
+  // happens under the new flags. `allow-same-origin` is never granted, so an
+  // upgraded thumbnail still runs on an opaque origin and cannot reach this
+  // document or anything stored against it.
+  //
+  // The ceiling matches GALLERY_PAGE_SIZE below, so a full grid page renders
+  // rather than trailing off into blank tiles. Lower it if iOS still sheds the
+  // renderer on heavy collections — the strip view only ever runs four or five
+  // at once, so this really bounds the grid and the ungated thumbnail lists on
+  // /inscriptions and the home page.
+  const MAX_LIVE_THUMBNAILS = 20;
+
+  // On-screen frames, and the subset of them currently running scripts. Both
+  // are insertion-ordered, so a grid with more visible thumbnails than slots
+  // fills them in registration (document) order.
+  let visibleThumbnails = new Set();
+  let liveThumbnails = new Set();
+
+  let thumbnailObserver = 'IntersectionObserver' in window
+    ? new IntersectionObserver(entries => {
+        for (let entry of entries) {
+          if (entry.isIntersecting) visibleThumbnails.add(entry.target);
+          else visibleThumbnails.delete(entry.target);
+        }
+        reconcileThumbnails();
+      }, {rootMargin: '200px'})
+    : null;
+
+  function swapThumbnail(frame, live) {
+    let replacement = frame.cloneNode(false);
+    replacement.setAttribute('sandbox', live ? 'allow-scripts' : '');
+    replacement.dataset.scriptable = live ? 'live' : '';
+
+    // Visibility has to survive the swap. The observer re-reports the
+    // replacement asynchronously, and until it does, reconciliation would
+    // otherwise read a still-on-screen thumbnail as hidden — evicting it,
+    // freeing a slot, and re-upgrading it on the next callback forever.
+    let visible = visibleThumbnails.has(frame);
+    visibleThumbnails.delete(frame);
+    liveThumbnails.delete(frame);
+    if (thumbnailObserver) thumbnailObserver.unobserve(frame);
+
+    frame.replaceWith(replacement);
+
+    if (visible) visibleThumbnails.add(replacement);
+    if (live) liveThumbnails.add(replacement);
+    if (thumbnailObserver) thumbnailObserver.observe(replacement);
+  }
+
+  // Drop frames that have left the screen, then fill the free slots. Runs to a
+  // fixed point: swaps re-add their replacement to the sets they were in, so a
+  // reconcile pass never creates work for the next one.
+  function reconcileThumbnails() {
+    for (let frame of [...liveThumbnails]) {
+      if (!visibleThumbnails.has(frame)) swapThumbnail(frame, false);
+    }
+    for (let frame of visibleThumbnails) {
+      if (liveThumbnails.size >= MAX_LIVE_THUMBNAILS) break;
+      if (!liveThumbnails.has(frame)) swapThumbnail(frame, true);
+    }
+  }
+
+  function registerThumbnail(frame) {
+    if (thumbnailObserver) {
+      thumbnailObserver.observe(frame);
+    } else if (liveThumbnails.size < MAX_LIVE_THUMBNAILS) {
+      // No IntersectionObserver: upgrade the first screenful and leave the
+      // rest inert rather than letting an unbounded grid go live.
+      swapThumbnail(frame, true);
+    }
+  }
+
+  for (let frame of document.querySelectorAll('iframe[data-scriptable]')) {
+    registerThumbnail(frame);
+  }
+
+  const GALLERY_PAGE_SIZE = 20;
+
+  for (let row of document.querySelectorAll('.gallery-row')) {
+    let track = row.querySelector('.thumbnails');
+    let prevBtn = row.querySelector('.gallery-prev');
+    let nextBtn = row.querySelector('.gallery-next');
+    if (!track) continue;
+
+    let totalAvailable = parseInt(row.dataset.galleryTotal) || 0;
+    let loadMoreUrl = row.dataset.loadMoreUrl || null;
+    let serverPage = 0;
+    let loading = false;
+    let exhausted = !loadMoreUrl;
+
+    let items = track.querySelectorAll(':scope > a');
+    let total = items.length;
+    if (totalAvailable && total >= totalAvailable) exhausted = true;
+
+    let toolbar = row.parentElement.previousElementSibling;
+    let viewBtns = toolbar && toolbar.classList.contains('with-toolbar')
+      ? toolbar.querySelectorAll('.gallery-view-btn')
+      : [];
+    let mode = 'scroll';
+    let page = 0;
+    let pageCount = Math.max(1, Math.ceil(total / GALLERY_PAGE_SIZE));
+    let tailObserver = null;
+
+    function makeThumbnail(id) {
+      let a = document.createElement('a');
+      a.href = `/inscription/${id}`;
+      let iframe = document.createElement('iframe');
+      // Inert to match the server-rendered thumbnails; registerThumbnail then
+      // upgrades it under the same cap once it scrolls into view.
+      iframe.dataset.scriptable = '';
+      iframe.setAttribute('sandbox', '');
+      iframe.setAttribute('scrolling', 'no');
+      iframe.setAttribute('loading', 'lazy');
+      iframe.src = `/preview/${id}?thumb=1`;
+      a.appendChild(iframe);
+      return a;
+    }
+
+    function refreshState() {
+      items = track.querySelectorAll(':scope > a');
+      total = items.length;
+      pageCount = Math.max(1, Math.ceil(total / GALLERY_PAGE_SIZE));
+      if (totalAvailable && total >= totalAvailable) exhausted = true;
+    }
+
+    async function loadMore() {
+      if (exhausted || loading) return false;
+      loading = true;
+      try {
+        serverPage++;
+        let response = await fetch(`${loadMoreUrl}/${serverPage}`, {
+          headers: {Accept: 'application/json'},
+        });
+        if (!response.ok) {
+          exhausted = true;
+          return false;
+        }
+        let data = await response.json();
+        let frag = document.createDocumentFragment();
+        let added = [];
+        for (let id of (data.ids || [])) {
+          let anchor = makeThumbnail(id);
+          added.push(anchor.querySelector('iframe'));
+          frag.appendChild(anchor);
+        }
+        track.appendChild(frag);
+        // Register after insertion — observing a detached node never fires.
+        for (let frame of added) registerThumbnail(frame);
+        if (!data.more) exhausted = true;
+        refreshState();
+        applyPage();
+        updateArrows();
+        setupTailObserver();
+        return true;
+      } catch (_) {
+        exhausted = true;
+        return false;
+      } finally {
+        loading = false;
+      }
+    }
+
+    function setupTailObserver() {
+      if (tailObserver) {
+        tailObserver.disconnect();
+        tailObserver = null;
+      }
+      if (exhausted || mode !== 'scroll' || items.length === 0) return;
+      let last = items[items.length - 1];
+      tailObserver = new IntersectionObserver((entries) => {
+        for (let entry of entries) {
+          if (entry.isIntersecting) loadMore();
+        }
+      }, {root: track, rootMargin: '0px 300px 0px 0px', threshold: 0});
+      tailObserver.observe(last);
+    }
+
+    function applyPage() {
+      let start = page * GALLERY_PAGE_SIZE;
+      let end = start + GALLERY_PAGE_SIZE;
+      items.forEach((item, idx) => {
+        item.toggleAttribute('hidden', mode === 'all' && (idx < start || idx >= end));
+      });
+    }
+
+    function updateArrows() {
+      if (mode === 'scroll') {
+        let max = track.scrollWidth - track.clientWidth;
+        if (prevBtn) prevBtn.disabled = track.scrollLeft <= 1;
+        if (nextBtn) nextBtn.disabled = track.scrollLeft >= max - 1 && exhausted;
+      } else {
+        if (prevBtn) prevBtn.disabled = page <= 0;
+        if (nextBtn) nextBtn.disabled = page >= pageCount - 1 && exhausted;
+      }
+    }
+
+    function setMode(nextMode) {
+      if (mode === nextMode) return;
+      mode = nextMode;
+      row.classList.toggle('gallery-mode-scroll', mode === 'scroll');
+      row.classList.toggle('gallery-mode-all', mode === 'all');
+      viewBtns.forEach(btn => btn.classList.toggle('active', btn.dataset.mode === mode));
+      page = 0;
+      applyPage();
+      updateArrows();
+      setupTailObserver();
+    }
+
+    if (prevBtn) prevBtn.addEventListener('click', () => {
+      if (mode === 'scroll') {
+        track.scrollBy({left: -track.clientWidth, behavior: 'smooth'});
+      } else if (page > 0) {
+        page--; applyPage(); updateArrows();
+      }
+    });
+    if (nextBtn) nextBtn.addEventListener('click', async () => {
+      if (mode === 'scroll') {
+        let max = track.scrollWidth - track.clientWidth;
+        if (track.scrollLeft >= max - 1 && !exhausted) {
+          await loadMore();
+        }
+        track.scrollBy({left: track.clientWidth, behavior: 'smooth'});
+      } else {
+        while (page + 1 >= pageCount && !exhausted && !loading) {
+          await loadMore();
+        }
+        if (page + 1 < pageCount) {
+          page++; applyPage(); updateArrows();
+        }
+      }
+    });
+    viewBtns.forEach(btn => btn.addEventListener('click', () => setMode(btn.dataset.mode)));
+
+    track.addEventListener('scroll', updateArrows);
+    addEventListener('resize', updateArrows);
+    updateArrows();
+    setupTailObserver();
+
+    if (matchMedia('(max-width: 38rem)').matches && track.scrollWidth > track.clientWidth) {
+      let observer = new IntersectionObserver((entries) => {
+        for (let entry of entries) {
+          if (!entry.isIntersecting) continue;
+          observer.disconnect();
+          setTimeout(() => row.classList.add('scroll-hint'), 1200);
+        }
+      }, {threshold: 0.5});
+      observer.observe(track);
+    }
+  }
+
   let next = document.querySelector('a.next');
   let prev = document.querySelector('a.prev');
 
@@ -36,6 +437,34 @@ addEventListener("DOMContentLoaded", () => {
 
   let collapse = document.getElementsByClassName('collapse');
 
+  for (let el of collapse) {
+    let text = el.textContent.trim();
+    let btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'copy-btn';
+    btn.title = 'copy';
+    btn.setAttribute('aria-label', 'copy');
+    let img = document.createElement('img');
+    img.className = 'icon';
+    img.src = '/static/copy.svg';
+    img.alt = 'copy';
+    btn.appendChild(img);
+    btn.addEventListener('click', () => {
+      navigator.clipboard.writeText(text);
+      btn.title = 'copied!';
+      btn.classList.add('copied');
+      setTimeout(() => {
+        btn.title = 'copy';
+        btn.classList.remove('copied');
+      }, 1500);
+    });
+    if (el.tagName === 'DD') {
+      el.appendChild(btn);
+    } else {
+      el.insertAdjacentElement('afterend', btn);
+    }
+  }
+
   let context = document.createElement('canvas').getContext('2d');
 
   function resize() {
@@ -49,15 +478,31 @@ addEventListener("DOMContentLoaded", () => {
       if (width == 0) {
         width = node.parentNode.getBoundingClientRect().width;
       }
+      let container = node.tagName === 'DD' ? node : node.parentNode;
+      let btn = container.querySelector('.copy-btn');
+      if (btn) {
+        let s = window.getComputedStyle(btn);
+        width -= btn.offsetWidth + (parseFloat(s.marginLeft) || 0) + (parseFloat(s.marginRight) || 0);
+      }
       context.font = window.getComputedStyle(node).font;
       let capacity = width / (context.measureText(original).width / length);
+      let text;
       if (capacity >= length) {
-        node.textContent = original
+        text = original;
       } else {
         let count = Math.floor((capacity - 1) / 2);
         let start = original.substring(0, count);
         let end = original.substring(length - count);
-        node.textContent = `${start}…${end}`;
+        text = `${start}…${end}`;
+      }
+      let textNode = null;
+      for (let child of node.childNodes) {
+        if (child.nodeType === Node.TEXT_NODE) { textNode = child; break; }
+      }
+      if (textNode) {
+        textNode.nodeValue = text;
+      } else {
+        node.insertBefore(document.createTextNode(text), node.firstChild);
       }
     }
   }
@@ -77,5 +522,297 @@ addEventListener("DOMContentLoaded", () => {
     .querySelectorAll(`nav a[href="${CSS.escape(window.location.pathname)}"]`)
     .forEach(a => a.classList.add('active'));
 
+  // ====================================================================
+  //  Breadcrumb enhancements: nested-tree restructure, popout dropdowns,
+  //  horizontal scroll with affordance fade.
+  //
+  //  The server renders breadcrumbs as a flat .breadcrumb-fork with one
+  //  row per parent trail. The IIFE below progressively enhances that:
+  //
+  //    1. NESTED TREE  — when multiple trails share a leading crumb
+  //       (e.g. .../MoBA/Inscription Clubs/Sub 1k and
+  //              .../MoBA/Inscription Clubs/Sub-10k), collapse the shared
+  //       "Inscription Clubs" into one row containing a sub-fork for the
+  //       divergent tails. Recurses for deeper sharing. Renders an inline
+  //       <svg> branch on the left of every fork level so the structure
+  //       reads as one continuous shape.
+  //
+  //    2. POPOUT DROPDOWNS — the .breadcrumbs container uses overflow-x:
+  //       auto so the breadcrumb can scroll horizontally on narrow
+  //       viewports without reflowing. That overflow context would
+  //       otherwise vertically clip each .crumb-menu when it opens, so
+  //       every menu is moved to document.body and re-positioned
+  //       position: fixed at the toggle's viewport rect. Position is
+  //       viewport-clamped — menus near the left drop down-right, menus
+  //       near the right drop down-left, neither overflows. Any scroll
+  //       closes them so they never float around detached from a toggle.
+  //
+  //    3. SCROLL FADE — mask-image on .breadcrumbs fades the right edge
+  //       when there's more content to scroll, and the left edge once
+  //       scrolled past the start, as a swipe affordance.
+  //
+  //  All of this is progressive: if the JS doesn't run, the server's
+  //  flat breadcrumb still renders fine.
+  // ====================================================================
+
+  (function setupBreadcrumb() {
+    const breadcrumbs = document.querySelector('.breadcrumbs');
+    if (!breadcrumbs) return;
+
+    const originalFork = breadcrumbs.querySelector('.breadcrumb-fork');
+    if (originalFork) nestForkAndAddSvgBranches(originalFork);
+    setupCrumbDropdownPopout(breadcrumbs);
+    setupScrollFade(breadcrumbs);
+
+    // ----- 1. Nested tree restructure + SVG branches -----------------
+
+    function nestForkAndAddSvgBranches(originalFork) {
+      const idOf = crumb => {
+        const link = crumb.querySelector('a[href^="/inscription/"]');
+        return link
+          ? link.getAttribute('href').slice('/inscription/'.length)
+          : null;
+      };
+
+      // Each fork row -> array of { id, element } crumbs.
+      const trails = Array
+        .from(originalFork.querySelectorAll(':scope > .breadcrumb-fork-row'))
+        .map(row => Array
+          .from(row.querySelectorAll(':scope > .crumb'))
+          .map(c => ({ id: idOf(c), element: c })));
+
+      if (trails.length < 2) return;
+
+      // Recursively group trails by their leading crumb id. Single-trail
+      // groups become leaves; multi-trail groups factor out their longest
+      // common prefix and recurse on the divergent tails.
+      const buildTree = trails => {
+        if (trails.length === 0) return [];
+        if (trails.length === 1) return [{ type: 'leaf', crumbs: trails[0] }];
+
+        const groups = [];
+        for (const trail of trails) {
+          if (trail.length === 0) continue;
+          const id = trail[0].id;
+          let g = groups.find(g => g.id === id);
+          if (!g) { g = { id, trails: [] }; groups.push(g); }
+          g.trails.push(trail);
+        }
+
+        const nodes = [];
+        for (const { trails: gTrails } of groups) {
+          if (gTrails.length === 1) {
+            nodes.push({ type: 'leaf', crumbs: gTrails[0] });
+            continue;
+          }
+          let prefixLen = 0;
+          const minLen = Math.min(...gTrails.map(t => t.length));
+          while (prefixLen < minLen
+            && gTrails.every(t => t[prefixLen].id === gTrails[0][prefixLen].id)) {
+            prefixLen++;
+          }
+          const sharedPrefix = gTrails[0].slice(0, prefixLen);
+          const subTrails = gTrails
+            .map(t => t.slice(prefixLen))
+            .filter(t => t.length > 0);
+          nodes.push({
+            type: 'branch',
+            prefix: sharedPrefix,
+            children: subTrails.length > 0 ? buildTree(subTrails) : [],
+          });
+        }
+        return nodes;
+      };
+
+      const tree = buildTree(trails);
+
+      // Build the nested DOM. At each fork level a .breadcrumb-tree-group
+      // wraps an <svg> branch + its .breadcrumb-fork. allGroups is filled
+      // bottom-up by the recursion, so we can compute SVG paths after
+      // layout in insertion order (innermost first).
+      const SVG_NS = 'http://www.w3.org/2000/svg';
+      const STEM_FRACTION = 0.45; // x-position of the junction inside the SVG
+      const allGroups = [];
+
+      const renderForkGroup = nodes => {
+        const fork = document.createElement('div');
+        fork.className = 'breadcrumb-fork';
+
+        nodes.forEach(node => {
+          const row = document.createElement('div');
+          row.className = 'breadcrumb-fork-row';
+          row.appendChild(document.createTextNode('/'));
+          const inline = node.type === 'leaf' ? node.crumbs : node.prefix;
+          inline.forEach((c, i) => {
+            if (i > 0) row.appendChild(document.createTextNode('/'));
+            row.appendChild(c.element);
+          });
+          if (node.type === 'branch' && node.children.length > 0) {
+            row.appendChild(renderForkGroup(node.children));
+          }
+          fork.appendChild(row);
+        });
+
+        const svg = document.createElementNS(SVG_NS, 'svg');
+        svg.setAttribute('viewBox', '0 0 100 100');
+        svg.setAttribute('preserveAspectRatio', 'none');
+        svg.classList.add('breadcrumb-tree-branch');
+        const path = document.createElementNS(SVG_NS, 'path');
+        path.setAttribute('stroke', 'currentColor');
+        path.setAttribute('stroke-width', '2');
+        path.setAttribute('fill', 'none');
+        path.setAttribute('vector-effect', 'non-scaling-stroke');
+        path.setAttribute('stroke-linecap', 'square');
+        path.setAttribute('stroke-linejoin', 'miter');
+        svg.appendChild(path);
+
+        const group = document.createElement('span');
+        group.className = 'breadcrumb-tree-group';
+        group.appendChild(svg);
+        group.appendChild(fork);
+
+        allGroups.push({ fork, svg, path });
+        return group;
+      };
+
+      const outerGroup = renderForkGroup(tree);
+      originalFork.parentNode.replaceChild(outerGroup, originalFork);
+
+      // Set each SVG path. Arm y-positions are measured against actual row
+      // positions so they line up on each row's vertical centre even when
+      // one row is taller than its siblings (e.g. a branch row whose
+      // content includes a sub-fork-group).
+      const jx = STEM_FRACTION * 100;
+      allGroups.forEach(({ fork, svg, path }) => {
+        const forkRect = fork.getBoundingClientRect();
+        const forkHeight = forkRect.height;
+        if (forkHeight === 0) return;
+        svg.style.height = forkHeight + 'px';
+        let d = `M0 50 H${jx}`;
+        const rows = Array
+          .from(fork.querySelectorAll(':scope > .breadcrumb-fork-row'));
+        rows.forEach(row => {
+          const rowRect = row.getBoundingClientRect();
+          const centerY = (rowRect.top + rowRect.bottom) / 2 - forkRect.top;
+          const yPct = (centerY / forkHeight) * 100;
+          d += ` M${jx} 50 L${jx} ${yPct} L100 ${yPct}`;
+        });
+        path.setAttribute('d', d);
+      });
+    }
+
+    // ----- 2. Dropdown popout ----------------------------------------
+
+    function setupCrumbDropdownPopout(breadcrumbs) {
+      const menuPairs = [];
+
+      breadcrumbs.querySelectorAll('.crumb-toggle').forEach(originalToggle => {
+        const menu = originalToggle.nextElementSibling;
+        if (!menu || !menu.classList.contains('crumb-menu')) return;
+
+        // Preserve inherited color/font before pulling the menu out of
+        // .breadcrumb (where `color: inherit` gives the breadcrumb's muted
+        // tone; out in body it would otherwise pick up the default link
+        // colour).
+        const cs = window.getComputedStyle(menu);
+        const inheritedColor = cs.color;
+        const inheritedFont = cs.fontFamily;
+        const inheritedSize = cs.fontSize;
+
+        // Clone the toggle to drop any prior click handler (the global
+        // outside-click listener still applies — see below), so we own the
+        // open/close + positioning fully.
+        const toggle = originalToggle.cloneNode(true);
+        originalToggle.parentNode.replaceChild(toggle, originalToggle);
+
+        // Move the menu to body so no overflow ancestor can clip it.
+        document.body.appendChild(menu);
+        menu.style.color = inheritedColor;
+        menu.style.fontFamily = inheritedFont;
+        menu.style.fontSize = inheritedSize;
+        menu.querySelectorAll('a').forEach(a => {
+          a.style.color = 'inherit';
+          a.style.textDecoration = 'none';
+        });
+
+        const positionMenu = () => {
+          const rect = toggle.getBoundingClientRect();
+          const margin = 8;
+          const vw = window.innerWidth;
+          menu.style.position = 'fixed';
+          menu.style.zIndex = '1000';
+          menu.style.top = (rect.bottom + 4) + 'px';
+          // Default: drop down-right, align menu's left with toggle's left.
+          menu.style.left = rect.left + 'px';
+          menu.style.right = 'auto';
+          const mw = menu.offsetWidth;
+          if (rect.left + mw > vw - margin) {
+            // Wouldn't fit going right — try right-align (drop down-left).
+            menu.style.left = 'auto';
+            menu.style.right = (vw - rect.right) + 'px';
+            if (rect.right - mw < margin) {
+              // Wouldn't fit either way — clamp to viewport with margin.
+              menu.style.left = margin + 'px';
+              menu.style.right = 'auto';
+            }
+          }
+        };
+
+        toggle.addEventListener('click', e => {
+          e.stopPropagation();
+          const wasOpen = menu.classList.contains('open');
+          document
+            .querySelectorAll('.crumb-menu.open, .title-dropdown-menu.open')
+            .forEach(m => m.classList.remove('open'));
+          if (!wasOpen) {
+            menu.classList.add('open');
+            positionMenu();
+          }
+        });
+        menuPairs.push({ toggle, menu });
+      });
+
+      // Any scroll closes any open menu so it never floats around detached
+      // from its toggle.
+      const closeAll = () =>
+        menuPairs.forEach(({ menu }) => menu.classList.remove('open'));
+      window.addEventListener('scroll', closeAll, { passive: true });
+      breadcrumbs.addEventListener('scroll', closeAll, { passive: true });
+    }
+
+    // ----- 3. Scroll affordance fade ---------------------------------
+
+    function setupScrollFade(breadcrumbs) {
+      const FADE = '2rem';
+      const update = () => {
+        const hasOverflow =
+          breadcrumbs.scrollWidth > breadcrumbs.clientWidth + 1;
+        const atStart = breadcrumbs.scrollLeft <= 1;
+        const atEnd = breadcrumbs.scrollLeft + breadcrumbs.clientWidth
+          >= breadcrumbs.scrollWidth - 1;
+        const fadeLeft = hasOverflow && !atStart;
+        const fadeRight = hasOverflow && !atEnd;
+        const left = fadeLeft
+          ? `transparent 0, black ${FADE}`
+          : 'black 0';
+        const right = fadeRight
+          ? `black calc(100% - ${FADE}), transparent 100%`
+          : 'black 100%';
+        const gradient = `linear-gradient(to right, ${left}, ${right})`;
+        breadcrumbs.style.maskImage = gradient;
+        breadcrumbs.style.webkitMaskImage = gradient;
+      };
+      update();
+      breadcrumbs.addEventListener('scroll', update, { passive: true });
+      window.addEventListener('resize', update, { passive: true });
+    }
+  })();
+
+  addEventListener('click', () => {
+    for (let m of document.querySelectorAll('.crumb-menu.open, .title-dropdown-menu.open')) {
+      m.classList.remove('open');
+    }
+  });
+
   resize();
 });
diff --git a/static/link.svg b/static/link.svg
new file mode 100644
index 0000000000..f62f24f2b3
--- /dev/null
+++ b/static/link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#a1adb8"><path d="M352 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9L370.7 96 201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L416 141.3l41.4 41.4c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V32c0-17.7-14.3-32-32-32H352zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>
diff --git a/static/marketplace.svg b/static/marketplace.svg
new file mode 100644
index 0000000000..680a108e89
--- /dev/null
+++ b/static/marketplace.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="#a1adb8"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M160 112c0-35.3 28.7-64 64-64s64 28.7 64 64l0 48-128 0 0-48zm-48 48l-64 0c-26.5 0-48 21.5-48 48L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-208c0-26.5-21.5-48-48-48l-64 0 0-48C336 50.1 285.9 0 224 0S112 50.1 112 112l0 48zm24 48a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm152 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"/></svg>
diff --git a/static/marketplaces.js b/static/marketplaces.js
new file mode 100644
index 0000000000..2f11ca9794
--- /dev/null
+++ b/static/marketplaces.js
@@ -0,0 +1,32 @@
+// Off-chain marketplace links for ordinals.gallery collections.
+//
+// This is intentionally NOT derived from on-chain data. Marketplaces use
+// different slugs for the same collection (e.g. Bitcoin Rocks is "bitcoinrocks"
+// on Satflow but "bitcoin-rocks" on Ordinals Wallet), so we track each
+// marketplace's slug per gallery by hand here. This file is the entire data
+// layer for the feature — index.js reads it to render the marketplace dropdown.
+// Nothing here touches ord's Rust/server/index code, so it survives upstream
+// ordinals.com updates.
+
+// Marketplace URL prefixes. Only the trailing slug varies per collection.
+const MARKETPLACES = {
+  satflow:        { name: 'Satflow',         base: 'https://www.satflow.com/ordinals/' },
+  ordnet:         { name: 'Ordnet',          base: 'https://ord.net/collection/' },
+  ordinalswallet: { name: 'Ordinals Wallet', base: 'https://ordinalswallet.com/collection/' },
+};
+
+// Gallery (collection) inscription id -> { marketplaceKey: slug }.
+// Omit a marketplace if the collection isn't listed there; the dropdown skips it.
+const GALLERY_MARKETPLACES = {
+  // Bitcoin Shrooms
+  'e8397d69efd07b1e8ba995e5d138b66ca1d87910ee5f0001b6ab50693d8f5f0ei0': {
+    satflow: 'bitcoinshrooms',
+    ordnet: 'bitcoinshrooms',
+    ordinalswallet: 'bitcoinshrooms',
+  },
+  // Bitcoin Rocks — slugs differ per marketplace; Ordnet slug unknown (omitted)
+  'BITCOIN_ROCKS_INSCRIPTION_ID': {
+    satflow: 'bitcoinrocks',
+    ordinalswallet: 'bitcoin-rocks',
+  },
+};
diff --git a/static/museum.svg b/static/museum.svg
new file mode 100644
index 0000000000..dea99a0a29
--- /dev/null
+++ b/static/museum.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#a1adb8"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M243.4 2.6l-224 96c-14 6-21.8 21-18.7 35.8S16.8 160 32 160l0 8c0 13.3 10.7 24 24 24l400 0c13.3 0 24-10.7 24-24l0-8c15.2 0 28.3-10.7 31.3-25.6s-4.8-29.9-18.7-35.8l-224-96c-8-3.4-17.2-3.4-25.2 0zM128 224l-64 0 0 196.3c-.6 .3-1.2 .7-1.8 1.1l-48 32c-11.7 7.8-17 22.4-12.9 35.9S17.9 512 32 512l448 0c14.1 0 26.5-9.2 30.6-22.7s-1.1-28.1-12.9-35.9l-48-32c-.6-.4-1.2-.7-1.8-1.1L448 224l-64 0 0 192-40 0 0-192-64 0 0 192-48 0 0-192-64 0 0 192-40 0 0-192zM256 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>
\ No newline at end of file
diff --git a/static/ordinals.svg b/static/ordinals.svg
new file mode 100644
index 0000000000..208f1aedbb
--- /dev/null
+++ b/static/ordinals.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1000 -1000 2000 2000" fill="#a1adb8" stroke="#a1adb8"><circle r="960" fill-opacity="0" stroke-width="80"/><circle r="675" stroke-opacity="0"/></svg>
diff --git a/static/preview-image.js b/static/preview-image.js
index a6b62f5828..9c9ef923e4 100644
--- a/static/preview-image.js
+++ b/static/preview-image.js
@@ -1,15 +1,18 @@
+if (window !== window.top) {
+  document.documentElement.style.backgroundColor = 'transparent';
+}
+
 function resize() {
   if (
-    body.clientWidth * window.devicePixelRatio < img.naturalWidth
-    || body.clientHeight * window.devicePixelRatio < img.naturalHeight
+    img.clientWidth * window.devicePixelRatio < img.naturalWidth
+    || img.clientHeight * window.devicePixelRatio < img.naturalHeight
   ) {
-    body.style.imageRendering = 'auto';
+    img.style.imageRendering = 'auto';
   } else {
-    body.removeAttribute('style');
+    img.removeAttribute('style');
   }
 }
 
-let body = document.body;
 let img = document.getElementsByTagName('img')[0];
 
-(new ResizeObserver(resize)).observe(body);
+(new ResizeObserver(resize)).observe(document.body);
diff --git a/static/skull.svg b/static/skull.svg
new file mode 100644
index 0000000000..27e2e63ba1
--- /dev/null
+++ b/static/skull.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#a1adb8"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M416 398.9c58.5-41.1 96-104.1 96-174.9C512 100.3 397.4 0 256 0S0 100.3 0 224c0 70.7 37.5 133.8 96 174.9c0 .4 0 .7 0 1.1l0 64c0 26.5 21.5 48 48 48l48 0 0-64c0-8.8 7.2-16 16-16s16 7.2 16 16l0 64 64 0 0-64c0-8.8 7.2-16 16-16s16 7.2 16 16l0 64 48 0c26.5 0 48-21.5 48-48l0-64c0-.4 0-.7 0-1.1zM96 256a64 64 0 1 1 128 0A64 64 0 1 1 96 256zm256-64a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>
diff --git a/static/theme-init.js b/static/theme-init.js
new file mode 100644
index 0000000000..4989aa3241
--- /dev/null
+++ b/static/theme-init.js
@@ -0,0 +1,4 @@
+(function() {
+  var t = localStorage.getItem('theme') || 'dark';
+  document.documentElement.setAttribute('data-theme', t);
+})();
diff --git a/static/theme.svg b/static/theme.svg
new file mode 100644
index 0000000000..70cf629446
--- /dev/null
+++ b/static/theme.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#a1adb8"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M448 256c0-106-86-192-192-192L256 448c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"/></svg>
diff --git a/static/view-grid.svg b/static/view-grid.svg
new file mode 100644
index 0000000000..adde03b099
--- /dev/null
+++ b/static/view-grid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#a1adb8"><rect x="32" y="32" width="208" height="208" rx="16"/><rect x="272" y="32" width="208" height="208" rx="16"/><rect x="32" y="272" width="208" height="208" rx="16"/><rect x="272" y="272" width="208" height="208" rx="16"/></svg>
diff --git a/static/view-strip.svg b/static/view-strip.svg
new file mode 100644
index 0000000000..7b787b9fdf
--- /dev/null
+++ b/static/view-strip.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#a1adb8"><rect x="32" y="176" width="128" height="160" rx="16"/><rect x="192" y="176" width="128" height="160" rx="16"/><rect x="352" y="176" width="128" height="160" rx="16"/></svg>
diff --git a/static/x.svg b/static/x.svg
new file mode 100644
index 0000000000..c706402f77
--- /dev/null
+++ b/static/x.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#a1adb8"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
diff --git a/templates/address.html b/templates/address.html
index bf7263a344..830e6da979 100644
--- a/templates/address.html
+++ b/templates/address.html
@@ -7,8 +7,8 @@ <h1>Address {{ self.address }}</h1>
 %% if let Some(inscriptions) = self.inscriptions.as_ref().filter(|inscriptions| !inscriptions.is_empty()) {
   <dt>inscriptions</dt>
   <dd class=thumbnails>
-%% for inscription in inscriptions {
-    {{Iframe::thumbnail(*inscription)}}
+%% for (inscription, media) in inscriptions {
+    {{Iframe::thumbnail(*inscription, *media)}}
 %% }
   </dd>
 %% }
diff --git a/templates/block.html b/templates/block.html
index 1f3cdc6096..f9908146ba 100644
--- a/templates/block.html
+++ b/templates/block.html
@@ -31,8 +31,8 @@ <h2>{{"Rune".tally(self.runes.len())}}</h2>
 %% }
 <h2>{{"Inscription".tally(self.inscription_count)}}</h2>
 <div class=thumbnails>
-%% for id in &self.featured_inscriptions {
-    {{ Iframe::thumbnail(*id) }}
+%% for (id, media) in &self.featured_inscriptions {
+    {{ Iframe::thumbnail(*id, *media) }}
 %% }
 </div>
 %% if &self.inscription_count > &self.featured_inscriptions.len() {
diff --git a/templates/blocks.html b/templates/blocks.html
index a957ebb856..73322ac536 100644
--- a/templates/blocks.html
+++ b/templates/blocks.html
@@ -5,8 +5,8 @@ <h1>Blocks</h1>
 <div class=block>
   <h2><a href=/block/{{ height }}>Block {{ height }}</a></h2>
   <div class=thumbnails>
-%%     for id in *inscription_ids {
-    {{ Iframe::thumbnail(*id) }}
+%%     for (j, id) in inscription_ids.iter().enumerate() {
+    {{ Iframe::thumbnail(*id, self.featured_medias.get(hash).and_then(|medias| medias.get(j)).copied().flatten()) }}
 %%     }
   </div>
 </div>
diff --git a/templates/children.html b/templates/children.html
index e82c98e140..201b7c80b8 100644
--- a/templates/children.html
+++ b/templates/children.html
@@ -3,8 +3,8 @@ <h1><a href=/inscription/{{ self.parent }}>Inscription {{ self.parent_number }}<
 <h3>No children</h3>
 %% } else {
 <div class=thumbnails>
-%% for id in &self.children {
-  {{ Iframe::thumbnail(*id) }}
+%% for (id, media) in &self.children {
+  {{ Iframe::thumbnail(*id, *media) }}
 %% }
 </div>
 <div class=center>
diff --git a/templates/collections.html b/templates/collections.html
index 96148916c6..86141225d9 100644
--- a/templates/collections.html
+++ b/templates/collections.html
@@ -1,7 +1,7 @@
 <h1>Collections</h1>
 <div class=thumbnails>
-%% for id in &self.inscriptions {
-  {{Iframe::thumbnail(*id)}}
+%% for (id, media) in &self.inscriptions {
+  {{Iframe::thumbnail(*id, *media)}}
 %% }
 </div>
 <div class=center>
diff --git a/templates/coming-soon.html b/templates/coming-soon.html
new file mode 100644
index 0000000000..f465719a85
--- /dev/null
+++ b/templates/coming-soon.html
@@ -0,0 +1 @@
+<h1>Coming Soon.</h1>
diff --git a/templates/galleries.html b/templates/galleries.html
index 2d973c7b17..fd5b80a828 100644
--- a/templates/galleries.html
+++ b/templates/galleries.html
@@ -1,7 +1,7 @@
 <h1>Galleries</h1>
 <div class=thumbnails>
-%% for id in &self.inscriptions {
-  {{Iframe::thumbnail(*id)}}
+%% for (id, media) in &self.inscriptions {
+  {{Iframe::thumbnail(*id, *media)}}
 %% }
 </div>
 <div class=center>
diff --git a/templates/gallery.html b/templates/gallery.html
index df6fb37472..0bf5359bfb 100644
--- a/templates/gallery.html
+++ b/templates/gallery.html
@@ -1,10 +1,14 @@
-<h1><a href=/inscription/{{ self.id }}>Inscription {{ self.number }}</a> Gallery</h1>
+%% if let Some(title) = &self.title {
+<h1><a href=/inscription/{{ self.id }}>{{ title }}</a> / Gallery</h1>
+%% } else {
+<h1><a href=/inscription/{{ self.id }}>Inscription {{ self.number }}</a> / Gallery</h1>
+%% }
 %% if self.items.is_empty() {
 <h3>No gallery items</h3>
 %% } else {
 <div class=thumbnails>
-%% for (i, id) in &self.items {
-  {{ Iframe::item(self.id, *i, *id) }}
+%% for (i, id, media) in &self.items {
+  {{ Iframe::item(self.id, *i, *id, *media) }}
 %% }
 </div>
 <div class=center>
diff --git a/templates/home.html b/templates/home.html
index 6c7220aede..5382f38e46 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -1,6 +1,6 @@
 <h1>Latest Inscriptions</h1>
 <div class=thumbnails>
-%% for inscription in &self.inscriptions {
-  {{ Iframe::thumbnail(*inscription) }}
+%% for (inscription, media) in &self.inscriptions {
+  {{ Iframe::thumbnail(*inscription, *media) }}
 %% }
 </div>
diff --git a/templates/inscription.html b/templates/inscription.html
index 439c018b71..cceb4624b1 100644
--- a/templates/inscription.html
+++ b/templates/inscription.html
@@ -1,7 +1,16 @@
-<h1>Inscription {{ self.number }}</h1>
 %% if let Some(title) = &self.properties.attributes.title {
-<p class=subtitle>{{ title }}</p>
+<h1>{{ title }}</h1>
+%% } else if let Some(text) = text_title(&self.inscription) {
+<h1>{{ text }}</h1>
+%% } else {
+<h1>Inscription {{ self.number }}</h1>
 %% }
+<div class=subtitle-row>
+%% if self.properties.attributes.title.is_some() || text_title(&self.inscription).is_some() {
+  <p class=subtitle>Inscription {{ self.number }}</p>
+%% }
+  <div class=title-links></div>
+</div>
 <div class=inscription>
 %% if let Some(previous) = self.previous {
 <a class=prev href=/inscription/{{previous}}>❮</a>
@@ -15,13 +24,113 @@ <h1>Inscription {{ self.number }}</h1>
 <div>❯</div>
 %% }
 </div>
+%% if !self.breadcrumbs.is_empty() {
+%% let layout = self.breadcrumb_layout();
+<div class=breadcrumbs>
+<div class=breadcrumb>
+%% for (i, crumb) in layout.prefix.iter().enumerate() {
+<span class=crumb>
+<a href=/inscription/{{ crumb.id }}>{{ crumb.title }}</a>
+%% if !crumb.reinscriptions.is_empty() || !crumb.children.is_empty() {
+<button class=crumb-toggle type=button aria-label=reinscriptions></button>
+<span class=crumb-menu>
+%% for reinscription in &crumb.reinscriptions {
+<a href=/inscription/{{ reinscription.id }}>{{ reinscription.label }}</a>
+%% }
+%% if !crumb.reinscriptions.is_empty() && !crumb.children.is_empty() {
+<div class=crumb-menu-divider></div>
+%% }
+%% for child in &crumb.children {
+<a href=/inscription/{{ child.id }}>{{ child.label }}</a>
+%% }
+%% if crumb.more_children {
+<a href=/children/{{ crumb.id }}>all children</a>
+%% }
+</span>
+%% }
+</span>
+%% if i + 1 < layout.prefix.len() {
+/
+%% }
+%% }
+%% if layout.middles.len() > 1 {
+<div class=breadcrumb-fork>
+%% for middle in &layout.middles {
+<div class=breadcrumb-fork-row>
+%% if !middle.is_empty() {
+/
+%% for (j, crumb) in middle.iter().enumerate() {
+<span class=crumb>
+<a href=/inscription/{{ crumb.id }}>{{ crumb.title }}</a>
+%% if !crumb.reinscriptions.is_empty() || !crumb.children.is_empty() {
+<button class=crumb-toggle type=button aria-label=reinscriptions></button>
+<span class=crumb-menu>
+%% for reinscription in &crumb.reinscriptions {
+<a href=/inscription/{{ reinscription.id }}>{{ reinscription.label }}</a>
+%% }
+%% if !crumb.reinscriptions.is_empty() && !crumb.children.is_empty() {
+<div class=crumb-menu-divider></div>
+%% }
+%% for child in &crumb.children {
+<a href=/inscription/{{ child.id }}>{{ child.label }}</a>
+%% }
+%% if crumb.more_children {
+<a href=/children/{{ crumb.id }}>all children</a>
+%% }
+</span>
+%% }
+</span>
+%% if j + 1 < middle.len() {
+/
+%% }
+%% }
+%% }
+</div>
+%% }
+</div>
+%% }
+%% if !layout.suffix.is_empty() && (!layout.prefix.is_empty() || layout.middles.len() > 1) {
+/
+%% }
+%% for (i, crumb) in layout.suffix.iter().enumerate() {
+<span class=crumb>
+%% if i + 1 < layout.suffix.len() {
+<a href=/inscription/{{ crumb.id }}>{{ crumb.title }}</a>
+%% } else {
+<span class=current>{{ crumb.title }}</span>
+%% }
+%% if !crumb.reinscriptions.is_empty() || !crumb.children.is_empty() {
+<button class=crumb-toggle type=button aria-label=reinscriptions></button>
+<span class=crumb-menu>
+%% for reinscription in &crumb.reinscriptions {
+<a href=/inscription/{{ reinscription.id }}>{{ reinscription.label }}</a>
+%% }
+%% if !crumb.reinscriptions.is_empty() && !crumb.children.is_empty() {
+<div class=crumb-menu-divider></div>
+%% }
+%% for child in &crumb.children {
+<a href=/inscription/{{ child.id }}>{{ child.label }}</a>
+%% }
+%% if crumb.more_children {
+<a href=/children/{{ crumb.id }}>all children</a>
+%% }
+</span>
+%% }
+</span>
+%% if i + 1 < layout.suffix.len() {
+/
+%% }
+%% }
+</div>
+</div>
+%% }
 <dl>
 %% if !&self.parents.is_empty() {
   <dt>parents</dt>
   <dd>
     <div class=thumbnails>
-%% for parent in &self.parents {
-      {{Iframe::thumbnail(*parent)}}
+%% for (parent, media) in &self.parents {
+      {{Iframe::thumbnail(*parent, *media)}}
 %% }
     </div>
     <div class=center>
@@ -30,12 +139,21 @@ <h1>Inscription {{ self.number }}</h1>
   </dd>
 %% }
 %% if !self.children.is_empty() {
-  <dt>children</dt>
+  <dt class=with-toolbar>children
+    <div class=gallery-toolbar>
+      <button class="gallery-view-btn active" type=button data-mode=scroll aria-label="strip view"><img class=icon src=/static/view-strip.svg></button>
+      <button class=gallery-view-btn type=button data-mode=all aria-label="grid view"><img class=icon src=/static/view-grid.svg></button>
+    </div>
+  </dt>
   <dd>
-    <div class=thumbnails>
-%% for id in &self.children {
-      {{Iframe::thumbnail(*id)}}
+    <div class="gallery-row gallery-mode-scroll" data-gallery-total="{{ self.child_count }}" data-load-more-url="/r/children/{{ self.id }}">
+      <button class=gallery-prev type=button aria-label="previous">❮</button>
+      <div class=thumbnails>
+%% for (id, media) in &self.children {
+        {{ Iframe::thumbnail(*id, *media) }}
 %% }
+      </div>
+      <button class=gallery-next type=button aria-label="next">❯</button>
     </div>
     <div class=center>
       <a href=/children/{{self.id}}>all ({{ self.child_count }})</a>
@@ -43,12 +161,21 @@ <h1>Inscription {{ self.number }}</h1>
   </dd>
 %% }
 %% if !self.properties.gallery.is_empty() {
-  <dt>gallery</dt>
+  <dt class=with-toolbar>gallery
+    <div class=gallery-toolbar>
+      <button class="gallery-view-btn active" type=button data-mode=scroll aria-label="strip view"><img class=icon src=/static/view-strip.svg></button>
+      <button class=gallery-view-btn type=button data-mode=all aria-label="grid view"><img class=icon src=/static/view-grid.svg></button>
+    </div>
+  </dt>
   <dd>
-    <div class=thumbnails>
-%% for (i, item) in self.properties.gallery.iter().enumerate().take(4) {
-      {{ Iframe::item(self.id, i, item.id()) }}
+    <div class="gallery-row gallery-mode-scroll" data-gallery-total="{{ self.properties.gallery.len() }}">
+      <button class=gallery-prev type=button aria-label="previous">❮</button>
+      <div class=thumbnails>
+%% for (i, item) in self.properties.gallery.iter().enumerate() {
+        {{ Iframe::item(self.id, i, item.id(), self.gallery_media.get(i).copied().flatten()) }}
 %% }
+      </div>
+      <button class=gallery-next type=button aria-label="next">❯</button>
     </div>
     <div class=center>
       <a href=/gallery/{{self.id}}>all ({{ self.properties.gallery.len() }})</a>
diff --git a/templates/inscriptions-block.html b/templates/inscriptions-block.html
index cfd5ebfadf..abbd5fcdae 100644
--- a/templates/inscriptions-block.html
+++ b/templates/inscriptions-block.html
@@ -1,7 +1,7 @@
 <h1>Inscriptions in <a href=/block/{{ &self.block }}>Block {{ &self.block }}</a></h1>
 <div class=thumbnails>
-%% for id in &self.inscriptions {
-  {{ Iframe::thumbnail(*id) }}
+%% for (id, media) in &self.inscriptions {
+  {{ Iframe::thumbnail(*id, *media) }}
 %% }
 </div>
 <div class=center>
diff --git a/templates/inscriptions.html b/templates/inscriptions.html
index 61535d00f0..e7f8c96a58 100644
--- a/templates/inscriptions.html
+++ b/templates/inscriptions.html
@@ -1,17 +1,29 @@
 <h1>All Inscriptions</h1>
+<form class=inscriptions-toolbar action=/inscriptions method=get>
+  <label class="toolbar-btn cursed-toggle" title="show cursed only">
+    <input type=checkbox name=cursed value=1{{self.cursed_checked()}}>
+    <img class=icon src=/static/skull.svg>
+  </label>
+  <label class=toolbar-select>
+    <select name=sort>
+      <option value=newest{{self.selected_if(Sort::Newest)}}>Recently Inscribed</option>
+      <option value=oldest{{self.selected_if(Sort::Oldest)}}>Earliest Inscribed</option>
+    </select>
+  </label>
+</form>
 <div class=thumbnails>
-%% for id in &self.inscriptions {
-  {{Iframe::thumbnail(*id)}}
+%% for (id, media) in &self.inscriptions {
+  {{Iframe::thumbnail(*id, *media)}}
 %% }
 </div>
 <div class=center>
 %% if let Some(prev) = self.prev {
-<a class=prev href=/inscriptions/{{prev}}>prev</a>
+<a class=prev href=/inscriptions/{{prev}}{{self.query_string()}}>prev</a>
 %% } else {
 prev
 %% }
 %% if let Some(next) = self.next {
-<a class=next href=/inscriptions/{{next}}>next</a>
+<a class=next href=/inscriptions/{{next}}{{self.query_string()}}>next</a>
 %% } else {
 next
 %% }
diff --git a/templates/item.html b/templates/item.html
index b47c8a4e10..de9a0cf04a 100644
--- a/templates/item.html
+++ b/templates/item.html
@@ -1,14 +1,37 @@
-<h1>Gallery {{ self.gallery_number }} Item {{ self.i }}</h1>
 %% if let Some(title) = &self.item.attributes.title {
-<p class=subtitle>{{ title }}</p>
+<h1>{{ title }}</h1>
+%% } else {
+<h1>Gallery {{ self.gallery_number }} Item {{ self.i }}</h1>
+%% }
+<div class=subtitle-row>
+%% if self.item.attributes.title.is_some() {
+  <p class=subtitle><a href=/inscription/{{ self.gallery_id }}>
+%% if let Some(gallery_title) = &self.gallery_title {
+{{ gallery_title }}
+%% } else {
+Gallery {{ self.gallery_number }}
+%% }
+</a> / Item {{ self.i }}</p>
+%% }
+  <div class=title-links data-ord-path=/inscription/{{ self.item.id() }}></div>
+</div>
+<div class="inscription gallery-item-nav">
+%% if self.i > 0 {
+<a class=prev href=/gallery/{{self.gallery_id}}/{{self.i - 1}}>❮</a>
+%% } else {
+<div>❮</div>
 %% }
-<div class=inscription>
 {{ Iframe::main(self.item.id()) }}
+%% if self.i + 1 < self.total {
+<a class=next href=/gallery/{{self.gallery_id}}/{{self.i + 1}}>❯</a>
+%% } else {
+<div>❯</div>
+%% }
 </div>
 <dl>
   <dt>inscription</dt>
-  <dd><a href=/inscription/{{ self.item.id() }}>{{ self.item.id() }}</a></dd>
+  <dd><a class=collapse href=/inscription/{{ self.item.id() }}>{{ self.item.id() }}</a></dd>
   <dt>gallery</dt>
-  <dd><a href=/inscription/{{ self.gallery_id }}>{{ self.gallery_id }}</a></dd>
+  <dd><a class=collapse href=/inscription/{{ self.gallery_id }}>{{ self.gallery_id }}</a></dd>
   {{ Trusted(AttributesHtml(&self.item.attributes)) }}
 </dl>
diff --git a/templates/output.html b/templates/output.html
index 5bfd2d091c..2054955426 100644
--- a/templates/output.html
+++ b/templates/output.html
@@ -3,8 +3,8 @@ <h1>Output <span class=monospace>{{self.outpoint}}</span></h1>
 %% if let Some(inscriptions) = self.inscriptions.as_ref().filter(|inscriptions| !inscriptions.is_empty()) {
   <dt>inscriptions</dt>
   <dd class=thumbnails>
-%% for inscription in inscriptions {
-    {{Iframe::thumbnail(*inscription)}}
+%% for (inscription, media) in inscriptions {
+    {{Iframe::thumbnail(*inscription, *media)}}
 %% }
   </dd>
 %% }
diff --git a/templates/page.html b/templates/page.html
index 4087b75d3e..29950eedfb 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -12,28 +12,32 @@
 $$ Trusted(self.oembed_link())
     <link rel=icon href=/static/favicon.png>
     <link rel=icon href=/static/favicon.svg>
+    <script src=/static/theme-init.js></script>
     <link rel=stylesheet href=/static/index.css>
     <link rel=stylesheet href=/static/modern-normalize.css>
+    <script src=/static/marketplaces.js></script>
     <script src=/static/index.js></script>
     <script src=/static/inscription-embed.js defer></script>
   </head>
   <body>
   <header>
     <nav>
-      <a href=/ title=home>Ordinals<sup>{{ self.superscript() }}</sup></a>
+      <a href=/ title=home>{{ self.home_text() }}<sup>{{ self.superscript() }}</sup></a>
       <a href=/inscriptions title=inscriptions><img class=icon src=/static/images.svg></a>
       <a href=/runes title=runes><img class=icon src=/static/rune.svg></a>
       <a href=/collections title=collections><img class=icon src=/static/diagram-project.svg></a>
       <a href=/galleries title=galleries><img class=icon src=/static/box-archive.svg></a>
       <a href=/blocks title=blocks><img class=icon src=/static/cubes.svg></a>
       <a href=/clock title=clock><img class=icon src=/static/clock.svg></a>
-      <a href=https://testnet.ordinals.gallery/ title=testnet><img class=icon src=/static/wand.svg></a>
 %% if self.config.index_sats {
       <a href=/rare.txt title=rare><img class=icon src=/static/gem.svg></a>
 %% }
       <a href=https://docs.ordinals.com/ title=handbook><img class=icon src=/static/book.svg></a>
       <a href=https://github.com/ordinals/ord title=github><img class=icon src=/static/github.svg></a>
       <a href=https://discord.com/invite/ordinals title=discord><img class=icon src=/static/discord.svg></a>
+      <a href=https://testnet.ordinals.gallery/ title=testnet><img class=icon src=/static/wand.svg></a>
+      <a href=/museum title=museum><img class=icon src=/static/museum.svg></a>
+      <button id=theme-toggle type=button class=nav-button title='switch theme' aria-label='switch theme'><img class=icon src=/static/theme.svg></button>
       <form action=/search method=get>
         <input type=text autocapitalize=off autocomplete=off autocorrect=off name=query spellcheck=false>
         <input class=icon type=image src=/static/magnifying-glass.svg alt=Search>
diff --git a/templates/parents.html b/templates/parents.html
index 9612de657a..0e586dd280 100644
--- a/templates/parents.html
+++ b/templates/parents.html
@@ -3,8 +3,8 @@ <h1><a href=/inscription/{{ self.id }}>Inscription {{ self.number }}</a> Parents
 <h3>No parents</h3>
 %% } else {
 <div class=thumbnails>
-%% for id in &self.parents {
-  {{ Iframe::thumbnail(*id) }}
+%% for (id, media) in &self.parents {
+  {{ Iframe::thumbnail(*id, *media) }}
 %% }
 </div>
 <div class=center>
diff --git a/templates/preview-audio.html b/templates/preview-audio.html
index f963874442..36c163cbec 100644
--- a/templates/preview-audio.html
+++ b/templates/preview-audio.html
@@ -2,6 +2,7 @@
 <html lang=en>
   <head>
     <meta charset=utf-8>
+    <meta name=viewport content='width=device-width,initial-scale=1.0'>
     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Expires" content="0">
diff --git a/templates/preview-code.html b/templates/preview-code.html
index a502dd457e..2b164c477e 100644
--- a/templates/preview-code.html
+++ b/templates/preview-code.html
@@ -2,6 +2,7 @@
 <html lang=en data-inscription={{self.inscription_id}} data-language={{self.language}}>
   <head>
     <meta charset=utf-8>
+    <meta name=viewport content='width=device-width,initial-scale=1.0'>
     <title>Inscription {{self.inscription_number}} Preview</title>
     <link rel=stylesheet href=/static/preview-code.css?v=1>
     <script src=/static/preview-code.js defer type=module></script>
diff --git a/templates/preview-font.html b/templates/preview-font.html
index 8c814cc63c..14ea5816fa 100644
--- a/templates/preview-font.html
+++ b/templates/preview-font.html
@@ -2,6 +2,7 @@
 <html lang=en >
   <head>
     <meta charset=utf-8>
+    <meta name=viewport content='width=device-width,initial-scale=1.0'>
     <title>Inscription {{self.inscription_number}} Preview</title>
     <style>
       @font-face {
diff --git a/templates/preview-image.html b/templates/preview-image.html
index 5f43ac0cc0..213532edc0 100644
--- a/templates/preview-image.html
+++ b/templates/preview-image.html
@@ -2,28 +2,32 @@
 <html lang=en>
   <head>
     <meta charset=utf-8>
+    <meta name=viewport content='width=device-width,initial-scale=1.0'>
     <meta name=format-detection content='telephone=no'>
     <title>Inscription {{self.inscription_number}} Preview</title>
     <style>
       html {
-        background-color: #131516;
+        /* Transparent so the iframe blends with whatever the embedding
+           page's background is — any unfilled space (top/bottom or
+           left/right when the inscription isn't square) used to show
+           through as a dark band against light-themed parent pages. */
+        background-color: transparent;
         height: 100%;
       }
 
       body {
-        background-image: url(/content/{{self.inscription_id}});
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: contain;
         height: 100%;
-        image-rendering: {{ self.image_rendering }};
         margin: 0;
       }
 
+      /* Render via the img element, not a body background-image: iOS
+         Safari ignores image-rendering on scaled background images but
+         honors it on img elements. */
       img {
-        float: left;
+        display: block;
         height: 100%;
-        opacity: 0;
+        image-rendering: {{ self.image_rendering }};
+        object-fit: contain;
         width: 100%;
       }
     </style>
diff --git a/templates/preview-markdown.html b/templates/preview-markdown.html
index 5bf0660990..ab72a22a02 100644
--- a/templates/preview-markdown.html
+++ b/templates/preview-markdown.html
@@ -2,6 +2,7 @@
 <html lang=en data-inscription={{self.inscription_id}}>
   <head>
     <meta charset=utf-8>
+    <meta name=viewport content='width=device-width,initial-scale=1.0'>
     <title>Inscription {{self.inscription_number}} Preview</title>
     <link rel=stylesheet href=/static/preview-markdown.css?v=1></link>
     <script src=/static/preview-markdown.js type=module defer></script>
diff --git a/templates/preview-model.html b/templates/preview-model.html
index c94dfe6d26..dcb797695f 100644
--- a/templates/preview-model.html
+++ b/templates/preview-model.html
@@ -2,6 +2,7 @@
 <html lang=en>
   <head>
     <meta charset=utf-8>
+    <meta name=viewport content='width=device-width,initial-scale=1.0'>
     <title>Inscription {{self.inscription_number}} Preview</title>
     <script type=module src=https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js></script>
     <style>
diff --git a/templates/preview-pdf.html b/templates/preview-pdf.html
index ce9b505465..852b8dd2f6 100644
--- a/templates/preview-pdf.html
+++ b/templates/preview-pdf.html
@@ -2,6 +2,7 @@
 <html lang=en>
   <head>
     <meta charset=utf-8>
+    <meta name=viewport content='width=device-width,initial-scale=1.0'>
     <title>Inscription {{self.inscription_number}} Preview</title>
     <link rel=stylesheet href=/static/preview-pdf.css?v=1>
     <script src=/static/preview-pdf.js defer type=module></script>
diff --git a/templates/preview-text.html b/templates/preview-text.html
index c3cfe67822..1c3c01f5b3 100644
--- a/templates/preview-text.html
+++ b/templates/preview-text.html
@@ -2,6 +2,7 @@
 <html lang=en data-inscription={{self.inscription_id}}>
   <head>
     <meta charset=utf-8>
+    <meta name=viewport content='width=device-width,initial-scale=1.0'>
     <meta name=format-detection content='telephone=no'>
     <title>Inscription {{self.inscription_number}} Preview</title>
     <link href=/static/preview-text.css?v=1 rel=stylesheet>
diff --git a/templates/preview-unknown.html b/templates/preview-unknown.html
index 64ea60b6b2..15758c5d56 100644
--- a/templates/preview-unknown.html
+++ b/templates/preview-unknown.html
@@ -2,6 +2,7 @@
 <html lang=en>
   <head>
     <meta charset=utf-8>
+    <meta name=viewport content='width=device-width,initial-scale=1.0'>
   </head>
   <body>
   </body>
diff --git a/templates/preview-video.html b/templates/preview-video.html
index 3c63ad8ebd..fb70e6659a 100644
--- a/templates/preview-video.html
+++ b/templates/preview-video.html
@@ -2,6 +2,7 @@
 <html lang=en>
   <head>
     <meta charset=utf-8>
+    <meta name=viewport content='width=device-width,initial-scale=1.0'>
     <title>Inscription {{self.inscription_number}} Preview</title>
     <link rel=stylesheet href=/static/preview-video.css?v=1>
     <script src=/static/preview-video.js type=module defer></script>
diff --git a/templates/rune.html b/templates/rune.html
index 3da0d745ca..d9fc992af8 100644
--- a/templates/rune.html
+++ b/templates/rune.html
@@ -1,7 +1,7 @@
 <h1>{{ self.entry.spaced_rune }}</h1>
 %% if let Some(parent) = self.parent {
   <div class=thumbnails>
-    {{Iframe::thumbnail(parent)}}
+    {{Iframe::thumbnail(parent, self.parent_media)}}
   </div>
 %% }
 <dl>
diff --git a/templates/sat.html b/templates/sat.html
index eba6a70fac..0c5841d5ea 100644
--- a/templates/sat.html
+++ b/templates/sat.html
@@ -25,8 +25,8 @@ <h1>Sat {{ self.sat.n() }}</h1>
 %% if !self.inscriptions.is_empty() {
   <dt>inscriptions</dt>
   <dd class=thumbnails>
-%% for inscription in &self.inscriptions {
-    {{Iframe::thumbnail(*inscription)}}
+%% for (inscription, media) in &self.inscriptions {
+    {{Iframe::thumbnail(*inscription, *media)}}
 %% }
   </dd>
 %% }
diff --git a/templates/transaction.html b/templates/transaction.html
index aa183ec59a..b3946d97e0 100644
--- a/templates/transaction.html
+++ b/templates/transaction.html
@@ -3,7 +3,7 @@ <h1>Transaction <span class=monospace>{{self.txid}}</span></h1>
 <h2>Inscription Geneses</h2>
 <div class=thumbnails>
 %% for index in 0..self.inscription_count {
-{{ Iframe::thumbnail(InscriptionId { txid: self.txid, index }) }}
+{{ Iframe::thumbnail(InscriptionId { txid: self.txid, index }, self.inscription_medias.get(index as usize).copied().flatten()) }}
 %% }
 </div>
 %% }
diff --git a/tests/json_api.rs b/tests/json_api.rs
index 5021a8a8f8..5a9a25c3ea 100644
--- a/tests/json_api.rs
+++ b/tests/json_api.rs
@@ -567,6 +567,7 @@ fn get_blocks() {
         .take(5)
         .map(|block_hash| (block_hash, Vec::new()))
         .collect(),
+      featured_medias: BTreeMap::new(),
     }
   );
 }
@@ -591,6 +592,7 @@ fn get_transaction() {
       chain: Chain::Mainnet,
       etching: None,
       inscription_count: 0,
+      inscription_medias: Vec::new(),
       transaction,
       txid,
     }
@@ -697,6 +699,7 @@ fn get_runes() {
         txid: a.output.reveal,
         index: 0,
       }),
+      parent_media: None,
     }
   );
 
diff --git a/tests/server.rs b/tests/server.rs
index 2a8815acb5..adcb5ae0a2 100644
--- a/tests/server.rs
+++ b/tests/server.rs
@@ -250,11 +250,13 @@ fn inscription_page() {
     format!("/inscription/{inscription}"),
     Chain::Mainnet,
     InscriptionHtml {
+      breadcrumbs: Vec::new(),
       chain: Chain::Mainnet,
       charms: 0,
       child_count: 0,
       children: Vec::new(),
       fee: 138,
+      gallery_media: Vec::new(),
       height: 2,
       inscription: Inscription {
         content_type: Some("text/plain;charset=utf-8".as_bytes().into()),
diff --git a/tests/wallet/batch_command.rs b/tests/wallet/batch_command.rs
index 1ff1ef41bf..de2b2d3f36 100644
--- a/tests/wallet/batch_command.rs
+++ b/tests/wallet/batch_command.rs
@@ -2949,6 +2949,7 @@ inscriptions:
     ItemHtml {
       gallery_id: gallery,
       gallery_number: -1,
+      gallery_title: None,
       i: 0,
       item: Item {
         id: Some(id0),
@@ -2960,6 +2961,7 @@ inscriptions:
         },
         index: None,
       },
+      total: 2,
     },
   );
 
@@ -2969,6 +2971,7 @@ inscriptions:
     ItemHtml {
       gallery_id: gallery,
       gallery_number: -1,
+      gallery_title: None,
       i: 1,
       item: Item {
         id: Some(id1),
@@ -2980,6 +2983,7 @@ inscriptions:
         },
         index: None,
       },
+      total: 2,
     },
   );