diff --git a/plugins/atem/styles.css b/plugins/atem/styles.css
index a578061..b534d15 100644
--- a/plugins/atem/styles.css
+++ b/plugins/atem/styles.css
@@ -53,10 +53,10 @@ h3 {
   flex-wrap: wrap;
 }
 
-.tbar-progress {
-  width: 100%;
-  height: 40px;
-  accent-color: limegreen;
+.transition-settings {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .tbar-container {
@@ -76,24 +76,38 @@ h3 {
   overflow: hidden;
 }
 
+.dsk {
+  width: 100%;
+}
+
 .dsk .source-wrapper {
   display: flex;
   flex-direction: column;
-  width: fit-content;
+  align-content: center;
+  width: 100%;
   padding: 5px;
 }
 
+.dsk h3 {
+  text-align: center;
+}
+
 .fade-to-black-container {
   display: flex;
+  flex-direction: column;
   align-items: flex-end;
 }
 
 .fade-to-black .source-wrapper {
   display: flex;
-  width: fit-content;
+  width: 100%;
   padding: 5px;
 }
 
+.fade-to-black h3 {
+  text-align: center;
+}
+
 .dsk-rate,
 .ftb-rate,
 .transition-rate {
diff --git a/plugins/atem/template.ejs b/plugins/atem/template.ejs
index 217be36..d6d804d 100644
--- a/plugins/atem/template.ejs
+++ b/plugins/atem/template.ejs
@@ -41,7 +41,7 @@
             </div>
         </div>
         <div class="transition-container">
-            <div>
+            <div class="transition-settings">
                 <div class="next-transition">
                     <h3>Next Transition</h3>
                     <div class="source-wrapper" style="flex-direction:column">
@@ -143,6 +143,30 @@
                 <div id="me-<%= meIndex %>-tbar-div" class="tbar-div" ></div>
             </div>
             <div class="fade-to-black-container">
+                <% if (data.video.downstreamKeyers) { %>
+                    <% Object.entries(data.video.downstreamKeyers).forEach(([dskIndex, state])=>{ %>
+                        <div class="dsk">
+                            <h3 class="atem-gray">DSK<%= Number(dskIndex) + 1 %></h3>
+                            <div class="source-wrapper">
+                                <div id="dsk-<%= dskIndex %>-tie" class="atem-input">
+                                    <div class="source-label">TIE</div>
+                                </div>
+                                <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>
+                                <div id="dsk-<%= dskIndex %>-onair" class="atem-input">
+                                    <div class="source-label" style="flex-direction: column;">
+                                        <div>ON</div> <div>AIR</div>
+                                    </div>
+                                </div>
+                                <div id="dsk-<%= dskIndex %>-auto" class="atem-input">
+                                    <div class="source-label">AUTO</div>
+                                </div>
+                            </div>
+                        </div>
+                    <% }) %>
+                <% } %>
                 <div class="fade-to-black">
                     <h3 class="atem-gray">Fade to Black</h3>
                     <div class="source-wrapper">
@@ -160,29 +184,3 @@
     </div>
 <% }) %>
 <% } %>
-
-
-<% if (data.video.downstreamKeyers) { %>
-    <% Object.entries(data.video.downstreamKeyers).forEach(([dskIndex, state])=>{ %>
-        <div class="dsk">
-            <h3 class="atem-gray">DSK<%= Number(dskIndex) + 1 %></h3>
-            <div class="source-wrapper">
-                <div id="dsk-<%= dskIndex %>-tie" class="atem-input">
-                    <div class="source-label">TIE</div>
-                </div>
-                <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>
-                <div id="dsk-<%= dskIndex %>-onair" class="atem-input">
-                    <div class="source-label" style="flex-direction: column;">
-                        <div>ON</div> <div>AIR</div>
-                    </div>
-                </div>
-                <div id="dsk-<%= dskIndex %>-auto" class="atem-input">
-                    <div class="source-label">AUTO</div>
-                </div>
-            </div>
-        </div>
-    <% }) %>
-<% } %>
\ No newline at end of file