diff --git a/client-v3/e2e/tests/06-show-config-characters.spec.ts b/client-v3/e2e/tests/06-show-config-characters.spec.ts
index 234271b1..e6e957bc 100644
--- a/client-v3/e2e/tests/06-show-config-characters.spec.ts
+++ b/client-v3/e2e/tests/06-show-config-characters.spec.ts
@@ -194,3 +194,15 @@ test('deletes the cast member', async () => {
   await confirmDialog(page);
   await expect(page.locator('td:has-text("Janet")').first()).not.toBeVisible({ timeout: 5_000 });
 });
+
+// ── Character Timeline ─────────────────────────────────────────────────────
+
+test('switches to Timeline sub-tab', async () => {
+  await page.goto(`${UI_BASE}/show-config/characters`);
+  await waitForAppReady(page);
+  await page.click('.nav-link:has-text("Timeline"), button[role="tab"]:has-text("Timeline")');
+  // No script lines yet — expect the empty-state message (lazy tab, needs extra timeout)
+  await expect(page.locator('text=No character line data to display')).toBeVisible({
+    timeout: 10_000,
+  });
+});
diff --git a/client-v3/src/components/show/config/characters/CharacterTimeline.vue b/client-v3/src/components/show/config/characters/CharacterTimeline.vue
new file mode 100644
index 00000000..4c145cce
--- /dev/null
+++ b/client-v3/src/components/show/config/characters/CharacterTimeline.vue
@@ -0,0 +1,253 @@
+<template>
+  <div class="timeline-container">
+    <div v-if="loading" class="text-center py-5">
+      <BSpinner label="Loading timeline..." />
+    </div>
+    <div v-else class="timeline-wrapper">
+      <div class="timeline-controls-bar">
+        <BButton
+          v-b-tooltip.hover.top="'Export as PNG'"
+          size="sm"
+          variant="outline-secondary"
+          @click="handleExport"
+        >
+          <IMdiDownload /> Export
+        </BButton>
+      </div>
+
+      <div class="svg-container">
+        <div v-if="!hasData" class="text-center py-5 text-muted">
+          No character line data to display. Ensure the script has dialogue lines assigned to
+          characters.
+        </div>
+        <svg v-else ref="svgRef" :width="totalWidth" :height="totalHeight" class="timeline-svg">
+          <!-- Act labels -->
+          <g class="act-labels" :transform="`translate(${margin.left},0)`">
+            <g v-for="actGroup in actGroups" :key="`act-${actGroup.actId}`">
+              <rect
+                :x="actGroup.startX"
+                :y="5"
+                :width="actGroup.width"
+                :height="25"
+                class="act-header"
+              />
+              <text
+                :x="actGroup.startX + actGroup.width / 2"
+                :y="22"
+                class="act-label"
+                text-anchor="middle"
+              >
+                {{ actGroup.actName }}
+              </text>
+            </g>
+          </g>
+
+          <!-- Scene labels -->
+          <g class="scene-labels" :transform="`translate(${margin.left},${margin.top})`">
+            <text
+              v-for="(scene, index) in scenes"
+              :key="`scene-label-${scene.id}`"
+              :x="getSceneX(index) + sceneWidth / 2"
+              :y="-10"
+              class="scene-label"
+              text-anchor="middle"
+            >
+              {{ scene.name }}
+            </text>
+          </g>
+
+          <!-- Main content group -->
+          <g :transform="`translate(${margin.left},${margin.top})`">
+            <g class="scene-dividers">
+              <line
+                v-for="(scene, index) in scenes"
+                :key="`divider-${scene.id}`"
+                :x1="getSceneX(index)"
+                :y1="0"
+                :x2="getSceneX(index)"
+                :y2="contentHeight"
+                class="scene-divider"
+              />
+            </g>
+
+            <g class="allocation-bars">
+              <g v-for="bar in allocationBars" :key="bar.id">
+                <rect
+                  :x="bar.x"
+                  :y="bar.y"
+                  :width="bar.width"
+                  :height="bar.height"
+                  :fill="bar.color"
+                  class="allocation-bar"
+                >
+                  <title>{{ bar.tooltip }}</title>
+                </rect>
+                <text
+                  v-if="bar.width >= 30"
+                  :x="bar.x + bar.width / 2"
+                  :y="bar.y + bar.height / 2"
+                  class="bar-label"
+                  text-anchor="middle"
+                  dominant-baseline="middle"
+                  pointer-events="none"
+                  :style="{
+                    fontSize: Math.min(12, (bar.width / bar.label.length) * 1.5) + 'px',
+                  }"
+                >
+                  {{ bar.label }}
+                </text>
+              </g>
+            </g>
+
+            <g class="row-separators">
+              <line
+                v-for="(row, index) in rows"
+                :key="`separator-${row.id}`"
+                :x1="0"
+                :y1="getRowY(index) + rowHeight"
+                :x2="contentWidth"
+                :y2="getRowY(index) + rowHeight"
+                class="row-separator"
+              />
+            </g>
+
+            <g class="row-labels">
+              <text
+                v-for="(row, index) in rows"
+                :key="`row-label-${row.id}`"
+                :x="-10"
+                :y="getRowY(index) + rowHeight / 2"
+                class="row-label"
+                text-anchor="end"
+                dominant-baseline="middle"
+              >
+                {{ row.name }}
+              </text>
+            </g>
+          </g>
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import log from 'loglevel';
+import { makeURL } from '@/js/utils';
+import { useShowStore } from '@/stores/show';
+import { useTimeline, type TimelineRow } from '@/composables/useTimeline';
+
+interface AllocationBar {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  color: string;
+  label: string;
+  tooltip: string;
+}
+
+type LineCounts = Record<string, Record<string, Record<string, number>>>;
+
+const showStore = useShowStore();
+const loading = ref(true);
+const characterStats = ref<{ line_counts?: LineCounts }>({});
+const svgRef = ref<SVGSVGElement | null>(null);
+
+const scenes = computed(() => showStore.orderedScenes);
+
+function getSceneLineCount(characterId: number, actId: number | null, sceneId: number): number {
+  const lineCounts = characterStats.value.line_counts;
+  if (!lineCounts) return 0;
+  return lineCounts[characterId]?.[actId ?? '']?.[sceneId] ?? 0;
+}
+
+function hasAnyLines(characterId: number): boolean {
+  const lineCounts = characterStats.value.line_counts;
+  if (!lineCounts) return false;
+  const charCounts = lineCounts[characterId];
+  if (!charCounts) return false;
+  return Object.values(charCounts).some((actCounts) =>
+    Object.values(actCounts).some((count) => count > 0)
+  );
+}
+
+const rows = computed((): TimelineRow[] =>
+  showStore.characterList
+    .filter((char) => hasAnyLines(char.id))
+    .map((char) => ({ id: char.id, name: char.name ?? `Char ${char.id}`, type: 'character' }))
+);
+
+const {
+  margin,
+  sceneWidth,
+  rowHeight,
+  barPadding,
+  contentWidth,
+  contentHeight,
+  totalWidth,
+  totalHeight,
+  actGroups,
+  getSceneX,
+  getRowY,
+  getColorForEntity,
+  groupConsecutiveScenes,
+  exportTimeline,
+} = useTimeline(scenes, rows);
+
+const allocationBars = computed((): AllocationBar[] => {
+  const bars: AllocationBar[] = [];
+  rows.value.forEach((row, rowIndex) => {
+    const presenceEntries = scenes.value
+      .filter((scene) => getSceneLineCount(row.id, scene.act, scene.id) > 0)
+      .map((scene): Record<string, unknown> => ({ scene_id: scene.id }));
+
+    const segments = groupConsecutiveScenes(presenceEntries);
+    const color = getColorForEntity(row.id, 'character');
+
+    segments.forEach((seg, segIdx) => {
+      bars.push({
+        id: `char-${row.id}-seg-${segIdx}`,
+        x: getSceneX(seg.startIndex),
+        y: getRowY(rowIndex) + barPadding,
+        width: sceneWidth * (seg.endIndex - seg.startIndex + 1),
+        height: rowHeight - 2 * barPadding,
+        color,
+        label: row.name,
+        tooltip:
+          seg.startScene === seg.endScene
+            ? `${row.name} (${seg.startScene})`
+            : `${row.name} (${seg.startScene} – ${seg.endScene})`,
+      });
+    });
+  });
+  return bars;
+});
+
+const hasData = computed(() => scenes.value.length > 0 && rows.value.length > 0);
+
+function handleExport(): void {
+  exportTimeline(svgRef, 'character-timeline', 'Character');
+}
+
+onMounted(async () => {
+  await Promise.all([
+    showStore.getActList(),
+    showStore.getSceneList(),
+    showStore.getCharacterList(),
+  ]);
+  const response = await fetch(makeURL('/api/v1/show/character/stats'));
+  if (response.ok) {
+    characterStats.value = await response.json();
+  } else {
+    log.error('Unable to get character stats!');
+  }
+  loading.value = false;
+});
+</script>
+
+<style lang="scss">
+@use '@/assets/styles/timeline';
+</style>
diff --git a/client-v3/src/views/show/config/ConfigCharacters.vue b/client-v3/src/views/show/config/ConfigCharacters.vue
index be36dbd0..41c9ddc0 100644
--- a/client-v3/src/views/show/config/ConfigCharacters.vue
+++ b/client-v3/src/views/show/config/ConfigCharacters.vue
@@ -70,6 +70,9 @@
           <BTab title="Line Counts">
             <CharacterLineStats />
           </BTab>
