diff --git a/plugins/atem/main.js b/plugins/atem/main.js
index 8f9ffe0..8322628 100644
--- a/plugins/atem/main.js
+++ b/plugins/atem/main.js
@@ -45,9 +45,9 @@ exports.update = function update(device, _document, updateType, data) {
   if (updateType.includes('transitionPosition')) {
     for (let i = 0; i < data.video.mixEffects.length; i++) {
       const mixEffect = data.video.mixEffects[i];
-      const tbarId = `me-${i}-tbar-progress`;
+      const tbarId = `me-${i}-tbar-div`;
       if (document.getElementById(tbarId)) {
-        document.getElementById(tbarId).value = mixEffect.transitionPosition.handlePosition;
+        document.getElementById(tbarId).style.height = `${mixEffect.transitionPosition.handlePosition / 100}%`;
       }
       // TODO: format in 0:00 format
       document.getElementById(`me-${i}-transition-rate`).textContent =
diff --git a/plugins/atem/styles.css b/plugins/atem/styles.css
index 252347d..a578061 100644
--- a/plugins/atem/styles.css
+++ b/plugins/atem/styles.css
@@ -22,11 +22,6 @@ h3 {
   width: fit-content;
 }
 
-.empty {
-  border-color: transparent;
-  background-color: transparent;
-}
-
 .atem-red {
   background: rgb(255, 130, 131);
   background: radial-gradient(circle, rgba(255, 130, 131, 1) 0%, rgba(255, 41, 40, 1) 100%);
@@ -53,12 +48,34 @@ h3 {
   height: 100%;
 }
 
+.transition-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .tbar-progress {
   width: 100%;
   height: 40px;
   accent-color: limegreen;
 }
 
+.tbar-container {
+  display: flex;
+  flex-direction: column-reverse;
+  background-color: #1f1f1f;
+  border: 4px solid;
+  border-color: #1a1a1a;
+  border-radius: 6px;
+  width: 20px;
+  height: auto;
+}
+
+.tbar-div {
+  width: 100%;
+  background-color: limegreen;
+  overflow: hidden;
+}
+
 .dsk .source-wrapper {
   display: flex;
   flex-direction: column;
@@ -66,6 +83,11 @@ h3 {
   padding: 5px;
 }
 
+.fade-to-black-container {
+  display: flex;
+  align-items: flex-end;
+}
+
 .fade-to-black .source-wrapper {
   display: flex;
   width: fit-content;
@@ -95,6 +117,15 @@ h3 {
   text-align: center;
 }
 
+.clear {
+  border-color: transparent;
+  background-color: transparent;
+}
+
 .hide {
   display: none;
 }
+
+.no-wrap {
+  flex-wrap: nowrap;
+}
diff --git a/plugins/atem/template.ejs b/plugins/atem/template.ejs
index 3becdb9..217be36 100644
--- a/plugins/atem/template.ejs
+++ b/plugins/atem/template.ejs
@@ -40,118 +40,123 @@
                 <% }) %>
             </div>
         </div>
-        <div class="next-transition">
-            <h3>Next Transition</h3>
-            <div class="source-wrapper" style="flex-direction:column">
-                <div class="source-wrapper empty">
-                    <div class="atem-input empty"></div>
-                    <div id="me-<%= meIndex %>-key-1-onair" class="atem-input">
-                        <div class="source-label" style="flex-direction: column;">
-                            <div>ON</div> <div>AIR</div>
+        <div class="transition-container">
+            <div>
+                <div class="next-transition">
+                    <h3>Next Transition</h3>
+                    <div class="source-wrapper" style="flex-direction:column">
+                        <div class="source-wrapper no-wrap clear">
+                            <div class="atem-input clear"></div>
+                            <div id="me-<%= meIndex %>-key-1-onair" class="atem-input">
+                                <div class="source-label" style="flex-direction: column;">
+                                    <div>ON</div> <div>AIR</div>
+                                </div>
+                            </div>
+                            <div id="me-<%= meIndex %>-key-2-onair" class="atem-input">
+                                <div class="source-label" style="flex-direction: column;">
+                                    <div>ON</div> <div>AIR</div>
+                                </div>
+                            </div>
+                            <div id="me-<%= meIndex %>-key-3-onair" class="atem-input">
+                                <div class="source-label" style="flex-direction: column;">
+                                    <div>ON</div> <div>AIR</div>
+                                </div>
+                            </div>
+                            <div id="me-<%= meIndex %>-key-4-onair" class="atem-input">
+                                <div class="source-label" style="flex-direction: column;">
+                                    <div>ON</div> <div>AIR</div>
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                    <div id="me-<%= meIndex %>-key-2-onair" class="atem-input">
-                        <div class="source-label" style="flex-direction: column;">
-                            <div>ON</div> <div>AIR</div>
-                        </div>
-                    </div>
-                    <div id="me-<%= meIndex %>-key-3-onair" class="atem-input">
-                        <div class="source-label" style="flex-direction: column;">
-                            <div>ON</div> <div>AIR</div>
-                        </div>
-                    </div>
-                    <div id="me-<%= meIndex %>-key-4-onair" class="atem-input">
-                        <div class="source-label" style="flex-direction: column;">
-                            <div>ON</div> <div>AIR</div>
-                        </div>
-                    </div>
-                </div>
 
-                <div>
-                    <div class="atem-input empty" style="height:10px"></div>
-                </div>
+                        <div>
+                            <div class="atem-input clear" style="height:10px"></div>
+                        </div>
 
-                <div class="source-wrapper empty">
-                    <div id="me-<%= meIndex %>-transition-selection-1" class="atem-input">
-                        <div class="source-label">BKGD</div>
-                    </div>
-                    <div id="me-<%= meIndex %>-transition-selection-2" class="atem-input">
-                        <div class="source-label">KEY 1</div>
-                    </div>
-                    <div id="me-<%= meIndex %>-transition-selection-4" class="atem-input">
-                        <div class="source-label">KEY 2</div>
-                    </div>
-                    <div id="me-<%= meIndex %>-transition-selection-8" class="atem-input">
-                        <div class="source-label">KEY 3</div>
-                    </div>
-                    <div id="me-<%= meIndex %>-transition-selection-16" class="atem-input">
-                        <div class="source-label">KEY 4</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        
-        <div class="transition-style">
-            <h3>Transition Style</h3>
-            <div class="source-wrapper" style="flex-direction:column">
-                <div class="source-wrapper empty">
-                    <div id="me-<%= meIndex %>-transition-style-0" class="atem-input">
-                        <div class="source-label">MIX</div>
-                    </div>
-                    <div id="me-<%= meIndex %>-transition-style-1" class="atem-input">
-                        <div class="source-label">DIP</div>
-                    </div>
-                    <div id="me-<%= meIndex %>-transition-style-2" class="atem-input">
-                        <div class="source-label">WIPE</div>
-                    </div>
-                    <div id="me-<%= meIndex %>-transition-style-4" class="atem-input">
-                        <div class="source-label">STING</div>
-                    </div>
-                    <div id="me-<%= meIndex %>-transition-style-3" class="atem-input">
-                        <div class="source-label">DVE</div>
-                    </div>
-                </div>
-                
-                <div>
-                    <div class="atem-input empty" style="height:10px"></div>
-                </div>
-                
-                <div class="source-wrapper empty">
-                    <div id="me-<%= meIndex %>-prevtrans" class="atem-input">
-                        <div class="source-label" style="flex-direction: column;">
-                            <div>PREV</div> <div>TRANS</div>
+                        <div class="source-wrapper no-wrap clear">
+                            <div id="me-<%= meIndex %>-transition-selection-1" class="atem-input">
+                                <div class="source-label">BKGD</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-selection-2" class="atem-input">
+                                <div class="source-label">KEY 1</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-selection-4" class="atem-input">
+                                <div class="source-label">KEY 2</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-selection-8" class="atem-input">
+                                <div class="source-label">KEY 3</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-selection-16" class="atem-input">
+                                <div class="source-label">KEY 4</div>
+                            </div>
                         </div>
                     </div>
-                    <div class="atem-input empty"></div>
-                    <div id="me-<%= meIndex %>-cut" class="atem-input">
-                        <div class="source-label">CUT</div>
-                    </div>
-                    <div id="me-<%= meIndex %>-auto" class="atem-input">
-                        <div class="source-label">AUTO</div>
-                    </div>
-                    <div class="transition-rate atem-input empty">
-                        <div class="atem-gray" style="text-align: center">Rate</div>
-                        <div id="me-<%= meIndex %>-transition-rate" class="transition-rate-label">00</div>
+                </div>
+            
+                <div class="transition-style">
+                    <h3>Transition Style</h3>
+                    <div class="source-wrapper" style="flex-direction:column">
+                        <div class="source-wrapper no-wrap clear">
+                            <div id="me-<%= meIndex %>-transition-style-0" class="atem-input">
+                                <div class="source-label">MIX</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-style-1" class="atem-input">
+                                <div class="source-label">DIP</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-style-2" class="atem-input">
+                                <div class="source-label">WIPE</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-style-4" class="atem-input">
+                                <div class="source-label">STING</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-style-3" class="atem-input">
+                                <div class="source-label">DVE</div>
+                            </div>
+                        </div>
+                        
+                        <div>
+                            <div class="atem-input clear" style="height:10px"></div>
+                        </div>
+                        
+                        <div class="source-wrapper no-wrap clear">
+                            <div id="me-<%= meIndex %>-prevtrans" class="atem-input">
+                                <div class="source-label" style="flex-direction: column;">
+                                    <div>PREV</div> <div>TRANS</div>
+                                </div>
+                            </div>
+                            <div class="atem-input clear"></div>
+                            <div id="me-<%= meIndex %>-cut" class="atem-input">
+                                <div class="source-label">CUT</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-auto" class="atem-input">
+                                <div class="source-label">AUTO</div>
+                            </div>
+                            <div class="transition-rate atem-input clear">
+                                <div class="atem-gray" style="text-align: center">Rate</div>
+                                <div id="me-<%= meIndex %>-transition-rate" class="transition-rate-label">00</div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="fade-to-black">
-            <h3 class="atem-gray">Fade to Black</h3>
-            <div class="source-wrapper">
-                <div class="ftb-rate atem-input empty">
-                    <div class="atem-gray" style="text-align: center">Rate</div>
-                    <div id="me-<%= meIndex %>-ftb-rate" class="ftb-rate-label">00</div>
-                </div>
-                <div id="me-<%= meIndex %>-ftb" class="atem-input">
-                    <div class="source-label">FTB</div>
+            <div class="tbar-container">
+                <div id="me-<%= meIndex %>-tbar-div" class="tbar-div" ></div>
+            </div>
+            <div class="fade-to-black-container">
+                <div class="fade-to-black">
+                    <h3 class="atem-gray">Fade to Black</h3>
+                    <div class="source-wrapper">
+                        <div class="ftb-rate atem-input clear">
+                            <div class="atem-gray" style="text-align: center">Rate</div>
+                            <div id="me-<%= meIndex %>-ftb-rate" class="ftb-rate-label">00</div>
+                        </div>
+                        <div id="me-<%= meIndex %>-ftb" class="atem-input">
+                            <div class="source-label">FTB</div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-        
-        <div class="source-wrapper" style="width:100%">
-            <progress id="me-<%= meIndex %>-tbar-progress" max="10000" value="0" class="tbar-progress"></progress>
-        </div>
     </div>
 <% }) %>
 <% } %>
@@ -165,7 +170,7 @@
                 <div id="dsk-<%= dskIndex %>-tie" class="atem-input">
                     <div class="source-label">TIE</div>
                 </div>
-                <div class="dsk-rate atem-input empty">
+                <div class="dsk-rate atem-input clear">
                     <div class="atem-gray" style="text-align: center">Rate</div>
                     <div id="dsk-<%= dskIndex %>-rate" class="dsk-rate-label">00</div>
                 </div>
@@ -180,5 +185,4 @@
             </div>
         </div>
     <% }) %>
-<% } %>
-
+<% } %>
\ No newline at end of file