diff --git a/packages/common/src/URN.js b/packages/common/src/URN.js
index 4366029..74407c9 100644
--- a/packages/common/src/URN.js
+++ b/packages/common/src/URN.js
@@ -7,6 +7,8 @@ export default class URN {
     this.nss = null;
     this.textGroup = null;
     this.work = null;
+    this.versionPart = null;
+    this.workPart = null;
     this.reference = null;
     this.version = null;
     this.destructureUrn();
@@ -16,18 +18,19 @@ export default class URN {
   destructureUrn() {
     const split = this.absolute.split(this.delimiter);
     [this.scheme, this.nid, this.nss, this.work, this.reference] = split;
-    this.version = `${this.scheme}:${this.nid}:${this.nss}:${this.work}:`;
-    // eslint-disable-next-line prefer-destructuring
-    this.textGroup = this.version
-      .split('.')[0]
-      .split(':')
-      .slice(-1)[0];
+    this.version = `${this.urnPrefix}:${this.work}:`;
+    const versionParts = this.version.split(':').slice(-2)[0].split('.');
+    [this.textGroup, this.workPart, this.versionPart] = versionParts;
   }
 
   toString() {
     return this.absolute;
   }
 
+  get urnPrefix() {
+    return `${this.scheme}:${this.nid}:${this.nss}`;
+  }
+
   get lcp() {
     return this.reference
       ? this.reference
@@ -36,4 +39,26 @@ export default class URN {
           .slice(-1)[0]
       : null;
   }
+
+  upTo(segment) {
+    // NOTE: Backported from https://github.com/scaife-viewer/scaife-viewer/blob/59fbb4eb6bd886285eb27bf95c5ea0ce578f2b3e/static/src/js/urn.js#L32C1-L49C4
+    const segments = [this.urnPrefix, ':'];
+    if (segment === 'textGroup') {
+      segments.push(this.textGroup, ':');
+      return segments.join('');
+    }
+    if (segment === 'work') {
+      segments.push(this.textGroup, '.');
+      segments.push(this.workPart, ':');
+      return segments.join('');
+    }
+    if (segment === 'version') {
+      return this.version
+    }
+    if (segment === 'reference')  {
+      return this.absolute;
+    }
+    return null;
+  }
+
 }
diff --git a/packages/widget-toc/README.md b/packages/widget-toc/README.md
index e69de29..9d8ca68 100644
--- a/packages/widget-toc/README.md
+++ b/packages/widget-toc/README.md
@@ -0,0 +1,25 @@
+# `widget-toc`
+
+The tables of contents (TOC) widget displays TOC entries.
+
+Each entry has a label and a URI.
+
+The URI can resolve to:
+
+- Another TOC (e.g., a list of lists)
+- The URN of a CTS passage
+
+Possible implementations include:
+- Browse folios from the Venetus A using the canonical book / line references (e.g. [urn:cite:scaife-viewer:toc.iliad-folio-ref-root](https://github.com/scaife-viewer/beyond-translation-site/blob/main/backend/data/tocs/toc.demo-root.json))
+- Browse CTS versions using card / para milestones extracted from TEI XML (e.g. [PerseusDL](https://github.com/scaife-viewer/beyond-translation-site/tree/feature/antigone-toc/backend/data/annotations/tocs/PerseusDL))
+- Navigate between a commentary and edition in differing text groups (e.g. [Eustathius’ Commentary on the Odyssey](https://scholarlyeditions.brill.com/eooc/) and [Odyssey](https://beyond-translation.perseus.org/reader/urn:cts:greekLit:tlg0012.tlg002.perseus-grc2:1.1-1.10))
+
+## Configuration options
+
+`$scaife.config.showRelevantTOCs`
+
+Default value is `true`.
+
+If `true`, only show TOCs relevant to the current passage.
+
+Set to `false` to show all TOCs.
diff --git a/packages/widget-toc/package.json b/packages/widget-toc/package.json
index b1c3308..77cf1cc 100644
--- a/packages/widget-toc/package.json
+++ b/packages/widget-toc/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@scaife-viewer/common": "^0.6.0",
-    "@scaife-viewer/store": "^0.6.0"
+    "@scaife-viewer/store": "^0.6.0",
+    "graphql-tag": "^2.12.6"
   }
 }
diff --git a/packages/widget-toc/src/TOC.vue b/packages/widget-toc/src/TOC.vue
index cae8f9a..f1cbaee 100644
--- a/packages/widget-toc/src/TOC.vue
+++ b/packages/widget-toc/src/TOC.vue
@@ -1,13 +1,13 @@
 <template>
   <aside class="toc-container">
-    <h3>{{ toc.title }}</h3>
+    <h3>{{ toc.label }}</h3>
     <p class="u-legend">{{ toc.description }}</p>
-    <div class="toc-grid" v-if="toc.items.length">
+    <div class="toc-grid">
       <template v-for="(item, index) in toc.items">
         <span :key="`index-${index}`" class="ref">{{ index + 1 }}.</span>
         <div :key="`item-${index}`" class="item">
           <router-link :to="getPayload(item.uri)">
-            {{ item.title }}
+            {{ item.label }}
           </router-link>
           <span v-if="showURNs">
             <tt>{{ item.uri }}</tt>
@@ -15,7 +15,6 @@
         </div>
       </template>
     </div>
-    <h4 v-else>No results.</h4>
   </aside>
 </template>
 
@@ -65,6 +64,7 @@
     flex-direction: column;
     width: 100%;
   }
+  // TODO: Retire grid due to weird wrapping issues
   .toc-grid {
     display: grid;
     align-items: baseline;
diff --git a/packages/widget-toc/src/TOCWidget.vue b/packages/widget-toc/src/TOCWidget.vue
index bf6ff9f..7a5ee53 100644
--- a/packages/widget-toc/src/TOCWidget.vue
+++ b/packages/widget-toc/src/TOCWidget.vue
@@ -1,32 +1,47 @@
 <template>
-  <div class="toc-widget" v-if="toc">
-    <div class="lookahead-container">
-      <Lookahead
-        :placeholder="placeholder"
-        :reducer="reducer"
-        :data="toc"
-        @filter-data="filterData"
+  <div class="toc-widget" :class="{ 'with-entries': toc }">
+    <LoaderBall v-if="$apollo.loading" />
+    <EmptyMessage v-else-if="!toc || toc.items.length === 0">
+      {{ emptyMessage }}
+    </EmptyMessage>
+    <div class="toc-entries" :key="currentToc" v-else>
+      <div class="lookahead-container">
+        <Lookahead
+          :placeholder="placeholder"
+          :reducer="reducer"
+          :data="toc"
+          @filter-data="filterData"
+        />
+        <Icon
+          @click.native="navigateToRootTOC"
+          class="icon root-toc"
+          :class="{ 'toc-disabled': showingRootToc }"
+          name="home"
+        />
+        <span @click.prevent="toggleURNs">
+          <Icon class="icon urn" name="eye" v-if="!showURNs" />
+          <Icon class="icon urn" name="eye-slash" v-else />
+        </span>
+      </div>
+      <TOC
+        :toc="filtered || toc"
+        :context="context"
+        :passage="passage"
+        :showURNs="showURNs"
       />
-      <Icon class="icon" name="home" v-if="showingRootToc" disabled />
-      <router-link class="icon" :to="returnToRootPayload" v-else>
-        <Icon name="home" />
-      </router-link>
-      <span @click.prevent="toggleURNs">
-        <Icon class="icon urn" name="eye" v-if="!showURNs" />
-        <Icon class="icon urn" name="eye-slash" v-else />
-      </span>
     </div>
-    <TOC
-      :toc="filtered || toc"
-      :context="context"
-      :passage="passage"
-      :showURNs="showURNs"
-    />
   </div>
 </template>
 
 <script>
-  import { Icon, Lookahead } from '@scaife-viewer/common';
+  import gql from 'graphql-tag';
+
+  import {
+    EmptyMessage,
+    Icon,
+    LoaderBall,
+    Lookahead,
+  } from '@scaife-viewer/common';
   import { MODULE_NS } from '@scaife-viewer/store';
 
   import TOC from './TOC.vue';
@@ -35,28 +50,76 @@
   export default {
     name: 'TOCWidget',
     components: {
+      EmptyMessage,
       Icon,
       Lookahead,
+      LoaderBall,
       TOC,
     },
     scaifeConfig: {
       displayName: 'Table of Contents',
     },
-    created() {
-      this.fetchData();
-    },
-    watch: {
-      $route: 'fetchData',
-      defaultTocUrn: 'fetchData',
-    },
     data() {
       return {
-        toc: null,
         filtered: null,
         showURNs: false,
       };
     },
+    watch: {
+      toc: {
+        handler(value) {
+          this.filtered = value;
+        },
+      },
+    },
     computed: {
+      passageWork() {
+        return this.passage ? this.passage.upTo('work') : '';
+      },
+      emptyMessage() {
+        return this.showRelevantTOCs
+          ? 'No relevant tables of contents found'
+          : 'No tables of contents found';
+      },
+      toc() {
+        if (
+          this.showRelevantTOCs &&
+          this.showingRootToc &&
+          this.relevantEntries &&
+          this.relevantEntries.length > 0
+        ) {
+          // NOTE: Show the relevant entries
+          return {
+            label: '',
+            items: this.relevantEntries ? this.relevantEntries : [],
+          };
+        }
+        if (
+          this.showingRootToc &&
+          this.rootEntries &&
+          this.rootEntries.length > 0
+        ) {
+          // NOTE: Show the root entries
+          const rootEntries = this.rootEntries ? this.rootEntries : [];
+          return {
+            label: '',
+            items: this.showRelevantTOCs ? [] : rootEntries,
+          };
+        }
+        if (this.currentToc && this.tocEntries && this.tocEntries.length > 0) {
+          const firstEntry = this.tocEntries[0];
+          if (firstEntry.tree) {
+            const tree = firstEntry.tree[0];
+            return {
+              description: firstEntry.description,
+              items: tree.children.map(child => child.data),
+              label: firstEntry.label,
+            };
+          }
+        }
+        // NOTE: Should be unreachable
+        return null;
+      },
       context() {
         return this.$route.name;
       },
@@ -72,88 +135,161 @@
       reducer() {
         return reducers.tocReducer;
       },
-      endpoint() {
-        return this.$scaife.config.endpoints.tocEndpoint;
-      },
       returnToRootPayload() {
         return this.context === 'tocs'
           ? { path: 'tocs' }
-          : { name: 'reader', params: { urn: this.passage.absolute } };
+          : { name: 'reader', params: { urn: `${this.passage}` } };
       },
       showingRootToc() {
         if (this.context === 'tocs') {
           return !this.$route.params.urn;
         }
-        if (this.$route.query.toc) {
-          return this.$route.query.toc === this.defaultTocUrn;
-        }
-        return this.defaultTocUrn
-          ? this.url === this.getTocUrl(this.defaultTocUrn)
-          : this.url === this.getTocUrl(this.rootTocUrn);
+        // TODO: Simplify this with either the explicit
+        // URN or a top-level query
+        return !this.$route.query.toc;
       },
+      // TODO: Distinguish between "root" and "default" in the UX
       defaultTocUrn() {
         return this.metadata && this.metadata.defaultTocUrn
           ? this.metadata.defaultTocUrn
           : null;
       },
-      rootTocUrn() {
-        return 'urn:cite:scaife-viewer:toc.demo-root';
+      // TODO: Simplify this with either the explicit
+      // URN or a top-level query
+      currentToc() {
+        return this.$route.query.toc ? this.$route.query.toc : null;
       },
-      url() {
-        if (this.$route.query.toc) {
-          return this.getTocUrl(this.$route.query.toc);
-        }
-        if (this.context === 'reader') {
-          return this.getTocUrl(this.defaultTocUrn || this.rootTocUrn);
-        }
-        return this.getTocUrl(this.$route.query.urn || this.rootTocUrn);
+    },
+    apollo: {
+      relevantEntries: {
+        query: gql`
+          query($work: String!) {
+            tocEntries(depth: 1, work: $work) {
+              edges {
+                node {
+                  label
+                  uri
+                  urn
+                }
+              }
+            }
+          }
+        `,
+        skip() {
+          return !this.passage;
+        },
+        update(data) {
+          return data.tocEntries.edges.map(e => e.node);
+        },
+        variables() {
+          return { work: this.passageWork };
+        },
+      },
+      rootEntries: {
+        query: gql`
+          query {
+            tocEntries(depth: 1) {
+              edges {
+                node {
+                  label
+                  uri
+                  urn
+                }
+              }
+            }
+          }
+        `,
+        skip() {
+          if (this.showRelevantTOCs) {
+            return true;
+          }
+          return !!this.$route.query.toc;
+        },
+        update(data) {
+          return data.tocEntries.edges.map(e => e.node);
+        },
+      },
+      tocEntries: {
+        query: gql`
+          query($urn: String!) {
+            tocEntries(urn: $urn) {
+              edges {
+                node {
+                  label
+                  description
+                  uri
+                  urn
+                  tree
+                }
+              }
+            }
+          }
+        `,
+        variables() {
+          return {
+            urn: this.$route.query.toc,
+          };
+        },
+        update(data) {
+          return data.tocEntries.edges.map(e => e.node);
+        },
+        skip() {
+          return !this.$route.query.toc;
+        },
       },
     },
     methods: {
+      navigateToRootTOC() {
+        if (this.showingRootToc) {
+          return;
+        }
+        this.$router.push(this.returnToRootPayload);
+      },
       toggleURNs() {
         this.showURNs = !this.showURNs;
       },
       filterData(data) {
         this.filtered = data;
       },
-      fetchData() {
-        fetch(this.url)
-          .then(response => response.json())
-          .then(data => {
-            this.toc = data;
-            this.filtered = null;
-          })
-          .catch(error => {
-            // eslint-disable-next-line no-console
-            console.log(error.message);
-          });
-      },
-      getTocUrl(tocUrn) {
-        return `${this.endpoint}/tocs/${tocUrn.split(':').slice(-1)}.json`;
+      shouldShowRelevantTOCs() {
+        const configValue = this.$scaife.config.showRelevantTOCs;
+        return configValue === undefined ? true : configValue;
       },
     },
+    created() {
+      this.showRelevantTOCs = this.shouldShowRelevantTOCs();
+    },
   };
 </script>
 
 <style lang="scss" scoped>
   div.toc-widget {
-    flex-direction: column;
-    justify-content: flex-start;
-    margin: 10px;
+    &.with-entries {
+      margin: 10px;
+      width: calc(100% - 20px);
+      flex-direction: column;
+      justify-content: flex-start;
+    }
   }
   .lookahead-container {
     align-items: center;
     margin-bottom: 0.66em;
     display: flex;
     .form-group {
-      width: 90%;
+      flex-basis: 66.66%;
+      margin-inline-end: 1em;
     }
   }
   .icon {
     color: var(--sv-widget-toc-icon-text-color, black);
-    margin-left: 1.33em;
-    &.urn {
+    flex-basis: 16.66%;
+    &.urn,
+    &.root-toc {
       cursor: pointer;
     }
+    &.toc-disabled {
+      color: grey;
+      cursor: unset;
+    }
   }
 </style>
diff --git a/packages/widget-toc/src/reducers.js b/packages/widget-toc/src/reducers.js
index d3f2194..dd712b7 100644
--- a/packages/widget-toc/src/reducers.js
+++ b/packages/widget-toc/src/reducers.js
@@ -1,5 +1,5 @@
 const tocReducer = (data, query) => {
-  const lenses = { getTitle: obj => obj.title, getUri: obj => obj.uri };
+  const lenses = { getLabel: obj => obj.label, getUri: obj => obj.uri };
   return {
     ...data,
     items: data.items.filter(obj =>
diff --git a/src/main.js b/src/main.js
index 27ff049..b625e71 100644
--- a/src/main.js
+++ b/src/main.js
@@ -61,12 +61,9 @@ Vue.use(SkeletonPlugin, {
     ...tocIconMap,
     ...namedEntitesReaderIconMap,
     ...imageModeReaderIconMap,
+    ...tocIconMap,
   },
   config: {
-    endpoints: {
-      // FIXME: GraphQL
-      tocEndpoint: 'http://localhost:8000',
-    },
     entityMap: {
       accessToken:
         // eslint-disable-next-line max-len