diff --git a/plugins/atem/main.js b/plugins/atem/main.js
index 6d24eee..034c9c8 100644
--- a/plugins/atem/main.js
+++ b/plugins/atem/main.js
@@ -49,6 +49,12 @@ exports.update = function update(device, _document, updateType, data) {
       // TODO: format in 0:00 format
       document.getElementById(`me-${i}-transition-rate`).textContent =
         `00${mixEffect.transitionPosition.remainingFrames}`.slice(-2);
+
+      if (mixEffect.transitionPosition.inTransition) {
+        document.getElementById(`me-${i}-auto`).classList.add('atem-red');
+      } else {
+        document.getElementById(`me-${i}-auto`).classList.remove('atem-red');
+      }
     }
   } else if (updateType.includes('downstreamKeyers')) {
     for (let i = 0; i < data.video.downstreamKeyers.length; i++) {
@@ -82,7 +88,13 @@ exports.update = function update(device, _document, updateType, data) {
       // TODO: format in 0:00 format
       document.getElementById(ftbRateId).textContent = `00${fadeToBlack.remainingFrames}`.slice(-2);
 
-      if (fadeToBlack.inTransition || fadeToBlack.isFullyBlack) {
+      if (fadeToBlack.isFullyBlack) {
+        if (document.getElementById(ftbId).classList.contains('atem-red')) {
+          document.getElementById(ftbId).classList.remove('atem-red');
+        } else {
+          document.getElementById(ftbId).classList.add('atem-red');
+        }
+      } else if (fadeToBlack.inTransition) {
         document.getElementById(ftbId).classList.add('atem-red');
       } else {
         document.getElementById(ftbId).classList.remove('atem-red');
@@ -164,6 +176,15 @@ exports.update = function update(device, _document, updateType, data) {
         }
       });
     }
+  } else if (updateType.includes('transitionPreview')) {
+    for (let i = 0; i < data.video.mixEffects.length; i++) {
+      const mixEffect = data.video.mixEffects[i];
+      if (mixEffect.transitionPreview) {
+        document.getElementById(`me-${i}-transition-preview`).classList.add('atem-red');
+      } else {
+        document.getElementById(`me-${i}-transition-preview`).classList.remove('atem-red');
+      }
+    }
   } else {
     console.log('unhandled update');
     console.log(updateType);
diff --git a/plugins/atem/template.ejs b/plugins/atem/template.ejs
index 101509d..0e8ac79 100644
--- a/plugins/atem/template.ejs
+++ b/plugins/atem/template.ejs
@@ -6,8 +6,8 @@
 <% Object.entries(data.video.mixEffects).forEach(([meIndex, state])=>{ %>
     <div class="mixeffect_wrapper" id="me-<%= meIndex %>">
         <h1 class="atem-gray me-label">ME<%= Number(meIndex) + 1 %></h1>
-        <div class="inputs show-small">
-            <h3 class="atem-gray">Inputs</h3>
+        <div class="inputs-container show-small">
+            <h3 class="atem-gray">Preview/Program</h3>
             <div class="source-wrapper">
                 <% Object.values(data.inputs).sort((a,b)=>a.internalPortType<b.internalPortType).forEach((input)=>{ %>
                     <% if ([0,1,2,3,4].includes(input.internalPortType)) { %>
@@ -22,7 +22,7 @@
                 <% }) %>
             </div>
         </div>
-        <div class="program hide-small">
+        <div class="program-container hide-small">
             <h3 class="atem-gray">Program</h3>
             <div class="source-wrapper">
                 <% Object.values(data.inputs).sort((a,b)=>a.internalPortType<b.internalPortType).forEach((input)=>{ %>
@@ -135,7 +135,7 @@
                         </div>
                         
                         <div class="source-wrapper no-wrap clear">
-                            <div id="me-<%= meIndex %>-prevtrans" class="atem-input">
+                            <div id="me-<%= meIndex %>-transition-preview" class="atem-input">
                                 <div class="source-label" style="flex-direction: column;">
                                     <div>PREV</div> <div>TRANS</div>
                                 </div>