diff --git a/docs/ensnode.io/src/components/atoms/Pill.astro b/docs/ensnode.io/src/components/atoms/Pill.astro
new file mode 100644
index 000000000..e006883c4
--- /dev/null
+++ b/docs/ensnode.io/src/components/atoms/Pill.astro
@@ -0,0 +1,9 @@
+---
+const { id } = Astro.props;
+const badgeClass =
+  "inline-flex items-center rounded-full bg-[var(--sl-color-gray-5)] px-2.5 py-0.5 text-[0.7rem] font-medium tracking-wide text-[var(--sl-color-gray-2)] dark:bg-[var(--sl-color-gray-6)]";
+---
+
+<span id={id} class={badgeClass}>
+  <slot />
+</span>
diff --git a/docs/ensnode.io/src/components/molecules/EnsDbReaderIntro.astro b/docs/ensnode.io/src/components/molecules/EnsDbReaderIntro.astro
index d16f620ed..d1119a101 100644
--- a/docs/ensnode.io/src/components/molecules/EnsDbReaderIntro.astro
+++ b/docs/ensnode.io/src/components/molecules/EnsDbReaderIntro.astro
@@ -2,7 +2,7 @@
 import { Aside } from "@astrojs/starlight/components";
 ---
 
-<Aside type="note" title="Reading data from your ENSDb">
+<Aside type="note" title="Connect with ensdb-sdk">
   See how to connect to ENSDb and get access to the <code>ensDb</code> query builder and <a
     href="/docs/services/ensdb/concepts/glossary#ensdb-writer-schema"
     ><code>ensIndexerSchema</code>
diff --git a/docs/ensnode.io/src/components/molecules/EnsDbWriterSchemaIntro.astro b/docs/ensnode.io/src/components/molecules/EnsDbWriterSchemaIntro.astro
index 857bfecd6..bd81c099c 100644
--- a/docs/ensnode.io/src/components/molecules/EnsDbWriterSchemaIntro.astro
+++ b/docs/ensnode.io/src/components/molecules/EnsDbWriterSchemaIntro.astro
@@ -4,11 +4,12 @@ import { Aside } from "@astrojs/starlight/components";
 const { ensDbWriterSchemaName = "ensindexer_0" } = Astro.props;
 ---
 
-<Aside type="note" title="What is an ENSDb Writer Schema?">
+<Aside type="note" title={`What is an \`${ensDbWriterSchemaName}\`?`}>
   <p>
-    An <a href="/docs/services/ensdb/concepts/glossary#ensdb-writer-schema">ENSDb Writer Schema</a> is
-    a database schema within an <a href="/docs/services/ensdb/concepts/glossary#ensdb-instance"
-      >ENSDb instance</a
+    It is the name of an <a href="/docs/services/ensdb/concepts/glossary#ensdb-writer-schema"
+      >ENSDb Writer Schema</a
+    >, which is a database schema within an <a
+      href="/docs/services/ensdb/concepts/glossary#ensdb-instance">ENSDb instance</a
     >, used to store indexed ENS data from a given <a
       href="/docs/services/ensdb/concepts/glossary#ensdb-writer">ENSDb Writer</a
     > instance. We use <code>{ensDbWriterSchemaName}</code> as the <a
diff --git a/docs/ensnode.io/src/components/molecules/EnsNodeSchemaIntro.astro b/docs/ensnode.io/src/components/molecules/EnsNodeSchemaIntro.astro
index b25eab47e..6ba50908c 100644
--- a/docs/ensnode.io/src/components/molecules/EnsNodeSchemaIntro.astro
+++ b/docs/ensnode.io/src/components/molecules/EnsNodeSchemaIntro.astro
@@ -4,9 +4,11 @@ import { Aside } from "@astrojs/starlight/components";
 const ensNodeSchemaName = "ensnode";
 ---
 
-<Aside type="note" title="What is ENSNode Schema?">
-  The <a href="/docs/services/ensdb/concepts/glossary#ensnode-schema">ENSNode Schema</a> is a database
-  schema within an <a href="/docs/services/ensdb/concepts/glossary#ensdb-instance">ENSDb instance</a
+<Aside type="note" title="What is an `ensnode`?">
+  It is the name of an <a href="/docs/services/ensdb/concepts/glossary#ensnode-schema"
+    >ENSNode Schema</a
+  >, which is a database schema within an <a
+    href="/docs/services/ensdb/concepts/glossary#ensdb-instance">ENSDb instance</a
   >, used to store metadata about <a href="/docs/services/ensdb/concepts/glossary#ensdb-writer"
     >ENSDb Writer</a
   > instances that have ever connected to the ENSDb instance. There can be only one ENSNode Schema per
diff --git a/docs/ensnode.io/src/components/molecules/SqlResultTable.astro b/docs/ensnode.io/src/components/molecules/SqlResultTable.astro
new file mode 100644
index 000000000..a83a0fd9a
--- /dev/null
+++ b/docs/ensnode.io/src/components/molecules/SqlResultTable.astro
@@ -0,0 +1,59 @@
+---
+/**
+ * Renders an array of row objects (or a single row object) as an HTML table
+ * with auto-detected column headers.
+ */
+interface Props {
+  rows: Record<string, unknown> | Array<Record<string, unknown>>;
+}
+
+const { rows } = Astro.props;
+
+const data = Array.isArray(rows) ? rows : [rows];
+const columns = data.length > 0 ? Object.keys(data[0]) : [];
+
+function formatCell(value: unknown): string {
+  if (value === null) return "NULL";
+  if (typeof value === "object") return JSON.stringify(value, null, 2);
+  return String(value);
+}
+---
+
+<div class="sql-result-table-wrapper not-content">
+  <table class="sql-result-table">
+    <thead>
+      <tr>
+        <th scope="col" class="sql-result-rownum">#</th>
+        {columns.map((col) => <th scope="col">{col}</th>)}
+      </tr>
+    </thead>
+    <tbody>
+      {
+        data.map((row, i) => (
+          <tr>
+            <th scope="row" class="sql-result-rownum">
+              <span class="sql-result-rownum-label">{i + 1}</span>
+            </th>
+            {columns.map((col) => {
+              const value = row[col];
+              const text = formatCell(value);
+              const isComplex = value !== null && (typeof value === "object" || text.length > 80);
+              return (
+                <td>
+                  {isComplex ? (
+                    // prettier-ignore
+                    <pre class="sql-result-cell-pre"><code>{text}</code></pre>
+                  ) : value === null ? (
+                    <span class="sql-result-null">{text}</span>
+                  ) : (
+                    <code>{text}</code>
+                  )}
+                </td>
+              );
+            })}
+          </tr>
+        ))
+      }
+    </tbody>
+  </table>
+</div>
diff --git a/docs/ensnode.io/src/components/molecules/omnigraph-static-example/StaticExampleCodeSection.astro b/docs/ensnode.io/src/components/molecules/omnigraph-static-example/StaticExampleCodeSection.astro
index 9ce3c1782..dd227f72a 100644
--- a/docs/ensnode.io/src/components/molecules/omnigraph-static-example/StaticExampleCodeSection.astro
+++ b/docs/ensnode.io/src/components/molecules/omnigraph-static-example/StaticExampleCodeSection.astro
@@ -2,9 +2,10 @@
 import { Code } from "@astrojs/starlight/components";
 
 import { staticExampleCodeWrapClass, staticExampleSectionXClass } from "./constants";
