diff --git a/plugins/atem/main.js b/plugins/atem/main.js
index b972939..6d24eee 100644
--- a/plugins/atem/main.js
+++ b/plugins/atem/main.js
@@ -100,14 +100,18 @@ exports.update = function update(device, _document, updateType, data) {
         .forEach((inputId) => {
           if (mixEffect.programInput === inputId) {
             document.getElementById(`me-${i}-program-input-${inputId}`).classList.add('atem-red');
+            document.getElementById(`me-${i}-input-${inputId}`).classList.add('atem-red');
           } else {
             document.getElementById(`me-${i}-program-input-${inputId}`).classList.remove('atem-red');
+            document.getElementById(`me-${i}-input-${inputId}`).classList.remove('atem-red');
           }
 
           if (mixEffect.previewInput === inputId) {
             document.getElementById(`me-${i}-preview-input-${inputId}`).classList.add('atem-green');
+            document.getElementById(`me-${i}-input-${inputId}`).classList.add('atem-green');
           } else {
             document.getElementById(`me-${i}-preview-input-${inputId}`).classList.remove('atem-green');
+            document.getElementById(`me-${i}-input-${inputId}`).classList.remove('atem-green');
           }
         });
     }
diff --git a/plugins/atem/styles.css b/plugins/atem/styles.css
index 6564099..7eaa2c7 100644
--- a/plugins/atem/styles.css
+++ b/plugins/atem/styles.css
@@ -13,8 +13,8 @@ h3 {
   width: 35px;
   height: 35px;
   background: white;
-  border: 4px solid;
-  border-color: #8c8c8c;
+  border: 2px solid;
+  border-color: #bcbcbc;
   border-radius: 3px;
   margin: 6px;
 }
@@ -30,18 +30,29 @@ h3 {
 }
 
 .atem-red {
-  background: rgb(255, 130, 131);
-  background: radial-gradient(circle, rgba(255, 130, 131, 1) 0%, rgba(255, 41, 40, 1) 100%);
+  background: rgb(255, 128, 132);
+  background: radial-gradient(circle, rgba(255, 128, 132, 1) 0%, rgba(247, 18, 48, 1), rgba(255, 43, 58, 1) 100%);
+  box-shadow: 0px 0px 10px 1px rgb(255, 128, 132);
 }
 
 .atem-green {
   background: rgb(14, 238, 7);
   background: radial-gradient(circle, rgba(14, 238, 7, 1) 0%, rgba(29, 204, 14, 1) 100%);
+  box-shadow: 0px 0px 10px 1px rgb(14, 238, 7);
 }
 
 .atem-yellow {
-  background: rgb(255, 240, 0);
-  background: radial-gradient(circle, rgba(255, 240, 0, 1) 0%, rgba(250, 169, 9, 1) 100%);
+  background: rgb(249, 255, 3);
+  background: radial-gradient(
+    circle,
+    rgba(249, 255, 3, 1) 0%,
+    rgba(253, 214, 14, 1) 55%,
+    rgba(255, 174, 0, 1) 69%,
+    rgba(253, 181, 0, 1) 75%,
+    rgba(249, 197, 7, 1) 79%,
+    rgba(250, 169, 9, 1) 100%
+  );
+  box-shadow: 0px 0px 10px 1px rgb(249, 255, 3);
 }
 
 .atem-gray {
@@ -153,3 +164,16 @@ h3 {
 .no-wrap {
   flex-wrap: nowrap;
 }
+
+.show-small {
+  display: none;
+}
+
+@media screen and (min-width: 0px) and (max-width: 480px) {
+  .hide-small {
+    display: none;
+  }
+  .show-small {
+    display: block;
+  }
+}
diff --git a/plugins/atem/template.ejs b/plugins/atem/template.ejs
index a80cde6..101509d 100644
--- a/plugins/atem/template.ejs
+++ b/plugins/atem/template.ejs
@@ -6,7 +6,23 @@
 <% 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="program">
+        <div class="inputs show-small">
+            <h3 class="atem-gray">Inputs</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)) { %>
+                        <div id="me-<%= meIndex %>-input-<%= input.inputId %>" class="atem-input">
+                            <div class="source-label"><%= input.shortName %></div>
+                        </div>
+                    <% } else {%>
+                        <div id="me-<%= meIndex %>-input-<%= input.inputId %>" class="atem-input hide">
+                            <div class="source-label"><%= input.shortName %></div>
+                        </div>
+                    <% }%>
+                <% }) %>
+            </div>
+        </div>
+        <div class="program 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)=>{ %>
@@ -23,7 +39,7 @@
                 <% }) %>
             </div>
         </div>
-        <div class="preview">
+        <div class="preview hide-small">
             <h3 class="atem-gray">Preview</h3>
             <div class="source-wrapper">
                 <% Object.values(data.inputs).forEach((input)=>{ %>