diff --git a/ui/app/styles/components.scss b/ui/app/styles/components.scss
index 109ea093c..9c2de8901 100644
--- a/ui/app/styles/components.scss
+++ b/ui/app/styles/components.scss
@@ -8,7 +8,8 @@
 @import './components/ember-power-select';
 @import './components/empty-message';
 @import './components/error-container';
-@import './components/exec';
+@import './components/exec-button';
+@import './components/exec-window';
 @import './components/fs-explorer';
 @import './components/gutter';
 @import './components/gutter-toggle';
diff --git a/ui/app/styles/components/exec-button.scss b/ui/app/styles/components/exec-button.scss
new file mode 100644
index 000000000..4dbee4940
--- /dev/null
+++ b/ui/app/styles/components/exec-button.scss
@@ -0,0 +1,16 @@
+.exec-button {
+  color: $ui-gray-800;
+  border-color: $ui-gray-300;
+
+  span {
+    color: $ui-gray-800;
+  }
+
+  .icon:first-child:not(:last-child) {
+    width: 0.9rem;
+    height: 0.9rem;
+    margin-left: 0;
+    margin-right: 0.5em;
+    fill: currentColor;
+  }
+}
diff --git a/ui/app/styles/components/exec-window.scss b/ui/app/styles/components/exec-window.scss
new file mode 100644
index 000000000..3f6813477
--- /dev/null
+++ b/ui/app/styles/components/exec-window.scss
@@ -0,0 +1,152 @@
+.exec-window {
+  display: flex;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 3.5rem; // nav.navbar.is-popup height
+  bottom: 0;
+
+  .terminal-container {
+    flex-grow: 1;
+    background: black;
+    padding: 16px;
+    height: 100%;
+    position: relative;
+    color: white;
+
+    .terminal {
+      height: 100%;
+
+      .xterm .xterm-viewport {
+        overflow-y: auto;
+      }
+    }
+  }
+
+  &.loading {
+    justify-content: center;
+    align-items: center;
+    background: black;
+    height: 100%;
+  }
+
+  .task-group-tree {
+    background-color: $ui-gray-900;
+    color: white;
+    padding: 16px;
+    width: 200px;
+    flex-shrink: 0;
+    overflow-y: auto;
+
+    .title {
+      text-transform: uppercase;
+      color: $grey-lighter;
+      font-size: 11px;
+    }
+
+    .icon {
+      color: $ui-gray-500;
+    }
+
+    .toggle-button {
+      position: relative;
+      background: transparent;
+      border: 0;
+      color: white;
+      font-size: inherit;
+      line-height: 1.5;
+      width: 100%;
+      text-align: left;
+      overflow-wrap: break-word;
+      padding: 6px 0 5px 17px;
+
+      .icon {
+        position: absolute;
+        left: 0;
+        padding: 3px 3px 0 0;
+        margin-left: -3px;
+      }
+
+      // Adapted from fs-explorer
+      &.is-loading::after {
+        animation: spinAround 750ms infinite linear;
+        border: 2px solid $grey-light;
+        border-radius: 290486px;
+        border-right-color: transparent;
+        border-top-color: transparent;
+        opacity: 0.3;
+        content: '';
+        display: inline-block;
+        height: 1em;
+        width: 1em;
+        margin-left: 0.5em;
+      }
+    }
+
+    .task-list {
+      .task-item {
+        padding: 0 8px 0 19px;
+
+        color: white;
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .border-and-label {
+          display: flex;
+          align-items: center;
+          height: 100%;
+          width: 100%;
+          position: relative;
+        }
+
+        .border {
+          position: absolute;
+          border-left: 1px solid $ui-gray-700;
+          height: 100%;
+        }
+
+        .is-active {
+          position: absolute;
+          top: 7.5px;
+          left: -9.75px;
+
+          stroke: $ui-gray-900;
+          stroke-width: 5px;
+          fill: white;
+        }
+
+        .task-label {
+          padding: 6px 0 5px 13px;
+          overflow-wrap: break-word;
+          width: 100%;
+        }
+
+        .icon {
+          visibility: hidden;
+          width: 16px;
+          flex-shrink: 0;
+        }
+
+        &:hover .icon.show-on-hover {
+          visibility: visible;
+        }
+      }
+    }
+
+    .toggle-button,
+    .task-item {
+      font-weight: 500;
+
+      &:hover {
+        background-color: $ui-gray-800;
+        border-radius: 4px;
+
+        .is-active {
+          stroke: $ui-gray-800;
+        }
+      }
+    }
+  }
+}
diff --git a/ui/app/styles/components/exec.scss b/ui/app/styles/components/exec.scss
deleted file mode 100644
index f241be3bd..000000000
--- a/ui/app/styles/components/exec.scss
+++ /dev/null
@@ -1,169 +0,0 @@
-.tree-and-terminal {
-  display: flex;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 3.5rem; // nav.navbar.is-popup height
-  bottom: 0;
-
-  .terminal-container {
-    flex-grow: 1;
-    background: black;
-    padding: 16px;
-    height: 100%;
-    position: relative;
-    color: white;
-
-    .terminal {
-      height: 100%;
-
-      .xterm .xterm-viewport {
-        overflow-y: auto;
-      }
-    }
-  }
-
-  &.loading {
-    justify-content: center;
-    align-items: center;
-    background: black;
-    height: 100%;
-  }
-}
-
-.task-group-tree {
-  background-color: $ui-gray-900;
-  color: white;
-  padding: 16px;
-  width: 200px;
-  flex-shrink: 0;
-  overflow-y: auto;
-
-  .title {
-    text-transform: uppercase;
-    color: $grey-lighter;
-    font-size: 11px;
-  }
-
-  .icon {
-    color: $ui-gray-500;
-  }
-
-  .toggle-button {
-    position: relative;
-    background: transparent;
-    border: 0;
-    color: white;
-    font-size: inherit;
-    line-height: 1.5;
-    width: 100%;
-    text-align: left;
-    overflow-wrap: break-word;
-    padding: 6px 0 5px 17px;
-
-    .icon {
-      position: absolute;
-      left: 0;
-      padding: 3px 3px 0 0;
-      margin-left: -3px;
-    }
-
-    // Adapted from fs-explorer
-    &.is-loading::after {
-      animation: spinAround 750ms infinite linear;
-      border: 2px solid $grey-light;
-      border-radius: 290486px;
-      border-right-color: transparent;
-      border-top-color: transparent;
-      opacity: 0.3;
-      content: '';
-      display: inline-block;
-      height: 1em;
-      width: 1em;
-      margin-left: 0.5em;
-    }
-  }
-
-  .task-list {
-    .task-item {
-      padding: 0 8px 0 19px;
-
-      color: white;
-      text-decoration: none;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .border-and-label {
-        display: flex;
-        align-items: center;
-        height: 100%;
-        width: 100%;
-        position: relative;
-      }
-
-      .border {
-        position: absolute;
-        border-left: 1px solid $ui-gray-700;
-        height: 100%;
-      }
-
-      .is-active {
-        position: absolute;
-        top: 7.5px;
-        left: -9.75px;
-
-        stroke: $ui-gray-900;
-        stroke-width: 5px;
-        fill: white;
-      }
-
-      .task-label {
-        padding: 6px 0 5px 13px;
-        overflow-wrap: break-word;
-        width: 100%;
-      }
-
-      .icon {
-        visibility: hidden;
-        width: 16px;
-        flex-shrink: 0;
-      }
-
-      &:hover .icon.show-on-hover {
-        visibility: visible;
-      }
-    }
-  }
-
-  .toggle-button,
-  .task-item {
-    font-weight: 500;
-
-    &:hover {
-      background-color: $ui-gray-800;
-      border-radius: 4px;
-
-      .is-active {
-        stroke: $ui-gray-800;
-      }
-    }
-  }
-}
-
-.exec-button {
-  color: $ui-gray-800;
-  border-color: $ui-gray-300;
-
-  span {
-    color: $ui-gray-800;
-  }
-
-  .icon:first-child:not(:last-child) {
-    width: 0.9rem;
-    height: 0.9rem;
-    margin-left: 0;
-    margin-right: 0.5em;
-    fill: currentColor;
-  }
-}
diff --git a/ui/app/templates/exec-loading.hbs b/ui/app/templates/exec-loading.hbs
index 9d3d0db9f..1304be4e8 100644
--- a/ui/app/templates/exec-loading.hbs
+++ b/ui/app/templates/exec-loading.hbs
@@ -12,6 +12,6 @@
   </div>
 </nav>
 
-<div class="tree-and-terminal loading">
+<div class="exec-window loading">
   {{partial "partials/loading-spinner"}}
 </div>
\ No newline at end of file
diff --git a/ui/app/templates/exec.hbs b/ui/app/templates/exec.hbs
index 750755d27..3311b24e9 100644
--- a/ui/app/templates/exec.hbs
+++ b/ui/app/templates/exec.hbs
@@ -30,7 +30,7 @@
 </nav>
 
 {{#if (eq model.status "dead")}}
-  <div class="tree-and-terminal" data-test-exec-job-dead>
+  <div class="exec-window" data-test-exec-job-dead>
     <div class="task-group-tree">
     </div>
     <div class="terminal-container" data-test-exec-job-dead-message>
@@ -38,7 +38,7 @@
     </div>
   </div>
 {{else}}
-  <div class="tree-and-terminal">
+  <div class="exec-window">
     <div class="task-group-tree">
       <h4 class="title is-6">Tasks</h4>
       <ul>