+import Pill from "@components/atoms/Pill.astro";
 
 interface Props {
-  badge: string;
+  badge?: string;
   headingId?: string;
   code: string;
   lang: string;
@@ -12,17 +13,17 @@ interface Props {
 
 const { badge, headingId, code, lang } = Astro.props;
 
-const badgeClass =
-  "inline-flex items-center rounded-full bg-[var(--sl-color-gray-5)] px-2.5 py-0.5 text-[0.7rem] font-medium tracking-wide text-[var(--sl-color-gray-2)] dark:bg-[var(--sl-color-gray-6)]";
 const sectionClass = `border-b border-black/[0.05] pb-5 pt-3 dark:border-white/[0.06] ${staticExampleSectionXClass}`;
 ---
 
-<section class={sectionClass} {...headingId ? { "aria-labelledby": headingId } : {}}>
-  <div class="mb-2.5">
-    <span id={headingId} class={badgeClass}>
-      {badge}
-    </span>
-  </div>
+<section class={sectionClass} {...badge && headingId ? { "aria-labelledby": headingId } : {}}>
+  {
+    badge && (
+      <div class="mb-2.5">
+        <Pill id={headingId}>{badge}</Pill>
+      </div>
+    )
+  }
   <div class={staticExampleCodeWrapClass}>
     <Code code={code} lang={lang} />
   </div>
diff --git a/docs/ensnode.io/src/components/molecules/unigraph-static-example/UnigraphExampleEnsDbSdkTab.astro b/docs/ensnode.io/src/components/molecules/unigraph-static-example/UnigraphExampleEnsDbSdkTab.astro
new file mode 100644
index 000000000..ba09955ef
--- /dev/null
+++ b/docs/ensnode.io/src/components/molecules/unigraph-static-example/UnigraphExampleEnsDbSdkTab.astro
@@ -0,0 +1,7 @@
+---
+import { TabItem } from "@astrojs/starlight/components";
+---
+
+<TabItem label="ensdb-sdk (TypeScript)" icon="seti:typescript">
+  <slot />
+</TabItem>
diff --git a/docs/ensnode.io/src/components/molecules/unigraph-static-example/UnigraphExampleSQLTab.astro b/docs/ensnode.io/src/components/molecules/unigraph-static-example/UnigraphExampleSQLTab.astro
new file mode 100644
index 000000000..b52294c64
--- /dev/null
+++ b/docs/ensnode.io/src/components/molecules/unigraph-static-example/UnigraphExampleSQLTab.astro
@@ -0,0 +1,7 @@
+---
+import { TabItem } from "@astrojs/starlight/components";
+---
+
+<TabItem label="SQL" icon="database">
+  <slot />
+</TabItem>
diff --git a/docs/ensnode.io/src/components/molecules/unigraph-static-example/UnigraphExampleWrapper.astro b/docs/ensnode.io/src/components/molecules/unigraph-static-example/UnigraphExampleWrapper.astro
new file mode 100644
index 000000000..54bbeded1
--- /dev/null
+++ b/docs/ensnode.io/src/components/molecules/unigraph-static-example/UnigraphExampleWrapper.astro
@@ -0,0 +1,10 @@
+---
+import { Tabs } from "@astrojs/starlight/components";
+---
+
+<div
+  class="not-content not-prose static-example overflow-hidden my-8 rounded-xl border border-black/[0.06] bg-[var(--sl-color-gray-6)] shadow-sm dark:border-white/[0.08] dark:bg-[var(--sl-color-gray-7)]">
+  <Tabs syncKey="unigraph-client">
+    <slot />
+  </Tabs>
+</div>
diff --git a/docs/ensnode.io/src/components/molecules/unigraph-static-example/UnigraphStaticExample.astro b/docs/ensnode.io/src/components/molecules/unigraph-static-example/UnigraphStaticExample.astro
new file mode 100644
index 000000000..a4663d928
--- /dev/null
+++ b/docs/ensnode.io/src/components/molecules/unigraph-static-example/UnigraphStaticExample.astro
@@ -0,0 +1,61 @@
+---
+import SqlResultTable from "@components/molecules/SqlResultTable.astro";
+import StaticExampleCodeSection from "@components/molecules/omnigraph-static-example/StaticExampleCodeSection.astro";
+import StaticExampleNote from "@components/molecules/omnigraph-static-example/StaticExampleNote.astro";
+import UnigraphExampleWrapper from "@components/molecules/unigraph-static-example/UnigraphExampleWrapper.astro";
+import UnigraphExampleSQLTab from "./UnigraphExampleSQLTab.astro";
+import UnigraphExampleEnsDbSdkTab from "./UnigraphExampleEnsDbSdkTab.astro";
+import Pill from "@components/atoms/Pill.astro";
+
+interface UnigraphExampleTabData {
+  codeSnippet: string;
+  result: Record<string, unknown> | Array<Record<string, unknown>>;
+  resultNote?: string;
+}
+
+interface Props {
+  sql: UnigraphExampleTabData;
+  ensDbSdk: UnigraphExampleTabData;
+}
+
+const { sql, ensDbSdk } = Astro.props;
+
+const defaultResultNote =
+  "Output matches a result snapshot; live output depends on your ENSNode instance.";
+---
+
+<UnigraphExampleWrapper>
+  <UnigraphExampleSQLTab>
+    <div class="px-5">
+      <slot name="sql-tab-note" />
+    </div>
+
+    <StaticExampleCodeSection badge="SQL" lang="sql" code={sql.codeSnippet} />
+
+    <div class="px-5 mt-4">
+      <Pill>Output</Pill>
+    </div>
+
+    <SqlResultTable rows={sql.result} />
+
+    <StaticExampleNote class="px-5 pb-5">{sql.resultNote ?? defaultResultNote}</StaticExampleNote>
+  </UnigraphExampleSQLTab>
+
+  <UnigraphExampleEnsDbSdkTab>
+    <div class="px-5">
+      <slot name="ensdb-sdk-tab-note" />
+    </div>
+
+    <StaticExampleCodeSection badge="TypeScript" lang="ts" code={ensDbSdk.codeSnippet} />
+
+    <div class="px-5 mt-4">
+      <Pill>Output</Pill>
+    </div>
+
+    <SqlResultTable rows={ensDbSdk.result} />
+
+    <StaticExampleNote class="px-5 pb-5">
+      {ensDbSdk.resultNote ?? defaultResultNote}
+    </StaticExampleNote>
+  </UnigraphExampleEnsDbSdkTab>
+</UnigraphExampleWrapper>
diff --git a/docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/account-domains.mdx b/docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/account-domains.mdx
index c19be523a..c157b6595 100644
--- a/docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/account-domains.mdx
+++ b/docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/account-domains.mdx
@@ -5,8 +5,7 @@ sidebar:
   label: Account Domains
 ---
 
-import { Tabs, TabItem } from "@astrojs/starlight/components";
-import ResultDetails from "@components/molecules/ResultDetails.astro";
+import UnigraphStaticExample from "@components/molecules/unigraph-static-example/UnigraphStaticExample.astro";
 import EnsDbWriterSchemaIntro from "@components/molecules/EnsDbWriterSchemaIntro.astro";
 import EnsDbReaderIntro from "@components/molecules/EnsDbReaderIntro.astro";
 
@@ -21,40 +20,36 @@ export const resultJson = [
   }
 ];
 
-:::caution[`unigraph` plugin required]
-Performing SQL queries on the ENS Unigraph requires that you have the `unigraph` plugin activated in your ENSNode instance. [Learn more](/docs/services/ensindexer/usage/configuration)
-:::
-
-Count the Domains owned by an address, grouped by Domain `type` (`ENSv1Domain` vs `ENSv2Domain`) — a single query spanning both protocol versions. See [Connect](/docs/integrate/unigraph/examples) for setup.
-
-<Tabs syncKey="unigraph-client">
-  <TabItem label="SQL">
-    <EnsDbWriterSchemaIntro ensDbWriterSchemaName="ensindexer_0" />
-
-```sql
-SELECT type, count(*) FROM ensindexer_0.domains
+export const sqlExampleSnippet = `SELECT type, count(*) FROM ensindexer_0.domains
 WHERE owner_id = '0x70997970c51812dc3a010c7d01b50e0d17dc79c8'
 GROUP BY type;
-```
-
-    <ResultDetails value={resultJson} />
+`;
 
-  </TabItem>
-
-  <TabItem label="ensdb-sdk (TypeScript)">
-    <EnsDbReaderIntro />
-
-```typescript
-import { count, eq } from "drizzle-orm";
+export const tsExampleSnippet = `import { count, eq } from "drizzle-orm";
 
 const counts = await ensDb
-  .select({ type: ensIndexerSchema.domain.type, count: count() })
-  .from(ensIndexerSchema.domain)
-  .where(eq(ensIndexerSchema.domain.ownerId, "0x70997970c51812dc3a010c7d01b50e0d17dc79c8"))
-  .groupBy(ensIndexerSchema.domain.type);
-```
+\t.select({ type: ensIndexerSchema.domain.type, count: count() })
+\t.from(ensIndexerSchema.domain)
+\t.where(eq(ensIndexerSchema.domain.ownerId, "0x70997970c51812dc3a010c7d01b50e0d17dc79c8"))
+\t.groupBy(ensIndexerSchema.domain.type);
+`
 
-    <ResultDetails value={resultJson} />
+:::caution[`unigraph` plugin required]
+Performing SQL queries on the ENS Unigraph requires that you have the `unigraph` plugin activated in your ENSNode instance. [Learn more](/docs/services/ensindexer/usage/configuration)
+:::
+
+Count the Domains owned by an address, grouped by Domain `type` (`ENSv1Domain` vs `ENSv2Domain`) — a single query spanning both protocol versions. See [Connect](/docs/integrate/unigraph/examples) for setup.
 
-  </TabItem>
-</Tabs>
+<UnigraphStaticExample
+ sql={{
+  codeSnippet: sqlExampleSnippet,
+  result: resultJson,
+ }}
+ ensDbSdk={{
+  codeSnippet: tsExampleSnippet,
+  result: resultJson,
+ }}
+>
+  <EnsDbWriterSchemaIntro ensDbWriterSchemaName="ensindexer_0" slot="sql-tab-note"/>
+  <EnsDbReaderIntro slot="ensdb-sdk-tab-note"/>
+</UnigraphStaticExample>
diff --git a/docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/domain-by-name.mdx b/docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/domain-by-name.mdx
index 15a3641e7..5590b6083 100644
--- a/docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/domain-by-name.mdx
+++ b/docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/domain-by-name.mdx
@@ -5,8 +5,7 @@ sidebar:
   label: Domain by Name
 ---
 
-import { Tabs, TabItem } from "@astrojs/starlight/components";
-import ResultDetails from "@components/molecules/ResultDetails.astro";
+import UnigraphStaticExample from "@components/molecules/unigraph-static-example/UnigraphStaticExample.astro";
 import EnsDbWriterSchemaIntro from "@components/molecules/EnsDbWriterSchemaIntro.astro";
 import EnsDbReaderIntro from "@components/molecules/EnsDbReaderIntro.astro";
 
@@ -14,27 +13,9 @@ export const unigraphSqlResultJson = [
   {
     id: "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
     type: "ENSv1Domain",
-    registry_id:
-      "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0x93cdeb708b7545dc668eb9280176169d1c33cfd8ed6f04690a0bcc88a93fc4ae",
-    subregistry_id:
-      "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
-    token_id: null,
-    node: "0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
-    label_hash: "0xaf2caa1c2ca1d027f1ac823b529d0a67cd144264b2789fa2ea4d63a67c7103cc",
-    owner_id: "0x220866b1a2219f40e72f5c628b65d54268ca3a9d",
-    root_registry_owner_id: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
-    canonical: true,
     canonical_name: "vitalik.eth",
-    canonical_label_hash_path: [
-      "0x4f5b812789fc606be1b3b16908db13fc7a9adf7ca72641f84d75b47069d3d7f0",
-      "0xaf2caa1c2ca1d027f1ac823b529d0a67cd144264b2789fa2ea4d63a67c7103cc",
-    ],
-    canonical_path: [
-      "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0x93cdeb708b7545dc668eb9280176169d1c33cfd8ed6f04690a0bcc88a93fc4ae",
-      "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
-    ],
-    canonical_depth: 2,
     canonical_node: "0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
+    owner_id: "0x220866b1a2219f40e72f5c628b65d54268ca3a9d",
   },
 ];
 
@@ -42,30 +23,36 @@ export const ensDbSdkResultJson = [
   {
     id: "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
     type: "ENSv1Domain",
-    registryId:
-      "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0x93cdeb708b7545dc668eb9280176169d1c33cfd8ed6f04690a0bcc88a93fc4ae",
-    subregistryId:
-      "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
-    tokenId: null,
-    node: "0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
-    labelHash: "0xaf2caa1c2ca1d027f1ac823b529d0a67cd144264b2789fa2ea4d63a67c7103cc",
-    ownerId: "0x220866b1a2219f40e72f5c628b65d54268ca3a9d",
-    rootRegistryOwnerId: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
-    canonical: true,
     canonicalName: "vitalik.eth",
-    canonicalLabelHashPath: [
-      "0x4f5b812789fc606be1b3b16908db13fc7a9adf7ca72641f84d75b47069d3d7f0",
-      "0xaf2caa1c2ca1d027f1ac823b529d0a67cd144264b2789fa2ea4d63a67c7103cc",
-    ],
-    canonicalPath: [
-      "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0x93cdeb708b7545dc668eb9280176169d1c33cfd8ed6f04690a0bcc88a93fc4ae",
-      "1-0x00000000000c2e074ec69a0dfb2997ba6c7d2e1e-0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
-    ],
-    canonicalDepth: 2,
     canonicalNode: "0xee6c4522aab0003e8d14cd40a6af439055fd2577951148c14b6cea9a53475835",
+    ownerId: "0x220866b1a2219f40e72f5c628b65d54268ca3a9d",
   },
 ];
 
+export const sqlExampleSnippet = `SELECT
+	id,
+	type,
+	canonical_name,
+	canonical_node,
+	owner_id
+FROM ensindexer_0.domains
+WHERE canonical_name = 'vitalik.eth';`
+
+export const tsExampleSnippet = `import { eq } from "drizzle-orm";
+
+const [vitalik] = await ensDb
+\t.select({
+\t\tid: ensIndexerSchema.domain.id,
+\t\ttype: ensIndexerSchema.domain.type,
+\t\tcanonicalName: ensIndexerSchema.domain.canonicalName,
+\t\tcanonicalNode: ensIndexerSchema.domain.canonicalNode,
+\t\townerId: ensIndexerSchema.domain.ownerId,
+\t})
+\t.from(ensIndexerSchema.domain)
+\t.where(eq(ensIndexerSchema.domain.canonicalName, "vitalik.eth"));
+
+console.log(vitalik);`
+
 :::caution[`unigraph` plugin required]
 Performing SQL queries on the ENS Unigraph requires that you have the `unigraph` plugin activated in your ENSNode instance. [Learn more](/docs/services/ensindexer/usage/configuration)
 :::
@@ -76,34 +63,10 @@ Fetch a Domain by its canonical name. Because `canonical_name` is materialized a
 Canonical fields are populated on every Domain reachable from the canonical root, across both ENSv1 and ENSv2 — query them uniformly without branching by `type`. In SQL, these columns are `canonical_name`, `canonical_path`, `canonical_node`, and `canonical_depth`; in `ensdb-sdk`, the corresponding fields are `canonicalName`, `canonicalPath`, `canonicalNode`, and `canonicalDepth`.
 :::
 
-<Tabs syncKey="unigraph-client">
-  <TabItem label="SQL">
-    <EnsDbWriterSchemaIntro ensDbWriterSchemaName="ensindexer_0" />
-
-```sql
-SELECT * FROM ensindexer_0.domains
-WHERE canonical_name = 'vitalik.eth';
-```
-
-    <ResultDetails value={unigraphSqlResultJson} />
-
-  </TabItem>
-
-  <TabItem label="ensdb-sdk (TypeScript)">
-    <EnsDbReaderIntro />
-
-```typescript
-import { eq } from "drizzle-orm";
-
-const [vitalik] = await ensDb
-  .select()
-  .from(ensIndexerSchema.domain)
-  .where(eq(ensIndexerSchema.domain.canonicalName, "vitalik.eth"));
-
-console.log(vitalik);
-```
-
-    <ResultDetails value={ensDbSdkResultJson} />
-
-  </TabItem>
-</Tabs>
+<UnigraphStaticExample
+  sql={{ codeSnippet: sqlExampleSnippet, result: unigraphSqlResultJson }}
+  ensDbSdk={{ codeSnippet: tsExampleSnippet, result: ensDbSdkResultJson }}
+>
+  <EnsDbWriterSchemaIntro ensDbWriterSchemaName="ensindexer_0" slot="sql-tab-note"/>
+  <EnsDbReaderIntro slot="ensdb-sdk-tab-note"/>
+ </UnigraphStaticExample>
diff --git a/docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/index.mdx b/docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/index.mdx
index c5227cd69..c424eedcd 100644
--- a/docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/index.mdx
+++ b/docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/index.mdx
@@ -5,7 +5,44 @@ sidebar:
   label: Overview
 ---
 
-import { LinkCard, Tabs, TabItem } from "@astrojs/starlight/components";
+import { LinkCard, Aside } from "@astrojs/starlight/components";
+import Pill from "@components/atoms/Pill.astro";
+import SqlResultTable from "@components/molecules/SqlResultTable.astro";
+import UnigraphExampleWrapper from "@components/molecules/unigraph-static-example/UnigraphExampleWrapper.astro";
+import UnigraphExampleSQLTab from "@components/molecules/unigraph-static-example/UnigraphExampleSQLTab.astro";
+import UnigraphExampleEnsDbSdkTab from "@components/molecules/unigraph-static-example/UnigraphExampleEnsDbSdkTab.astro";
+import StaticExampleCodeSection from "@components/molecules/omnigraph-static-example/StaticExampleCodeSection.astro";
+
+export const bashSQLConnectSnippet = `psql postgresql://user:password@host:5432/ensdb_devnet`;
+
+export const sqlDiscoverSnippet = `SELECT DISTINCT ens_indexer_schema_name
+FROM ensnode.metadata;`;
+
+export const sqlDiscoverResultJson = [
+  { ens_indexer_schema_name: "ensindexer_0" },
+  { ens_indexer_schema_name: "ensindexer_1" },
+];
+
+export const tsConnectCodeSnippet = `import { EnsDbReader } from "@ensnode/ensdb-sdk";
+
+// Connect by providing a connection string and the ENSIndexer Schema Name to query
+const ensDbReader = new EnsDbReader(ensDbConnectionString, ensIndexerSchemaName);
+const { ensDb, ensIndexerSchema, ensNodeSchema } = ensDbReader;`;
+
+export const tsDiscoverCodeSnippet = `const availableEnsDbWriterSchemas = await ensDb
+  .selectDistinct({
+    ensIndexerSchemaName: ensNodeSchema.metadata.ensIndexerSchemaName,
+  })
+  .from(ensNodeSchema.metadata);
+
+console.log(availableEnsDbWriterSchemas);`;
+
+export const tsDiscoverResultJson = [
+  { ensIndexerSchemaName: "ensindexer_0" },
+  { ensIndexerSchemaName: "ensindexer_1" },
+];
+
+export const bashSdkInstallSnippet = `npm install @ensnode/ensdb-sdk`;
 
 These examples show the same queries two ways: in **raw SQL** (any PostgreSQL client, any language) and with the typed **[`@ensnode/ensdb-sdk`](https://www.npmjs.com/package/@ensnode/ensdb-sdk)** for TypeScript projects.
 
@@ -19,39 +56,50 @@ Performing SQL queries on the ENS Unigraph requires that you have the `unigraph`
 
 The Unigraph lives in [ENSDb](/docs/services/ensdb), a PostgreSQL database. Each [ENSDb Writer](/docs/services/ensdb/concepts/glossary#ensdb-writer) instance writes to its own **ENSDb Writer Schema** (e.g. `ensindexer_0`). Each instance of [ENSDb Metadata Writer](/docs/services/ensdb/concepts/glossary#ensdb-metadata-writer) writes to a shared operational [metadata table](/docs/services/ensdb/concepts/glossary#ensnode-metadata-table) in the [`ensnode` schema](/docs/services/ensdb/concepts/glossary#ensnode-schema).
 
-<Tabs syncKey="unigraph-client">
-  <TabItem label="SQL">
-```bash
-psql postgresql://user:password@host:5432/ensdb_devnet
-```
+<UnigraphExampleWrapper>
+  <UnigraphExampleSQLTab>
+    <p class="mx-5 -mt-3">Connect to your ENSDb instance:</p>
 
-Discover the available ENSDb Writer Schemas:
+    <StaticExampleCodeSection lang="bash" code={bashSQLConnectSnippet} />
 
-```sql
-SELECT DISTINCT ens_indexer_schema_name
-FROM ensnode.metadata;
-```
+    <p class="p-5 pb-0">Discover the available ENSDb Writer Schemas:</p>
 
-  </TabItem>
-  <TabItem label="ensdb-sdk (TypeScript)">
-```bash
-npm install @ensnode/ensdb-sdk
-```
+    <StaticExampleCodeSection badge="SQL" lang="sql" code={sqlDiscoverSnippet} />
 
-:::note[ENSDb Reader]
-The `EnsDbReader` object enables you to build custom queries against the Unigraph data model in ENSDb. Use the `ensDb` field to build queries with the Drizzle ORM, and the `ensIndexerSchema` field to reference database objects (i.e. the Unigraph tables) within the [ENSDb Writer Schema](/docs/services/ensdb/concepts/glossary#ensdb-writer-schema) in a type-safe way.
-:::
+    <div class="px-5 mt-4">
+      <Pill>Output</Pill>
+    </div>
 
-```typescript
-import { EnsDbReader } from "@ensnode/ensdb-sdk";
+    <SqlResultTable rows={sqlDiscoverResultJson} />
 
-// Connect by providing a connection string and the ENSDb Writer Schema Name to query
-const ensDbReader = new EnsDbReader(ensDbConnectionString, ensIndexerSchemaName);
-const { ensDb, ensIndexerSchema } = ensDbReader;
-```
+  </UnigraphExampleSQLTab>
+
+  <UnigraphExampleEnsDbSdkTab>
+    <p class="mx-5 -mt-3">Install ENSDb SDK from NPM registry:</p>
+
+    <StaticExampleCodeSection lang="bash" code={bashSdkInstallSnippet} />
+
+    <div class="px-5 pt-5">
+      <Aside type="note" title="ENSDb Reader">
+        The `EnsDbReader` object enables you to build custom queries against the Unigraph data model in ENSDb. Use the `ensDb` field to build queries with the Drizzle ORM, and the `ensIndexerSchema` field to reference database objects (i.e. the Unigraph tables) within the [ENSIndexer Schema](/docs/services/ensdb/concepts/glossary#ensindexer-schema) in a type-safe way.
+      </Aside>
+    </div>
+
+    <p class="mx-5 mt-3">Connect to your ENSDb instance:</p>
+
+    <StaticExampleCodeSection badge="TypeScript" lang="ts" code={tsConnectCodeSnippet} />
+
+    <p class="p-5 pb-0">Discover the available ENSDb Writer Schemas:</p>
+
+    <StaticExampleCodeSection badge="TypeScript" lang="ts" code={tsDiscoverCodeSnippet} />
+
+    <div class="px-5 mt-4">
+      <Pill>Output</Pill>
+    </div>
+    <SqlResultTable rows={tsDiscoverResultJson} />
 
-  </TabItem>
-</Tabs>
+  </UnigraphExampleEnsDbSdkTab>
+</UnigraphExampleWrapper>
 
 ## Examples
 
diff --git a/docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/indexing-status.mdx b/docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/indexing-status.mdx
index 5e0121329..000984ac8 100644
--- a/docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/indexing-status.mdx
+++ b/docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/indexing-status.mdx
@@ -5,155 +5,145 @@ sidebar:
   label: Indexing Status
 ---
 
-import { Tabs, TabItem } from "@astrojs/starlight/components";
-import ResultDetails from "@components/molecules/ResultDetails.astro";
+import UnigraphStaticExample from "@components/molecules/unigraph-static-example/UnigraphStaticExample.astro";
 import EnsNodeSchemaIntro from "@components/molecules/EnsNodeSchemaIntro.astro";
 import EnsDbReaderIntro from "@components/molecules/EnsDbReaderIntro.astro";
 
 export const ensDbSdkResultJson = {
-  strategy: "omnichain",
-  snapshotTime: 1779795066,
-  omnichainSnapshot: {
-    chains: {
-      1: {
-        config: {
-          rangeType: "left-bounded",
-          startBlock: {
-            number: 3327417,
-            timestamp: 1489165544,
+  indexingStatus: {
+    strategy: "omnichain",
+    snapshotTime: 1779795066,
+    omnichainSnapshot: {
+      chains: {
+        1: {
+          config: {
+            rangeType: "left-bounded",
+            startBlock: {
+              number: 3327417,
+              timestamp: 1489165544,
+            },
           },
-        },
-        chainStatus: "chain-backfill",
-        backfillEndBlock: {
-          number: 25171597,
-          timestamp: 1779703391,
-        },
-        latestIndexedBlock: {
-          number: 21224717,
-          timestamp: 1732054691,
-        },
-      },
-      10: {
-        config: {
-          rangeType: "left-bounded",
-          startBlock: {
-            number: 110393959,
-            timestamp: 1696386695,
+          chainStatus: "chain-backfill",
+          backfillEndBlock: {
+            number: 25171597,
+            timestamp: 1779703391,
           },
-        },
-        chainStatus: "chain-backfill",
-        backfillEndBlock: {
-          number: 152052671,
-          timestamp: 1779704119,
-        },
-        latestIndexedBlock: {
-          number: 128226309,
-          timestamp: 1732051395,
-        },
-      },
-      8453: {
-        config: {
-          rangeType: "left-bounded",
-          startBlock: {
-            number: 17522624,
-            timestamp: 1721834595,
+          latestIndexedBlock: {
+            number: 21224717,
+            timestamp: 1732054691,
           },
         },
-        chainStatus: "chain-backfill",
-        backfillEndBlock: {
-          number: 46457386,
-          timestamp: 1779704119,
-        },
-        latestIndexedBlock: {
-          number: 22632818,
-          timestamp: 1732054983,
-        },
-      },
-      42161: {
-        config: {
-          rangeType: "left-bounded",
-          startBlock: {
-            number: 349263357,
-            timestamp: 1750406457,
+        10: {
+          config: {
+            rangeType: "left-bounded",
+            startBlock: {
+              number: 110393959,
+              timestamp: 1696386695,
+            },
+          },
+          chainStatus: "chain-backfill",
+          backfillEndBlock: {
+            number: 152052671,
+            timestamp: 1779704119,
+          },
+          latestIndexedBlock: {
+            number: 128226309,
+            timestamp: 1732051395,
           },
         },
-        chainStatus: "chain-queued",
-      },
-      59144: {
-        config: {
-          rangeType: "left-bounded",
-          startBlock: {
-            number: 6682888,
-            timestamp: 1720768992,
+        8453: {
+          config: {
+            rangeType: "left-bounded",
+            startBlock: {
+              number: 17522624,
+              timestamp: 1721834595,
+            },
+          },
+          chainStatus: "chain-backfill",
+          backfillEndBlock: {
+            number: 46457386,
+            timestamp: 1779704119,
+          },
+          latestIndexedBlock: {
+            number: 22632818,
+            timestamp: 1732054983,
           },
         },
-        chainStatus: "chain-backfill",
-        backfillEndBlock: {
-          number: 30774477,
-          timestamp: 1779703911,
+        42161: {
+          config: {
+            rangeType: "left-bounded",
+            startBlock: {
+              number: 349263357,
+              timestamp: 1750406457,
+            },
+          },
+          chainStatus: "chain-queued",
         },
-        latestIndexedBlock: {
-          number: 12280006,
-          timestamp: 1732054967,
+        59144: {
+          config: {
+            rangeType: "left-bounded",
+            startBlock: {
+              number: 6682888,
+              timestamp: 1720768992,
+            },
+          },
+          chainStatus: "chain-backfill",
+          backfillEndBlock: {
+            number: 30774477,
+            timestamp: 1779703911,
+          },
+          latestIndexedBlock: {
+            number: 12280006,
+            timestamp: 1732054967,
+          },
         },
-      },
-      534352: {
-        config: {
-          rangeType: "left-bounded",
-          startBlock: {
-            number: 16604272,
-            timestamp: 1750406415,
+        534352: {
+          config: {
+            rangeType: "left-bounded",
+            startBlock: {
+              number: 16604272,
+              timestamp: 1750406415,
+            },
           },
+          chainStatus: "chain-queued",
         },
-        chainStatus: "chain-queued",
       },
+      omnichainStatus: "omnichain-backfill",
+      omnichainIndexingCursor: 1732054983,
     },
-    omnichainStatus: "omnichain-backfill",
-    omnichainIndexingCursor: 1732054983,
-  },
-  slowestChainIndexingCursor: 1732054983,
-};
+    slowestChainIndexingCursor: 1732054983,
+  }
+}
 
 export const unigraphSqlResultJson = {
-  indexing_status_snapshot: ensDbSdkResultJson,
+  indexing_status_snapshot: ensDbSdkResultJson.indexingStatus,
 };
 
-:::caution[`unigraph` plugin required]
-Performing SQL queries on the ENS Unigraph requires that you have the `unigraph` plugin activated in your ENSNode instance. [Learn more](/docs/services/ensindexer/usage/configuration)
-:::
-
-Read the indexing status snapshot for an ENSIndexer instance from the shared `ensnode.metadata` table. See [Connect](/docs/integrate/unigraph/examples) for setup.
-
-<Tabs syncKey="unigraph-client">
-  <TabItem label="SQL">
-    <EnsNodeSchemaIntro />
-
-```sql
--- Indexing status snapshot for the `ensindexer_0` ENSDb Writer Schema
+export const sqlExampleSnippet = `-- Indexing status snapshot for the \`ensindexer_0\` ENSIndexer Schema
 SELECT value -> 'indexingStatus' as indexing_status_snapshot
-FROM "ensnode"."metadata"
+FROM ensnode.metadata
 WHERE ens_indexer_schema_name = 'ensindexer_0'
 AND key = 'indexing_metadata_context';
-```
+`;
 
-    <ResultDetails value={unigraphSqlResultJson} />
-
-  </TabItem>
-
-  <TabItem label="ensdb-sdk (TypeScript)">
-    <EnsDbReaderIntro />
-
-```typescript
-import { IndexingMetadataContextStatusCodes } from "@ensnode/ensdb-sdk";
+export const tsExampleSnippet = `import { IndexingMetadataContextStatusCodes } from "@ensnode/ensdb-sdk";
 
 const indexingMetadataContext = await ensDbReader.getIndexingMetadataContext();
 if (indexingMetadataContext.statusCode === IndexingMetadataContextStatusCodes.Initialized) {
-  const indexingStatusSnapshot = indexingMetadataContext.indexingStatus;
-  console.log(indexingStatusSnapshot);
-}
-```
+\tconst { indexingStatus } = indexingMetadataContext;
+\tconsole.log({ indexingStatus });
+}`;
 
-    <ResultDetails value={ensDbSdkResultJson} />
+:::caution[`unigraph` plugin required]
+Performing SQL queries on the ENS Unigraph requires that you have the `unigraph` plugin activated in your ENSNode instance. [Learn more](/docs/services/ensindexer/usage/configuration)
+:::
+
+Read the indexing status snapshot for an ENSIndexer instance from the shared `ensnode.metadata` table. See [Connect](/docs/integrate/unigraph/examples) for setup.
 
-  </TabItem>
-</Tabs>
+<UnigraphStaticExample
+  sql={{ codeSnippet: sqlExampleSnippet, result: unigraphSqlResultJson }}
+  ensDbSdk={{ codeSnippet: tsExampleSnippet, result: ensDbSdkResultJson }}
+>
+  <EnsNodeSchemaIntro slot="sql-tab-note"/>
+  <EnsDbReaderIntro slot="ensdb-sdk-tab-note"/>
+</UnigraphStaticExample>
diff --git a/docs/ensnode.io/src/styles/starlight.css b/docs/ensnode.io/src/styles/starlight.css
index 3bf46c1ca..71e62eb38 100644
--- a/docs/ensnode.io/src/styles/starlight.css
+++ b/docs/ensnode.io/src/styles/starlight.css
@@ -490,15 +490,49 @@ ul.top-level details details > summary .group-label span {
   transform: none !important;
 }
 
-/* Align "tablist" component to the left
- * and remove the default full-width underline
- */
+/* Unify the styling of Starlight tabs with our Omnigraph Static example tabs */
 starlight-tabs ul[role="tablist"] {
-  padding-left: 0;
-  border-bottom: none;
+  margin-top: 0;
+  padding-left: 20px;
+  padding-top: 12px;
+
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 
   & a[role="tab"] {
-    padding-bottom: 8px;
+    padding: 8px 0 10px 0;
+
+    font-size: 14px;
+    font-weight: 500;
+
+    transition: color 0.2s ease-in-out;
+
+    position: relative;
+
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    line-height: 1;
+    color: var(--sl-color-gray-3);
+
+    box-shadow: none;
+
+    &:hover {
+      color: var(--sl-color-accent-high);
+    }
+
+    &:is([aria-selected="true"]) {
+      color: var(--sl-color-text-accent);
+      box-shadow: inset 0 -2px 0 var(--sl-color-text-accent);
+    }
+
+    & svg {
+      width: 16px;
+      height: 16px;
+    }
   }
 }
 
@@ -537,7 +571,8 @@ starlight-tabs ul[role="tablist"] {
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
-  line-height: 20px; /* 125% */
+  line-height: 20px;
+  /* 125% */
 }
 
 .starlight-aside__content {
@@ -545,7 +580,8 @@ starlight-tabs ul[role="tablist"] {
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
-  line-height: 24px; /* 171.429% */
+  line-height: 24px;
+  /* 171.429% */
 
   margin-top: 10px;
 
@@ -681,7 +717,8 @@ starlight-tabs ul[role="tablist"] {
  * hack since Starlight doesn't allow overriding icons directly. */
 
 .starlight-sidebar-topics-icon svg {
-  display: none; /* Hide the default SVG icon */
+  display: none;
+  /* Hide the default SVG icon */
 }
 
 /* Default sidebar icon (parent) */
@@ -713,15 +750,19 @@ starlight-tabs ul[role="tablist"] {
 .starlight-sidebar-topics a[href*="/integrate"] .starlight-sidebar-topics-icon {
   --sidebar-icon: url("../assets/custom-sidebar-icons/integrate-with-ensv2.svg");
 }
+
 .starlight-sidebar-topics a[href*="/hosted-instances"] .starlight-sidebar-topics-icon {
   --sidebar-icon: url("../assets/custom-sidebar-icons/hosted-instances.svg");
 }
+
 .starlight-sidebar-topics a[href*="/self-host"] .starlight-sidebar-topics-icon {
   --sidebar-icon: url("../assets/custom-sidebar-icons/self-host-ensnode.svg");
 }
+
 .starlight-sidebar-topics a[href*="/services"] .starlight-sidebar-topics-icon {
   --sidebar-icon: url("../assets/custom-sidebar-icons/ensnode-services.svg");
 }
+
 .starlight-sidebar-topics a[href*="/reference"] .starlight-sidebar-topics-icon {
   --sidebar-icon: url("../assets/custom-sidebar-icons/reference.svg");
 }
@@ -768,3 +809,122 @@ starlight-tabs ul[role="tablist"] {
   border-right: 1px solid var(--color-border);
   border-top: 1px solid var(--color-border);
 }
+
+/* SQL Result Table styles */
+.sql-result-table-wrapper {
+  overflow: auto;
+  max-height: 420px;
+  margin: 1rem 20px;
+  border-radius: 12px;
+  border: 1px solid var(--sl-color-gray-5);
+}
+
+.sql-result-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: var(--sl-color-white);
+}
+
+.sql-result-table th,
+.sql-result-table td {
+  padding: 0.375rem 0.625rem;
+  text-align: left;
+  vertical-align: top;
+  border-bottom: 1px solid var(--sl-color-gray-5);
+  border-right: 1px solid var(--sl-color-gray-5);
+}
+
+.sql-result-table th:last-child,
+.sql-result-table td:last-child {
+  border-right: none;
+}
+
+.sql-result-table th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--sl-color-gray-6);
+  font-weight: 600;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--sl-color-gray-5);
+}
+
+.sql-result-table td {
+  background-color: var(--sl-color-black);
+  white-space: nowrap;
+}
+
+.sql-result-table tbody tr:hover td {
+  background-color: var(--color-gray-50);
+}
+
+.sql-result-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.sql-result-table td code {
+  background: none;
+  padding: 0;
+  font-size: 0.75rem;
+  word-break: normal;
+  color: inherit;
+}
+
+/* Row number column */
+.sql-result-rownum {
+  width: 2.25rem;
+  min-width: 2.25rem;
+  max-width: 2.25rem;
+  text-align: center !important;
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important;
+}
+
+.sql-result-rownum-label {
+  color: var(--sl-color-gray-3);
+  font-size: 0.75rem;
+}
+
+.sql-result-cell-pre {
+  margin: 0;
+  background: none;
+  padding: 0;
+  font-size: 0.75rem;
+  line-height: 1.3;
+  color: inherit;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.sql-result-cell-pre code {
+  background: none;
+  padding: 0;
+  word-break: break-all;
+  white-space: pre-wrap;
+  color: inherit;
+}
+
+.sql-result-null {
+  color: var(--sl-color-gray-3);
+  font-style: italic;
+}
+
+/*
+  Additional global styles for the .static-example class
+  inside the Unigraph example
+*/
+.static-example starlight-tabs .expressive-code .frame > pre:not([data-language="bash"]) {
+  border-radius: 12px;
+}
+
+/*
+  Make sure that code blocks inside asides are styled properly inside the static examples
+*/
+.static-example starlight-tabs .starlight-aside :not(pre) > code {
+  margin-block: -0.125rem;
+  padding: 0.125rem 0.375rem;
+  font-size: var(--sl-text-code-sm);
+}
diff --git a/examples/enskit-react-example/package.json b/examples/enskit-react-example/package.json
index cf449e2ab..b2c38ea3b 100644
--- a/examples/enskit-react-example/package.json
+++ b/examples/enskit-react-example/package.json
@@ -16,7 +16,7 @@
     "enssdk": "1.15.1",
     "react": "catalog:",
     "react-dom": "catalog:",
-    "react-router": "^7.6.1"
+    "react-router": "^7.17.0"
   },
   "devDependencies": {
     "@types/react": "catalog:",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a5f8f562f..71505b25c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -883,8 +883,8 @@ importers:
         specifier: 'catalog:'
         version: 19.2.1(react@19.2.1)
       react-router:
-        specifier: ^7.6.1
-        version: 7.14.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        specifier: ^7.17.0
+        version: 7.17.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
     devDependencies:
       '@types/react':
         specifier: 'catalog:'
@@ -9004,8 +9004,8 @@ packages:
       '@types/react':
         optional: true
 
-  react-router@7.14.0:
-    resolution: {integrity: sha512-m/xR9N4LQLmAS0ZhkY2nkPA1N7gQ5TUVa5n8TgANuDTARbn1gt+zLPXEm7W0XDTbrQ2AJSJKhoa6yx1D8BcpxQ==}
+  react-router@7.17.0:
+    resolution: {integrity: sha512-FDELK7rTMlCHO5+reyXsPlmfr7N1F91lPHsWYfMEGQm/KQ+F4JFM8jGoeQDmDvdTs93Fw9aSilH+uKRb4/jXvQ==}
     engines: {node: '>=20.0.0'}
     peerDependencies:
       react: '>=18'
@@ -19535,7 +19535,7 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
-  react-router@7.14.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  react-router@7.17.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
     dependencies:
       cookie: 1.1.1
       react: 19.2.1