diff --git a/src/components/flowchart/index.js b/src/components/flowchart/index.js
index f75a2816be..654fd4891a 100644
--- a/src/components/flowchart/index.js
+++ b/src/components/flowchart/index.js
@@ -143,12 +143,12 @@ export class FlowChart extends Component {
       this.el.wrapper.attr('transform', event.transform);
 
       // Update layer label y positions
-      this.el.layerNames
-        .style('height', d => `${d.height * scale}px`)
-        .style('transform', d => {
-          const ty = y + d.y * scale;
+      if (this.el.layerNames) {
+        this.el.layerNames.style('transform', d => {
+          const ty = y + (d.y + d.height / 2) * scale;
           return `translateY(${ty}px)`;
         });
+      }
 
       // Hide the tooltip so it doesn't get misaligned to its node
       this.hideTooltip();
diff --git a/src/components/flowchart/styles/_layers.scss b/src/components/flowchart/styles/_layers.scss
index 514cba5bd5..8741de800e 100644
--- a/src/components/flowchart/styles/_layers.scss
+++ b/src/components/flowchart/styles/_layers.scss
@@ -21,28 +21,30 @@
   position: absolute;
   top: 0;
   left: 0;
+  width: 130px;
+  height: 100%;
   margin: 0;
   padding: 0;
   list-style: none;
   pointer-events: none;
+
+  .kui-theme--dark & {
+    background: linear-gradient(to right, $color-bg-dark, transparent);
+  }
+
+  .kui-theme--light & {
+    background: linear-gradient(to right, $color-bg-light, transparent);
+  }
 }
 
 .layer-name {
   position: absolute;
-  top: 0;
+  top: -10px;
   display: flex;
   align-items: center;
-  width: 130px;
+  height: 20px;
   padding-left: 15px;
   font-weight: bold;
   font-size: 1.6em;
   white-space: nowrap;
-
-  .kui-theme--dark & {
-    background: linear-gradient(to right, $color-bg-dark, transparent);
-  }
-
-  .kui-theme--light & {
-    background: linear-gradient(to right, $color-bg-light, transparent);
-  }
 }