diff --git a/.gitignore b/.gitignore
index 65b8c2d8..bfc4a15d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,7 +3,7 @@
 CLAUDE.md
 .idea/
 .playwright-mcp/
-PLAN.md
+plans/
 
 # Gradle and Maven with auto-import
 # When using Gradle or Maven with auto-import, you should exclude module files,
diff --git a/client/src/assets/styles/timeline.scss b/client/src/assets/styles/timeline.scss
new file mode 100644
index 00000000..e271a2ef
--- /dev/null
+++ b/client/src/assets/styles/timeline.scss
@@ -0,0 +1,121 @@
+/**
+ * Shared styles for timeline visualization components (MicTimeline, StageTimeline).
+ *
+ * Usage: Import in Vue component <style> block:
+ *   @use '@/assets/styles/timeline';
+ *
+ * Then apply the container class to your root element:
+ *   <div class="timeline-container">
+ */
+
+.timeline-container {
+  position: relative;
+  background-color: var(--body-background);
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  min-height: 400px;
+  height: calc(100vh - 200px);
+}
+
+.timeline-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.timeline-controls-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background-color: rgba(52, 58, 64, 0.95);
+  border-bottom: 1px solid #6c757d;
+  z-index: 10;
+  flex-shrink: 0;
+}
+
+.svg-container {
+  flex: 1;
+  overflow: auto;
+  position: relative;
+  min-height: 0;
+}
+
+.timeline-svg {
+  display: block;
+  background-color: var(--body-background);
+}
+
+// Scene dividers (vertical lines)
+.scene-divider {
+  stroke: #6c757d;
+  stroke-width: 1;
+  opacity: 0.6;
+  shape-rendering: crispEdges;
+}
+
+// Act labels
+.act-header {
+  fill: #343a40;
+  stroke: #6c757d;
+  stroke-width: 1px;
+}
+
+.act-label {
+  fill: #dee2e6;
+  font-size: 14px;
+  font-weight: 600;
+  pointer-events: none;
+  user-select: none;
+}
+
+// Scene labels
+.scene-label {
+  fill: #adb5bd;
+  font-size: 11px;
+  pointer-events: none;
+  user-select: none;
+}
+
+// Row labels
+.row-label {
+  fill: #dee2e6;
+  font-size: 12px;
+  font-weight: 500;
+  pointer-events: none;
+  user-select: none;
+}
+
+// Row separators (horizontal lines)
+.row-separator {
+  stroke: #6c757d;
+  stroke-width: 1px;
+  opacity: 0.5;
+}
+
+// Allocation bars
+.allocation-bar {
+  stroke: #212529;
+  stroke-width: 1px;
+  cursor: pointer;
+  transition:
+    opacity 0.2s ease,
+    stroke-width 0.2s ease;
+
+  &:hover {
+    opacity: 0.8;
+    stroke-width: 2px;
+    stroke: #fff;
+  }
+}
+
+.bar-label {
+  fill: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+  user-select: none;
+}
diff --git a/client/src/mixins/timelineMixin.js b/client/src/mixins/timelineMixin.js
new file mode 100644
index 00000000..fbe41e04
--- /dev/null
+++ b/client/src/mixins/timelineMixin.js
@@ -0,0 +1,224 @@
+import { mapGetters } from 'vuex';
+
+/**
+ * Shared mixin for timeline visualization components (MicTimeline, StageTimeline).
+ * Provides common SVG rendering utilities, layout calculations, and export functionality.
+ *
+ * This mixin assumes the component has:
+ * - A Vuex store with ACT_BY_ID and ORDERED_SCENES getters
+ * - A `scenes` computed property returning the ordered list of scenes
+ * - A `rows` computed property returning items to display as rows
+ * - A `$refs.svg` reference to the SVG element
+ *
+ * Components using this mixin should implement:
+ * - computed.scenes - array of scene objects in order
+ * - computed.rows - array of row items (e.g., mics, props, scenery)
+ * - methods for generating bars specific to their domain
+ */
+export default {
+  data() {
+    return {
+      margin: {
+        top: 75,
+        right: 20,
+        bottom: 20,
+        left: 150,
+      },
+      sceneWidth: 100,
+      rowHeight: 50,
+      barPadding: 6,
+    };
+  },
+
+  computed: {
+    ...mapGetters(['ACT_BY_ID']),
+    contentWidth() {
+      return this.scenes.length * this.sceneWidth;
+    },
+    contentHeight() {
+      return this.rows.length * this.rowHeight;
+    },
+    totalWidth() {
+      return this.margin.left + this.contentWidth + this.margin.right;
+    },
+    totalHeight() {
+      return this.margin.top + this.contentHeight + this.margin.bottom;
+    },
+    actGroups() {
+      const groups = [];
+      let currentAct = null;
+      let startIndex = 0;
+
+      this.scenes.forEach((scene, index) => {
+        const act = this.ACT_BY_ID(scene.act);
+        if (!act) return;
+
+        if (currentAct !== act.id) {
+          if (currentAct !== null) {
+            groups.push({
+              actId: currentAct,
+              actName: this.ACT_BY_ID(currentAct)?.name || 'Unknown',
+              startX: this.getSceneX(startIndex),
+              width: this.getSceneX(index) - this.getSceneX(startIndex),
+            });
+          }
+          currentAct = act.id;
+          startIndex = index;
+        }
+      });
+
+      // Push final group
+      if (currentAct !== null) {
+        groups.push({
+          actId: currentAct,
+          actName: this.ACT_BY_ID(currentAct)?.name || 'Unknown',
+          startX: this.getSceneX(startIndex),
+          width: this.getSceneX(this.scenes.length) - this.getSceneX(startIndex),
+        });
+      }
+
+      return groups;
+    },
+  },
+
+  methods: {
+    getSceneX(sceneIndex) {
+      return sceneIndex * this.sceneWidth;
+    },
+    getRowY(rowIndex) {
+      return rowIndex * this.rowHeight;
+    },
+    getColorForEntity(entityId, entityType) {
+      // Golden ratio angle provides optimal distribution across hue spectrum
+      const GOLDEN_RATIO_CONJUGATE = 137.508;
+
+      // Different offsets for different entity types to avoid collisions
+      const typeOffsets = {
+        mic: 0,
+        character: 120,
+        cast: 240,
+        prop: 60,
+        scenery: 180,
+      };
+
+      const offset = typeOffsets[entityType] || 0;
+      const hue = (entityId * GOLDEN_RATIO_CONJUGATE + offset) % 360;
+
+      // Use high saturation and medium lightness for vibrant, visible colors
+      return `hsl(${hue}, 70%, 50%)`;
+    },
+    groupConsecutiveScenes(allocations, sceneIdField = 'scene_id') {
+      if (!allocations || allocations.length === 0) {
+        return [];
+      }
+
+      const segments = [];
+      let currentSegment = null;
+
+      this.scenes.forEach((scene, sceneIndex) => {
+        const hasAllocation = allocations.some((a) => a[sceneIdField] === scene.id);
+
+        if (hasAllocation) {
+          if (currentSegment) {
+            // Extend current segment
+            currentSegment.endIndex = sceneIndex;
+            currentSegment.endScene = scene.name;
+          } else {
+            // Start new segment
+            currentSegment = {
+              startIndex: sceneIndex,
+              endIndex: sceneIndex,
+              startScene: scene.name,
+              endScene: scene.name,
+            };
+          }
+        } else if (currentSegment) {
+          // End current segment
+          segments.push(currentSegment);
+          currentSegment = null;
+        }
+      });
+
+      // Push final segment
+      if (currentSegment) {
+        segments.push(currentSegment);
+      }
+
+      return segments;
+    },
+    exportTimeline(filenamePrefix = 'timeline', viewModeName = '') {
+      const svgElement = this.$refs.svg;
+      if (!svgElement) return;
+
+      // Create a clone of the SVG to avoid modifying the original
+      const svgClone = svgElement.cloneNode(true);
+
+      // Inline critical styles for export (for print-friendly output)
+      this.applyExportStyles(svgClone);
+
+      // Serialize the SVG to a string
+      const serializer = new XMLSerializer();
+      const svgString = serializer.serializeToString(svgClone);
+
+      // Create a blob and download link
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      const img = new Image();
+
+      // Set canvas size to SVG size
+      canvas.width = this.totalWidth;
+      canvas.height = this.totalHeight;
+
+      img.onload = () => {
+        // Draw white background for print-friendly output
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        // Draw the SVG image
+        ctx.drawImage(img, 0, 0);
+
+        // Convert canvas to blob and download
+        canvas.toBlob((blob) => {
+          const url = URL.createObjectURL(blob);
+          const link = document.createElement('a');
+          const dateSuffix = new Date().toISOString().slice(0, 10);
+          const modeSuffix = viewModeName ? `-${viewModeName}` : '';
+          link.download = `${filenamePrefix}${modeSuffix}-${dateSuffix}.png`;
+          link.href = url;
+          link.click();
+          URL.revokeObjectURL(url);
+        });
+      };
+
+      // Create a data URL from the SVG string
+      const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
+      const svgUrl = URL.createObjectURL(svgBlob);
+      img.src = svgUrl;
+    },
+    applyExportStyles(svgClone) {
+      // Define export styles for print-friendly output
+      const exportStyles = {
+        '.scene-divider': { stroke: '#495057', 'stroke-width': '1', opacity: '0.4' },
+        '.row-separator': { stroke: '#495057', 'stroke-width': '1', opacity: '0.3' },
+        '.act-header': { fill: '#e9ecef', stroke: '#495057', 'stroke-width': '1' },
+        '.act-label': { fill: '#212529', 'font-size': '14', 'font-weight': '600' },
+        '.scene-label': { fill: '#495057', 'font-size': '11' },
+        '.row-label': { fill: '#212529', 'font-size': '12', 'font-weight': '500' },
+        '.allocation-bar': { stroke: '#212529', 'stroke-width': '1' },
+        '.bar-label': {
+          fill: '#ffffff',
+          'font-weight': '600',
+          style: 'text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8)',
+        },
+      };
+
+      Object.entries(exportStyles).forEach(([selector, attrs]) => {
+        svgClone.querySelectorAll(selector).forEach((el) => {
+          Object.entries(attrs).forEach(([attr, value]) => {
+            el.setAttribute(attr, value);
+          });
+        });
+      });
+    },
+  },
+};
diff --git a/client/src/store/modules/stage.js b/client/src/store/modules/stage.js
index 97a901c2..78fa7be3 100644
--- a/client/src/store/modules/stage.js
+++ b/client/src/store/modules/stage.js
@@ -432,6 +432,34 @@ export default {
     CREW_LIST(state) {
       return state.crewList;
     },
+    PROP_BY_ID: (state) => (propId) => {
+      if (propId == null) return null;
+      return state.propsList.find((p) => p.id === propId) || null;
+    },
+    SCENERY_BY_ID: (state) => (sceneryId) => {
+      if (sceneryId == null) return null;
+      return state.sceneryList.find((s) => s.id === sceneryId) || null;
+    },
+    PROPS_ALLOCATIONS_BY_ITEM(state) {
+      const result = {};
+      state.propsAllocations.forEach((alloc) => {
+        if (!result[alloc.props_id]) {
+          result[alloc.props_id] = [];
+        }
+        result[alloc.props_id].push(alloc);
+      });
+      return result;
+    },
+    SCENERY_ALLOCATIONS_BY_ITEM(state) {
+      const result = {};
+      state.sceneryAllocations.forEach((alloc) => {
+        if (!result[alloc.scenery_id]) {
+          result[alloc.scenery_id] = [];
+        }
+        result[alloc.scenery_id].push(alloc);
+      });
+      return result;
+    },
     SCENERY_TYPES(state) {
       return state.sceneryTypes;
     },
diff --git a/client/src/views/show/config/ConfigStage.vue b/client/src/views/show/config/ConfigStage.vue
index 4dc317c3..734f7288 100644
--- a/client/src/views/show/config/ConfigStage.vue
+++ b/client/src/views/show/config/ConfigStage.vue
@@ -15,6 +15,9 @@
           <b-tab title="Stage Manager">
             <stage-manager />
           </b-tab>
+          <b-tab title="Timeline">
+            <stage-timeline />
+          </b-tab>
         </b-tabs>
       </b-col>
     </b-row>
@@ -26,6 +29,7 @@ import CrewList from '@/vue_components/show/config/stage/CrewList.vue';
 import SceneryList from '@/vue_components/show/config/stage/SceneryList.vue';
 import PropsList from '@/vue_components/show/config/stage/PropsList.vue';
 import StageManager from '@/vue_components/show/config/stage/StageManager.vue';
+import StageTimeline from '@/vue_components/show/config/stage/StageTimeline.vue';
 
 export default {
   name: 'ConfigCrew',
@@ -34,6 +38,7 @@ export default {
     PropsList,
     SceneryList,
     CrewList,
+    StageTimeline,
   },
 };
 </script>
diff --git a/client/src/vue_components/show/config/mics/MicTimeline.vue b/client/src/vue_components/show/config/mics/MicTimeline.vue
index 67d487b7..95980978 100644
--- a/client/src/vue_components/show/config/mics/MicTimeline.vue
+++ b/client/src/vue_components/show/config/mics/MicTimeline.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mic-timeline-container">
+  <div class="timeline-container">
     <div v-if="loading" class="text-center py-5">
       <b-spinner label="Loading timeline..." />
     </div>
@@ -30,12 +30,7 @@
           </b-button>
         </b-button-group>
 
-        <b-button
-          size="sm"
-          variant="outline-secondary"
-          title="Export as PNG"
-          @click="exportTimeline"
-        >
+        <b-button size="sm" variant="outline-secondary" title="Export as PNG" @click="handleExport">
           <b-icon-download />
         </b-button>
       </div>
@@ -48,7 +43,7 @@
         </div>
 
         <!-- SVG Timeline -->
-        <svg v-else ref="svg" :width="totalWidth" :height="totalHeight" class="mic-timeline">
+        <svg v-else ref="svg" :width="totalWidth" :height="totalHeight" class="timeline-svg">
           <!-- Act labels (top) -->
           <g class="act-labels" :transform="`translate(${margin.left},0)`">
             <g v-for="actGroup in actGroups" :key="`act-${actGroup.actId}`">
@@ -167,9 +162,11 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import timelineMixin from '@/mixins/timelineMixin';
 
 export default {
   name: 'MicTimeline',
+  mixins: [timelineMixin],
   props: {
     loading: {
       type: Boolean,
@@ -179,15 +176,6 @@ export default {
   data() {
     return {
       viewMode: 'mic', // 'mic', 'character', or 'cast'
-      margin: {
-        top: 75,
-        right: 20,
-        bottom: 20,
-        left: 150,
-      },
-      sceneWidth: 100,
-      rowHeight: 50,
-      barPadding: 6,
     };
   },
   computed: {
@@ -195,8 +183,6 @@ export default {
       'MIC_TIMELINE_DATA',
       'MICROPHONE_BY_ID',
       'CHARACTER_BY_ID',
-      'ACT_BY_ID',
-      'SCENE_BY_ID',
       'CAST_BY_ID',
       'CAST_LIST',
     ]),
@@ -239,53 +225,6 @@ export default {
         type: 'cast',
       }));
     },
-    contentWidth() {
-      return this.scenes.length * this.sceneWidth;
-    },
-    contentHeight() {
-      return this.rows.length * this.rowHeight;
-    },
-    totalWidth() {
-      return this.margin.left + this.contentWidth + this.margin.right;
-    },
-    totalHeight() {
-      return this.margin.top + this.contentHeight + this.margin.bottom;
-    },
-    actGroups() {
-      const groups = [];
-      let currentAct = null;
-      let startIndex = 0;
-
-      this.scenes.forEach((scene, index) => {
-        const act = this.ACT_BY_ID(scene.act);
-        if (!act) return;
-
-        if (currentAct !== act.id) {
-          if (currentAct !== null) {
-            groups.push({
-              actId: currentAct,
-              actName: this.ACT_BY_ID(currentAct)?.name || 'Unknown',
-              startX: this.getSceneX(startIndex),
-              width: this.getSceneX(index) - this.getSceneX(startIndex),
-            });
-          }
-          currentAct = act.id;
-          startIndex = index;
-        }
-      });
-
-      // Push final group
-      if (currentAct !== null) {
-        groups.push({
-          actId: currentAct,
-          actName: this.ACT_BY_ID(currentAct)?.name || 'Unknown',
-          startX: this.getSceneX(startIndex),
-          width: this.getSceneX(this.scenes.length) - this.getSceneX(startIndex),
-        });
-      }
-
-      return groups;
-    },
     allocationBars() {
       const bars = [];
 
@@ -310,33 +249,6 @@ export default {
     },
   },
   methods: {
-    getSceneX(sceneIndex) {
-      return sceneIndex * this.sceneWidth;
-    },
-    getRowY(rowIndex) {
-      return rowIndex * this.rowHeight;
-    },
-    getColorForEntity(entityId, entityType) {
-      // Generate unique, consistent color for any entity (mic, character, or cast)
-      // Use HSL color space for visually distinct colors
-
-      // Use a prime number multiplier to spread IDs evenly across hue spectrum
-      // Golden ratio angle (137.5°) provides optimal distribution
-      const GOLDEN_RATIO_CONJUGATE = 137.508;
-
-      // Different offsets for different entity types to avoid collisions
-      const typeOffsets = {
-        mic: 0,
-        character: 120,
-        cast: 240,
-      };
-
-      const offset = typeOffsets[entityType] || 0;
-      const hue = (entityId * GOLDEN_RATIO_CONJUGATE + offset) % 360;
-
-      // Use high saturation and medium lightness for vibrant, visible colors
-      return `hsl(${hue}, 70%, 50%)`;
-    },
     hasCharacterAllocations(characterId) {
       return Object.values(this.allocations).some((micAllocs) => {
         if (!Array.isArray(micAllocs)) return false;
@@ -566,114 +478,13 @@ export default {
         });
       });
     },
-    exportTimeline() {
-      const svgElement = this.$refs.svg;
-      if (!svgElement) return;
-
-      // Create a clone of the SVG to avoid modifying the original
-      const svgClone = svgElement.cloneNode(true);
-
-      // Inline critical styles for export (for print-friendly output)
-      // This is necessary because XMLSerializer doesn't preserve CSS from stylesheets
-
-      // Style scene dividers (vertical grid lines)
-      svgClone.querySelectorAll('.scene-divider').forEach((el) => {
-        el.setAttribute('stroke', '#495057');
-        el.setAttribute('stroke-width', '1');
-        el.setAttribute('opacity', '0.4');
-      });
-
-      // Style row separators (horizontal grid lines)
-      svgClone.querySelectorAll('.row-separator').forEach((el) => {
-        el.setAttribute('stroke', '#495057');
-        el.setAttribute('stroke-width', '1');
-        el.setAttribute('opacity', '0.3');
-      });
-
-      // Style act headers and labels
-      svgClone.querySelectorAll('.act-header').forEach((el) => {
-        el.setAttribute('fill', '#e9ecef');
-        el.setAttribute('stroke', '#495057');
-        el.setAttribute('stroke-width', '1');
-      });
-
-      svgClone.querySelectorAll('.act-label').forEach((el) => {
-        el.setAttribute('fill', '#212529');
-        el.setAttribute('font-size', '14');
-        el.setAttribute('font-weight', '600');
-      });
-
-      // Style scene labels
-      svgClone.querySelectorAll('.scene-label').forEach((el) => {
-        el.setAttribute('fill', '#495057');
-        el.setAttribute('font-size', '11');
-      });
-
-      // Style row labels
-      svgClone.querySelectorAll('.row-label').forEach((el) => {
-        el.setAttribute('fill', '#212529');
-        el.setAttribute('font-size', '12');
-        el.setAttribute('font-weight', '500');
-      });
-
-      // Style allocation bars (keep their colors but add stroke)
-      svgClone.querySelectorAll('.allocation-bar').forEach((el) => {
-        el.setAttribute('stroke', '#212529');
-        el.setAttribute('stroke-width', '1');
-      });
-
-      // Style bar labels
-      svgClone.querySelectorAll('.bar-label').forEach((el) => {
-        el.setAttribute('fill', '#ffffff');
-        el.setAttribute('font-weight', '600');
-        el.setAttribute('style', 'text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8)');
-      });
-
-      // Serialize the SVG to a string
-      const serializer = new XMLSerializer();
-      const svgString = serializer.serializeToString(svgClone);
-
-      // Create a blob and download link
-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d');
-      const img = new Image();
-
-      // Set canvas size to SVG size
-      canvas.width = this.totalWidth;
-      canvas.height = this.totalHeight;
-
-      img.onload = () => {
-        // Draw white background for print-friendly output
-        ctx.fillStyle = '#ffffff';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-        // Draw the SVG image
-        ctx.drawImage(img, 0, 0);
-
-        // Convert canvas to blob and download
-        canvas.toBlob((blob) => {
-          const url = URL.createObjectURL(blob);
-          const link = document.createElement('a');
-
-          // Determine view mode name for filename
-          let viewModeName = 'Cast';
-          if (this.viewMode === 'mic') {
-            viewModeName = 'Microphone';
-          } else if (this.viewMode === 'character') {
-            viewModeName = 'Character';
-          }
-
-          link.download = `mic-timeline-${viewModeName}-${new Date().toISOString().slice(0, 10)}.png`;
-          link.href = url;
-          link.click();
-          URL.revokeObjectURL(url);
-        });
+    handleExport() {
+      const viewModeNames = {
+        mic: 'Microphone',
+        character: 'Character',
+        cast: 'Cast',
       };
-
-      // Create a data URL from the SVG string
-      const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
-      const svgUrl = URL.createObjectURL(svgBlob);
-      img.src = svgUrl;
+      this.exportTimeline('mic-timeline', viewModeNames[this.viewMode]);
     },
     handleBarClick(bar) {
       this.$emit('bar-click', bar.data);
@@ -688,116 +499,6 @@ export default {
 };
 </script>
 
-<style scoped>
-.mic-timeline-container {
-  position: relative;
-  background-color: var(--body-background);
-  border: 1px solid #dee2e6;
-  border-radius: 0.25rem;
-  overflow: hidden;
-  min-height: 400px;
-  height: calc(100vh - 200px);
-}
-
-.timeline-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.timeline-controls-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px;
-  background-color: rgba(52, 58, 64, 0.95);
-  border-bottom: 1px solid #6c757d;
-  z-index: 10;
-  flex-shrink: 0;
-}
-
-.svg-container {
-  flex: 1;
-  overflow: auto;
-  position: relative;
-  min-height: 0;
-}
-
-.mic-timeline {
-  display: block;
-  background-color: var(--body-background);
-}
-
-/* Scene dividers */
-.scene-divider {
-  stroke: #6c757d;
-  stroke-width: 1;
-  opacity: 0.6;
-  shape-rendering: crispEdges;
-}
-
-/* Act labels */
-.act-header {
-  fill: #343a40;
-  stroke: #6c757d;
-  stroke-width: 1px;
-}
-
-.act-label {
-  fill: #dee2e6;
-  font-size: 14px;
-  font-weight: 600;
-  pointer-events: none;
-  user-select: none;
-}
-
-/* Scene labels */
-.scene-label {
-  fill: #adb5bd;
-  font-size: 11px;
-  pointer-events: none;
-  user-select: none;
-}
-
-/* Row labels */
-.row-label {
-  fill: #dee2e6;
-  font-size: 12px;
-  font-weight: 500;
-  pointer-events: none;
-  user-select: none;
-}
-
-/* Row separators */
-.row-separator {
-  stroke: #6c757d;
-  stroke-width: 1px;
-  opacity: 0.5;
-}
-
-/* Allocation bars */
-.allocation-bar {
-  stroke: #212529;
-  stroke-width: 1px;
-  cursor: pointer;
-  transition:
-    opacity 0.2s ease,
-    stroke-width 0.2s ease;
-}
-
-.allocation-bar:hover {
-  opacity: 0.8;
-  stroke-width: 2px;
-  stroke: #fff;
-}
-
-.bar-label {
-  fill: #fff;
-  font-size: 12px;
-  font-weight: 600;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
-  user-select: none;
-}
+<style lang="scss">
+@use '@/assets/styles/timeline';
 </style>
diff --git a/client/src/vue_components/show/config/stage/StageTimeline.vue b/client/src/vue_components/show/config/stage/StageTimeline.vue
new file mode 100644
index 00000000..14a3d217
--- /dev/null
+++ b/client/src/vue_components/show/config/stage/StageTimeline.vue
@@ -0,0 +1,318 @@
+<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-group>
+          <b-button
+            :variant="viewMode === 'combined' ? 'primary' : 'outline-primary'"
+            size="sm"
+            @click="viewMode = 'combined'"
+          >
+            Combined
+          </b-button>
+          <b-button
+            :variant="viewMode === 'props' ? 'primary' : 'outline-primary'"
+            size="sm"
+            @click="viewMode = 'props'"
+          >
+            Props
+          </b-button>
+          <b-button
+            :variant="viewMode === 'scenery' ? 'primary' : 'outline-primary'"
+            size="sm"
+            @click="viewMode = 'scenery'"
+          >
+            Scenery
+          </b-button>
+        </b-button-group>
+        <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 allocation data to display for this view
+        </div>
+        <svg v-else ref="svg" :width="totalWidth" :height="totalHeight" class="timeline-svg">
+          <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>
+          <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>
+          <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"
+                  @click="handleBarClick(bar)"
+                  @mouseenter="handleBarHover(bar, $event)"
+                  @mouseleave="handleBarLeave()"
+                />
+                <title>{{ bar.tooltip }}</title>
+                <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>
+import { mapGetters, mapActions } from 'vuex';
+import timelineMixin from '@/mixins/timelineMixin';
+
+export default {
+  name: 'StageTimeline',
+  mixins: [timelineMixin],
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      viewMode: 'combined',
+      dataLoaded: false,
+    };
+  },
+  computed: {
+    ...mapGetters([
+      'ORDERED_SCENES',
+      'PROPS_LIST',
+      'SCENERY_LIST',
+      'PROPS_ALLOCATIONS',
+      'SCENERY_ALLOCATIONS',
+      'PROPS_ALLOCATIONS_BY_ITEM',
+      'SCENERY_ALLOCATIONS_BY_ITEM',
+      'PROP_BY_ID',
+      'SCENERY_BY_ID',
+    ]),
+    hasData() {
+      return this.scenes.length > 0 && this.rows.length > 0;
+    },
+    scenes() {
+      return this.ORDERED_SCENES || [];
+    },
+    rows() {
+      const propsRows = this.PROPS_LIST.filter((prop) => this.hasPropAllocations(prop.id)).map(
+        (prop) => ({
+          id: `prop-${prop.id}`,
+          itemId: prop.id,
+          name: prop.name,
+          type: 'prop',
+        })
+      );
+
+      const sceneryRows = this.SCENERY_LIST.filter((scenery) =>
+        this.hasSceneryAllocations(scenery.id)
+      ).map((scenery) => ({
+        id: `scenery-${scenery.id}`,
+        itemId: scenery.id,
+        name: scenery.name,
+        type: 'scenery',
+      }));
+
+      if (this.viewMode === 'props') {
+        return propsRows;
+      }
+      if (this.viewMode === 'scenery') {
+        return sceneryRows;
+      }
+      // Combined: props first, then scenery
+      return [...propsRows, ...sceneryRows];
+    },
+    allocationBars() {
+      const bars = [];
+      this.rows.forEach((row, rowIndex) => {
+        this.generateBarsForItem(row.itemId, row.type, rowIndex, bars);
+      });
+      return bars;
+    },
+  },
+  watch: {
+    viewMode() {
+      this.$forceUpdate();
+    },
+  },
+  async mounted() {
+    await this.loadData();
+  },
+  methods: {
+    ...mapActions([
+      'GET_PROPS_LIST',
+      'GET_SCENERY_LIST',
+      'GET_PROPS_ALLOCATIONS',
+      'GET_SCENERY_ALLOCATIONS',
+      'GET_ACT_LIST',
+      'GET_SCENE_LIST',
+      'GET_PROP_TYPES',
+      'GET_SCENERY_TYPES',
+    ]),
+    async loadData() {
+      await Promise.all([
+        this.GET_ACT_LIST(),
+        this.GET_SCENE_LIST(),
+        this.GET_PROP_TYPES(),
+        this.GET_SCENERY_TYPES(),
+        this.GET_PROPS_LIST(),
+        this.GET_SCENERY_LIST(),
+        this.GET_PROPS_ALLOCATIONS(),
+        this.GET_SCENERY_ALLOCATIONS(),
+      ]);
+      this.dataLoaded = true;
+    },
+    hasPropAllocations(propId) {
+      const allocations = this.PROPS_ALLOCATIONS_BY_ITEM[propId];
+      return allocations && allocations.length > 0;
+    },
+    hasSceneryAllocations(sceneryId) {
+      const allocations = this.SCENERY_ALLOCATIONS_BY_ITEM[sceneryId];
+      return allocations && allocations.length > 0;
+    },
+
+    formatSceneRange(startScene, endScene) {
+      if (startScene === endScene) {
+        return startScene;
+      }
+      return `${startScene} - ${endScene}`;
+    },
+
+    generateBarsForItem(itemId, itemType, rowIndex, bars) {
+      const allocations =
+        itemType === 'prop'
+          ? this.PROPS_ALLOCATIONS_BY_ITEM[itemId] || []
+          : this.SCENERY_ALLOCATIONS_BY_ITEM[itemId] || [];
+      const segments = this.groupConsecutiveScenes(allocations, 'scene_id');
+
+      const item = itemType === 'prop' ? this.PROP_BY_ID(itemId) : this.SCENERY_BY_ID(itemId);
+      const itemName = item?.name || `${itemType === 'prop' ? 'Prop' : 'Scenery'} ${itemId}`;
+
+      segments.forEach((segment, idx) => {
+        const startX = this.getSceneX(segment.startIndex);
+        const width = this.sceneWidth * (segment.endIndex - segment.startIndex + 1);
+
+        bars.push({
+          id: `${itemType}-${itemId}-seg-${idx}`,
+          x: startX,
+          y: this.getRowY(rowIndex) + this.barPadding,
+          width,
+          height: this.rowHeight - 2 * this.barPadding,
+          color: this.getColorForEntity(itemId, itemType),
+          label: itemName,
+          tooltip: `${itemName} (${this.formatSceneRange(segment.startScene, segment.endScene)})`,
+          data: {
+            type: itemType,
+            itemId,
+            startScene: segment.startIndex,
+            endScene: segment.endIndex,
+          },
+        });
+      });
+    },
+    handleExport() {
+      const viewModeNames = {
+        combined: 'Combined',
+        props: 'Props',
+        scenery: 'Scenery',
+      };
+      this.exportTimeline('stage-timeline', viewModeNames[this.viewMode]);
+    },
+    handleBarClick(bar) {
+      this.$emit('bar-click', bar.data);
+    },
+    handleBarHover(bar, event) {
+      this.$emit('bar-hover', { bar: bar.data, event });
+    },
+    handleBarLeave() {
+      this.$emit('bar-leave');
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@use '@/assets/styles/timeline';
+</style>
diff --git a/client/src/vue_components/show/live/StageManagerPane.vue b/client/src/vue_components/show/live/StageManagerPane.vue
index 107975b5..70425282 100644
--- a/client/src/vue_components/show/live/StageManagerPane.vue
+++ b/client/src/vue_components/show/live/StageManagerPane.vue
@@ -49,25 +49,6 @@
         </b-card-header>
         <b-collapse :id="`collapse-${scene.id}`" v-model="expandedScenes[scene.id]">
           <b-card-body class="p-2 scene-body">
-            <!-- Scenery Section -->
-            <div v-if="getSceneryForScene(scene.id).length > 0" class="mb-2">
-              <small class="section-label">Scenery</small>
-              <ul class="item-list mb-0">
-                <li v-for="item in getSceneryForScene(scene.id)" :key="`scenery-${item.id}`">
-                  {{ item.name }}
-                </li>
-              </ul>
-            </div>
-            <!-- Props Section -->
-            <div v-if="getPropsForScene(scene.id).length > 0">
-              <small class="section-label">Props</small>
-              <ul class="item-list mb-0">
-                <li v-for="item in getPropsForScene(scene.id)" :key="`prop-${item.id}`">
-                  {{ item.name }}
-                </li>
-              </ul>
-            </div>
-            <!-- Empty state for scene with no allocations -->
             <div
               v-if="
                 getSceneryForScene(scene.id).length === 0 && getPropsForScene(scene.id).length === 0
@@ -76,10 +57,140 @@
             >
               <small>No props or scenery</small>
             </div>
+            <template v-else>
+              <div
+                class="d-flex justify-content-end align-items-end"
+                @click.stop.prevent="showSMPlanModal(scene)"
+              >
+                <b-button size="sm" variant="primary"> Plan </b-button>
+              </div>
+              <div v-if="getSceneryForScene(scene.id).length > 0" class="mb-2">
+                <small class="section-label">Scenery</small>
+                <ul class="item-list mb-0">
+                  <li v-for="item in getSceneryForScene(scene.id)" :key="`scenery-${item.id}`">
+                    {{ getSceneryDisplayName(item) }}
+                  </li>
+                </ul>
+              </div>
+              <div v-if="getPropsForScene(scene.id).length > 0">
+                <small class="section-label">Props</small>
+                <ul class="item-list mb-0">
+                  <li v-for="item in getPropsForScene(scene.id)" :key="`prop-${item.id}`">
+                    {{ getPropDisplayName(item) }}
+                  </li>
+                </ul>
+              </div>
+            </template>
           </b-card-body>
         </b-collapse>
       </b-card>
     </div>
+    <b-modal
+      id="sm-plan-modal"
+      ref="sm-plan-modal"
+      :title="`${smPlanScene ? getSceneDisplayName(smPlanScene) : ''} - Plan`"
+      size="lg"
+      @hidden="resetSMPlanScene"
+    >
+      <div v-if="smPlanScene">
+        <b-card no-body class="mb-2">
+          <b-card-header header-tag="header" class="p-2" role="button" @click="togglePlanSet">
+            <div class="d-flex justify-content-between align-items-center">
+              <span>
+                <b-icon :icon="smPlanSet ? 'chevron-down' : 'chevron-right'" class="mr-1" />
+                Setting
+              </span>
+            </div>
+          </b-card-header>
+          <b-collapse v-model="smPlanSet">
+            <b-card-body class="p-2">
+              <b-container class="mx-0 px-0" fluid>
+                <b-row class="plan-header-row">
+                  <b-col cols="6" class="plan-header-col border-right">
+                    <b>Scenery</b>
+                  </b-col>
+                  <b-col cols="6" class="plan-header-col">
+                    <b>Props</b>
+                  </b-col>
+                </b-row>
+                <b-row class="plan-content-row">
+                  <b-col cols="6" class="plan-content-col border-right">
+                    <ul v-if="getSettingScenery(smPlanScene).length > 0" class="item-list mb-0">
+                      <li
+                        v-for="item in getSettingScenery(smPlanScene)"
+                        :key="`set-scenery-${item.id}`"
+                      >
+                        {{ getSceneryDisplayName(item) }}
+                      </li>
+                    </ul>
+                    <p v-else class="text-muted mb-0">None</p>
+                  </b-col>
+                  <b-col cols="6" class="plan-content-col">
+                    <ul v-if="getSettingProps(smPlanScene).length > 0" class="item-list mb-0">
+                      <li v-for="item in getSettingProps(smPlanScene)" :key="`set-prop-${item.id}`">
+                        {{ getPropDisplayName(item) }}
+                      </li>
+                    </ul>
+                    <p v-else class="text-muted mb-0">None</p>
+                  </b-col>
+                </b-row>
+              </b-container>
+            </b-card-body>
+          </b-collapse>
+        </b-card>
+        <b-card no-body class="mb-2">
+          <b-card-header header-tag="header" class="p-2" role="button" @click="togglePlanStrike">
+            <div class="d-flex justify-content-between align-items-center">
+              <span>
+                <b-icon :icon="smPlanStrike ? 'chevron-down' : 'chevron-right'" class="mr-1" />
+                Striking
+              </span>
+            </div>
+          </b-card-header>
+          <b-collapse v-model="smPlanStrike">
+            <b-card-body class="p-2">
+              <b-container class="mx-0 px-0" fluid>
+                <b-row class="plan-header-row">
+                  <b-col cols="6" class="plan-header-col border-right">
+                    <b>Scenery</b>
+                  </b-col>
+                  <b-col cols="6" class="plan-header-col">
+                    <b>Props</b>
+                  </b-col>
+                </b-row>
+                <b-row class="plan-content-row">
+                  <b-col cols="6" class="plan-content-col border-right">
+                    <ul v-if="getStrikingScenery(smPlanScene).length > 0" class="item-list mb-0">
+                      <li
+                        v-for="item in getStrikingScenery(smPlanScene)"
+                        :key="`strike-scenery-${item.id}`"
+                      >
+                        {{ getSceneryDisplayName(item) }}
+                      </li>
+                    </ul>
+                    <p v-else class="text-muted mb-0">None</p>
+                  </b-col>
+                  <b-col cols="6" class="plan-content-col">
+                    <ul v-if="getStrikingProps(smPlanScene).length > 0" class="item-list mb-0">
+                      <li
+                        v-for="item in getStrikingProps(smPlanScene)"
+                        :key="`strike-prop-${item.id}`"
+                      >
+                        {{ getPropDisplayName(item) }}
+                      </li>
+                    </ul>
+                    <p v-else class="text-muted mb-0">None</p>
+                  </b-col>
+                </b-row>
+              </b-container>
+            </b-card-body>
+          </b-collapse>
+        </b-card>
+      </div>
+      <div v-else>
+        <p>No scene selected.</p>
+      </div>
+    </b-modal>
   </div>
 </template>
 
@@ -102,6 +213,9 @@ export default {
       expandedScenes: {},
       pinnedScenes: {},
       debounceContentSize: null,
+      smPlanScene: null,
+      smPlanSet: true,
+      smPlanStrike: true,
     };
   },
   computed: {
@@ -157,6 +271,8 @@ export default {
       'SCENERY_ALLOCATIONS',
       'PROPS_LIST',
       'SCENERY_LIST',
+      'PROP_TYPES_DICT',
+      'SCENERY_TYPES_DICT',
     ]),
   },
   watch: {
@@ -213,6 +329,8 @@ export default {
       this.GET_SCENERY_LIST(),
       this.GET_PROPS_ALLOCATIONS(),
       this.GET_SCENERY_ALLOCATIONS(),
+      this.GET_PROP_TYPES(),
+      this.GET_SCENERY_TYPES(),
     ]);
     this.loaded = true;
 
@@ -267,6 +385,14 @@ export default {
         .map((alloc) => this.sceneryDict[alloc.scenery_id])
         .filter((scenery) => scenery != null);
     },
+    getPropDisplayName(prop) {
+      const propType = this.PROP_TYPES_DICT[prop.prop_type_id];
+      return propType ? `${propType.name}: ${prop.name}` : prop.name;
+    },
+    getSceneryDisplayName(scenery) {
+      const sceneryType = this.SCENERY_TYPES_DICT[scenery.scenery_type_id];
+      return sceneryType ? `${sceneryType.name}: ${scenery.name}` : scenery.name;
+    },
     autoScrollToCurrentScene(currentSceneId) {
       const container = this.$refs.scrollContainer;
       if (!container) return;
@@ -295,6 +421,66 @@ export default {
         container.scrollTo({ top: scrollOffset, behavior: 'smooth' });
       }
     },
+    resetSMPlanScene() {
+      this.smPlanScene = null;
+    },
+    showSMPlanModal(scene) {
+      this.smPlanScene = scene;
+      this.$bvModal.show('sm-plan-modal');
+    },
+    togglePlanSet() {
+      this.smPlanSet = !this.smPlanSet;
+    },
+    togglePlanStrike() {
+      this.smPlanStrike = !this.smPlanStrike;
+    },
+    getPreviousScene(scene) {
+      const currentIndex = this.orderedScenes.findIndex((s) => s.id === scene.id);
+      if (currentIndex <= 0) {
+        return null; // First scene or not found
+      }
+      return this.orderedScenes[currentIndex - 1];
+    },
+    getSettingScenery(scene) {
+      const currentScenery = this.getSceneryForScene(scene.id);
+      const previousScene = this.getPreviousScene(scene);
+      if (!previousScene) {
+        return currentScenery; // First scene - all items are being set
+      }
+      const previousSceneryIds = new Set(
+        this.getSceneryForScene(previousScene.id).map((s) => s.id)
+      );
+      return currentScenery.filter((item) => !previousSceneryIds.has(item.id));
+    },
+    getSettingProps(scene) {
+      const currentProps = this.getPropsForScene(scene.id);
+      const previousScene = this.getPreviousScene(scene);
+      if (!previousScene) {
+        return currentProps; // First scene - all items are being set
+      }
+      const previousPropsIds = new Set(this.getPropsForScene(previousScene.id).map((p) => p.id));
+      return currentProps.filter((item) => !previousPropsIds.has(item.id));
+    },
+    getStrikingScenery(scene) {
+      const previousScene = this.getPreviousScene(scene);
+      if (!previousScene) {
+        return []; // First scene - nothing to strike
+      }
+      const currentSceneryIds = new Set(this.getSceneryForScene(scene.id).map((s) => s.id));
+      return this.getSceneryForScene(previousScene.id).filter(
+        (item) => !currentSceneryIds.has(item.id)
+      );
+    },
+    getStrikingProps(scene) {
+      const previousScene = this.getPreviousScene(scene);
+      if (!previousScene) {
+        return []; // First scene - nothing to strike
+      }
+      const currentPropsIds = new Set(this.getPropsForScene(scene.id).map((p) => p.id));
+      return this.getPropsForScene(previousScene.id).filter(
+        (item) => !currentPropsIds.has(item.id)
+      );
+    },
     ...mapActions([
       'GET_ACT_LIST',
       'GET_SCENE_LIST',
@@ -302,6 +488,8 @@ export default {
       'GET_SCENERY_LIST',
       'GET_PROPS_ALLOCATIONS',
       'GET_SCENERY_ALLOCATIONS',
+      'GET_PROP_TYPES',
+      'GET_SCENERY_TYPES',
     ]),
   },
 };
@@ -431,4 +619,31 @@ export default {
   color: #6c757d;
   font-style: italic;
 }
+
+.plan-header-row {
+  margin: 0;
+  padding: 0;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.plan-header-col {
+  padding: 0.5rem 0.75rem;
+}
+
+.plan-header-col.border-right {
+  border-right: 1px solid #dee2e6;
+}
+
+.plan-content-row {
+  margin: 0;
+  padding: 0;
+}
+
+.plan-content-col {
+  padding: 0.5rem 0.75rem;
+}
+
+.plan-content-col.border-right {
+  border-right: 1px solid #dee2e6;
+}
 </style>