diff --git a/apps/web/src/pages/SharedShowModePage.tsx b/apps/web/src/pages/SharedShowModePage.tsx
index 4bbf5b1..3b81c0b 100644
--- a/apps/web/src/pages/SharedShowModePage.tsx
+++ b/apps/web/src/pages/SharedShowModePage.tsx
@@ -143,17 +143,23 @@ const SharedShowModePage: React.FC = () => {
         if (currentRow) {
           const containerRect = container.getBoundingClientRect();
           const rowRect = currentRow.getBoundingClientRect();
-          const headerHeight = 49; // Height of sticky header
 
-          // Check if row is visible within container
+          // Account for both table header and any sticky section headers
+          // Table header is at top-0 with height ~49px, section headers are at top-[40px]
+          const tableHeaderHeight = 49;
+          const sectionHeaderHeight = 40;
+          const totalStickyHeight = tableHeaderHeight + sectionHeaderHeight; // ~89px
+          const paddingOffset = 20; // Extra padding for visibility
+
+          // Check if row is visible within container, accounting for sticky headers
           const rowTop = rowRect.top - containerRect.top;
           const rowBottom = rowRect.bottom - containerRect.top;
-          const visibleTop = headerHeight;
+          const visibleTop = totalStickyHeight;
           const visibleBottom = containerRect.height;
 
-          // Scroll if row is not fully visible
+          // Scroll if row is not fully visible below sticky headers
           if (rowTop < visibleTop || rowBottom > visibleBottom) {
-            const scrollOffset = rowTop - visibleTop - 20; // 20px padding
+            const scrollOffset = rowTop - visibleTop - paddingOffset;
             container.scrollTo({
               top: container.scrollTop + scrollOffset,
               behavior: "smooth",
@@ -274,7 +280,7 @@ const SharedShowModePage: React.FC = () => {
             <span>Current Cue</span>
           </div>
           <div className="flex items-center">
-            <span className="h-3 w-3 rounded-full bg-red-500 mr-1.5 border border-red-300 shadow-sm"></span>
+            <span className="h-3 w-3 rounded-full bg-orange-500 mr-1.5 border border-orange-300 shadow-sm"></span>
             <span>Next Cue</span>
           </div>
         </div>
@@ -318,7 +324,14 @@ const SharedShowModePage: React.FC = () => {
                   const rowStyle: React.CSSProperties = {};
 
                   if (item.type === "header") {
-                    rowClass = "bg-gray-700 hover:bg-gray-600 font-semibold sticky top-[40px] z-10";
+                    // Calculate z-index based on header position to prevent text bleed-through
+                    // Each subsequent header should have a higher z-index than the previous
+                    const headerIndex = items
+                      .slice(0, index + 1)
+                      .filter((i) => i.type === "header").length;
+                    const zIndex = 10 + headerIndex;
+                    rowClass = "bg-gray-700 hover:bg-gray-600 font-semibold sticky top-[40px]";
+                    rowStyle.zIndex = zIndex;
                   } else {
                     if (item.highlightColor && !isCurrent && !isNext) {
                       rowStyle.backgroundColor = item.highlightColor;
@@ -328,7 +341,8 @@ const SharedShowModePage: React.FC = () => {
                         "bg-green-600/40 hover:bg-green-600/50 border-l-4 border-green-400";
                       delete rowStyle.backgroundColor;
                     } else if (isNext) {
-                      rowClass = "bg-red-600/40 hover:bg-red-600/50 border-l-4 border-red-400";
+                      rowClass =
+                        "bg-orange-600/40 hover:bg-orange-600/50 border-l-4 border-orange-400";
                       delete rowStyle.backgroundColor;
                     }
                   }
diff --git a/apps/web/src/pages/ShowModePage.tsx b/apps/web/src/pages/ShowModePage.tsx
index d4583fd..74f92c1 100644
--- a/apps/web/src/pages/ShowModePage.tsx
+++ b/apps/web/src/pages/ShowModePage.tsx
@@ -272,17 +272,23 @@ const ShowModePage: React.FC = () => {
       if (currentRow) {
         const containerRect = container.getBoundingClientRect();
         const rowRect = currentRow.getBoundingClientRect();
-        const headerHeight = 49; // Height of sticky header
 
-        // Check if row is visible within container
+        // Account for both table header and any sticky section headers
+        // Table header is at top-0 with height ~49px, section headers are at top-[40px]
+        const tableHeaderHeight = 49;
+        const sectionHeaderHeight = 40;
+        const totalStickyHeight = tableHeaderHeight + sectionHeaderHeight; // ~89px
+        const paddingOffset = 20; // Extra padding for visibility
+
+        // Check if row is visible within container, accounting for sticky headers
         const rowTop = rowRect.top - containerRect.top;
         const rowBottom = rowRect.bottom - containerRect.top;
-        const visibleTop = headerHeight;
+        const visibleTop = totalStickyHeight;
         const visibleBottom = containerRect.height;
 
-        // Scroll if row is not fully visible
+        // Scroll if row is not fully visible below sticky headers
         if (rowTop < visibleTop || rowBottom > visibleBottom) {
-          const scrollOffset = rowTop - visibleTop - 20; // 20px padding
+          const scrollOffset = rowTop - visibleTop - paddingOffset;
           container.scrollTo({
             top: container.scrollTop + scrollOffset,
             behavior: "smooth",
@@ -584,7 +590,7 @@ const ShowModePage: React.FC = () => {
                 <span>Current Cue</span>
               </div>
               <div className="flex items-center">
-                <span className="h-3 w-3 rounded-full bg-red-500 mr-2 border border-red-300"></span>
+                <span className="h-3 w-3 rounded-full bg-orange-500 mr-2 border border-orange-300"></span>
                 <span>Next Cue</span>
               </div>
             </div>
@@ -689,7 +695,14 @@ const ShowModePage: React.FC = () => {
                   const rowStyle: React.CSSProperties = {};
 
                   if (item.type === "header") {
-                    rowClass = "bg-gray-700 hover:bg-gray-600 font-semibold sticky top-[40px] z-10";
+                    // Calculate z-index based on header position to prevent text bleed-through
+                    // Each subsequent header should have a higher z-index than the previous
+                    const headerIndex = runOfShow.items
+                      .slice(0, index + 1)
+                      .filter((i) => i.type === "header").length;
+                    const zIndex = 10 + headerIndex;
+                    rowClass = "bg-gray-700 hover:bg-gray-600 font-semibold sticky top-[40px]";
+                    rowStyle.zIndex = zIndex;
                   } else {
                     if (item.highlightColor && !isCurrent && !isNext) {
                       rowStyle.backgroundColor = item.highlightColor;
@@ -699,7 +712,8 @@ const ShowModePage: React.FC = () => {
                         "bg-green-600/40 hover:bg-green-600/50 border-l-4 border-green-400";
                       delete rowStyle.backgroundColor;
                     } else if (isNext) {
-                      rowClass = "bg-red-600/40 hover:bg-red-600/50 border-l-4 border-red-400";
+                      rowClass =
+                        "bg-orange-600/40 hover:bg-orange-600/50 border-l-4 border-orange-400";
                       delete rowStyle.backgroundColor;
                     }
                   }