+          <BTab title="Timeline">
+            <CharacterTimeline />
+          </BTab>
         </BTabs>
       </BCol>
     </BRow>
diff --git a/client/src/views/show/config/ConfigCharacters.vue b/client/src/views/show/config/ConfigCharacters.vue
index 4be8756a..5c949575 100644
--- a/client/src/views/show/config/ConfigCharacters.vue
+++ b/client/src/views/show/config/ConfigCharacters.vue
@@ -66,6 +66,9 @@
           <b-tab title="Line Counts">
             <character-line-stats />
           </b-tab>
+          <b-tab title="Timeline">
+            <character-timeline />
+          </b-tab>
         </b-tabs>
       </b-col>
     </b-row>
@@ -200,13 +203,14 @@ import { defineComponent } from 'vue';
 import { required } from 'vuelidate/lib/validators';
 import { mapGetters, mapActions } from 'vuex';
 import CharacterLineStats from '@/vue_components/show/config/characters/CharacterLineStats.vue';
+import CharacterTimeline from '@/vue_components/show/config/characters/CharacterTimeline.vue';
 import log from 'loglevel';
 import CharacterGroups from '@/vue_components/show/config/characters/CharacterGroups.vue';
 import formValidationMixin from '@/mixins/formValidationMixin';
 
 export default defineComponent({
   name: 'ConfigCharacters',
-  components: { CharacterGroups, CharacterLineStats },
+  components: { CharacterGroups, CharacterLineStats, CharacterTimeline },
   mixins: [formValidationMixin],
   data() {
     return {
diff --git a/client/src/vue_components/show/config/characters/CharacterTimeline.vue b/client/src/vue_components/show/config/characters/CharacterTimeline.vue
new file mode 100644
index 00000000..3f188fa4
--- /dev/null
+++ b/client/src/vue_components/show/config/characters/CharacterTimeline.vue
@@ -0,0 +1,254 @@
+<template>
+  <div class="timeline-container">
+    <div v-if="loading" class="text-center py-5">
+      <b-spinner label="Loading timeline..." />
+    </div>
+    <div v-else class="timeline-wrapper">
+      <div class="timeline-controls-bar">
+        <b-button size="sm" variant="outline-secondary" title="Export as PNG" @click="handleExport">
+          <b-icon-download />
+        </b-button>
+      </div>
+
+      <div class="svg-container">
+        <div v-if="!hasData" class="text-center py-5 text-muted">
+          No character line data to display. Ensure the script has dialogue lines assigned to
+          characters.
+        </div>
+
+        <svg v-else ref="svg" :width="totalWidth" :height="totalHeight" class="timeline-svg">
+          <!-- Act labels -->
+          <g class="act-labels" :transform="`translate(${margin.left},0)`">
+            <g v-for="actGroup in actGroups" :key="`act-${actGroup.actId}`">
+              <rect
+                :x="actGroup.startX"
+                :y="5"
+                :width="actGroup.width"
+                :height="25"
+                class="act-header"
+              />
+              <text
+                :x="actGroup.startX + actGroup.width / 2"
+                :y="22"
+                class="act-label"
+                text-anchor="middle"
+              >
+                {{ actGroup.actName }}
+              </text>
+            </g>
+          </g>
+
+          <!-- Scene labels -->
+          <g class="scene-labels" :transform="`translate(${margin.left},${margin.top})`">
+            <text
+              v-for="(scene, index) in scenes"
+              :key="`scene-label-${scene.id}`"
+              :x="getSceneX(index) + sceneWidth / 2"
+              :y="-10"
+              class="scene-label"
+              text-anchor="middle"
+            >
+              {{ scene.name }}
+            </text>
+          </g>
+
+          <!-- Main content group -->
+          <g :transform="`translate(${margin.left},${margin.top})`">
+            <g class="scene-dividers">
+              <line
+                v-for="(scene, index) in scenes"
+                :key="`divider-${scene.id}`"
+                :x1="getSceneX(index)"
+                :y1="0"
+                :x2="getSceneX(index)"
+                :y2="contentHeight"
+                class="scene-divider"
+              />
+            </g>
+
+            <g class="allocation-bars">
+              <g v-for="bar in allocationBars" :key="bar.id">
+                <rect
+                  :x="bar.x"
+                  :y="bar.y"
+                  :width="bar.width"
+                  :height="bar.height"
+                  :fill="bar.color"
+                  class="allocation-bar"
+                >
+                  <title>{{ bar.tooltip }}</title>
+                </rect>
+                <text
+                  v-if="bar.width >= 30"
+                  :x="bar.x + bar.width / 2"
+                  :y="bar.y + bar.height / 2"
+                  class="bar-label"
+                  text-anchor="middle"
+                  dominant-baseline="middle"
+                  pointer-events="none"
+                  :style="{
+                    fontSize: Math.min(12, (bar.width / bar.label.length) * 1.5) + 'px',
+                  }"
+                >
+                  {{ bar.label }}
+                </text>
+              </g>
+            </g>
+
+            <g class="row-separators">
+              <line
+                v-for="(row, index) in rows"
+                :key="`separator-${row.id}`"
+                :x1="0"
+                :y1="getRowY(index) + rowHeight"
+                :x2="contentWidth"
+                :y2="getRowY(index) + rowHeight"
+                class="row-separator"
+              />
+            </g>
+
+            <g class="row-labels">
+              <text
+                v-for="(row, index) in rows"
+                :key="`row-label-${row.id}`"
+                :x="-10"
+                :y="getRowY(index) + rowHeight / 2"
+                class="row-label"
+                text-anchor="end"
+                dominant-baseline="middle"
+              >
+                {{ row.name }}
+              </text>
+            </g>
+          </g>
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { mapGetters, mapActions } from 'vuex';
+import { makeURL } from '@/js/utils';
+import log from 'loglevel';
+import timelineMixin from '@/mixins/timelineMixin';
+import type { Scene } from '@/types/api/show';
+
+interface TimelineRow {
+  id: number;
+  name: string;
+  type: string;
+}
+
+interface AllocationBar {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  color: string;
+  label: string;
+  tooltip: string;
+}
+
+export default defineComponent({
+  name: 'CharacterTimeline',
+  mixins: [timelineMixin],
+  data() {
+    return {
+      loading: true,
+      characterStats: {} as Record<string, any>,
+    };
+  },
+  computed: {
+    ...mapGetters(['ORDERED_SCENES', 'CHARACTER_LIST']),
+    hasData(): boolean {
+      return (this as any).scenes.length > 0 && (this as any).rows.length > 0;
+    },
+    scenes(): Scene[] {
+      return (this as any).ORDERED_SCENES || [];
+    },
+    rows(): TimelineRow[] {
+      return ((this as any).CHARACTER_LIST as any[])
+        .filter((char: any) => (this as any).hasAnyLines(char.id))
+        .map((char: any) => ({
+          id: char.id,
+          name: char.name ?? `Char ${char.id}`,
+          type: 'character',
+        }));
+    },
+    allocationBars(): AllocationBar[] {
+      const bars: AllocationBar[] = [];
+      (this as any).rows.forEach((row: TimelineRow, rowIndex: number) => {
+        const presenceEntries = (this as any).scenes
+          .filter(
+            (scene: Scene) => (this as any).getSceneLineCount(row.id, scene.act, scene.id) > 0
+          )
+          .map((scene: Scene) => ({ scene_id: scene.id }));
+
+        const segments = (this as any).groupConsecutiveScenes(presenceEntries);
+        const color = (this as any).getColorForEntity(row.id, 'character');
+
+        segments.forEach((seg: any, segIdx: number) => {
+          bars.push({
+            id: `char-${row.id}-seg-${segIdx}`,
+            x: (this as any).getSceneX(seg.startIndex),
+            y: (this as any).getRowY(rowIndex) + (this as any).barPadding,
+            width: (this as any).sceneWidth * (seg.endIndex - seg.startIndex + 1),
+            height: (this as any).rowHeight - 2 * (this as any).barPadding,
+            color,
+            label: row.name,
+            tooltip:
+              seg.startScene === seg.endScene
+                ? `${row.name} (${seg.startScene})`
+                : `${row.name} (${seg.startScene} – ${seg.endScene})`,
+          });
+        });
+      });
+      return bars;
+    },
+  },
+  async mounted(): Promise<void> {
+    await Promise.all([
+      (this as any).GET_ACT_LIST(),
+      (this as any).GET_SCENE_LIST(),
+      (this as any).GET_CHARACTER_LIST(),
+    ]);
+    await (this as any).getStats();
+    this.loading = false;
+  },
+  methods: {
+    ...mapActions(['GET_ACT_LIST', 'GET_SCENE_LIST', 'GET_CHARACTER_LIST']),
+    hasAnyLines(characterId: number): boolean {
+      const lineCounts = this.characterStats.line_counts;
+      if (!lineCounts) return false;
+      const charCounts = lineCounts[characterId];
+      if (!charCounts) return false;
+      return Object.values(charCounts).some((actCounts: any) =>
+        Object.values(actCounts).some((count: any) => count > 0)
+      );
+    },
+    getSceneLineCount(characterId: number, actId: number | null, sceneId: number): number {
+      const lineCounts = this.characterStats.line_counts;
+      if (!lineCounts) return 0;
+      return lineCounts[characterId]?.[actId ?? '']?.[sceneId] ?? 0;
+    },
+    async getStats(): Promise<void> {
+      const response = await fetch(`${makeURL('/api/v1/show/character/stats')}`);
+      if (response.ok) {
+        this.characterStats = await response.json();
+      } else {
+        log.error('Unable to get character stats!');
+      }
+    },
+    handleExport(): void {
+      (this as any).exportTimeline('character-timeline', 'Character');
+    },
+  },
+});
+</script>
+
+<style lang="scss">
+@use '@/assets/styles/timeline';
+</style>
diff --git a/docs/pages/show_config/cast_and_characters.md b/docs/pages/show_config/cast_and_characters.md
index 084e2e68..8d758501 100644
--- a/docs/pages/show_config/cast_and_characters.md
+++ b/docs/pages/show_config/cast_and_characters.md
@@ -44,4 +44,16 @@ Character groups can also represent performers who aren't named characters in th
 
 ![](../../images/config_show/character_groups_with_data.png)
 
-Once configured, character groups can be used when writing script lines, allowing you to assign dialogue to groups of performers rather than individual characters.
\ No newline at end of file
+Once configured, character groups can be used when writing script lines, allowing you to assign dialogue to groups of performers rather than individual characters.
+
+#### Character Line Counts
+
+The **Line Counts** tab in the Characters section shows a table of how many dialogue lines each character has in each scene. Acts are shown as column group headers, with individual scenes nested beneath them. This is useful for checking workload balance across the cast.
+
+#### Character Timeline
+
+The **Timeline** tab provides a visual overview of character presence across the show. Acts and scenes are displayed along the x-axis, and each character occupies a row on the y-axis. Coloured bars indicate scenes in which a character has spoken dialogue lines — a gap in the bar means the character does not speak in that scene or act.
+
+This view is read-only and updates automatically from the current script revision. Use the **Export** button to download a PNG image of the timeline.
+
+> **Note:** Only characters with at least one spoken line in the current script revision appear in the timeline. Characters with no dialogue are hidden.
\ No newline at end of file