diff --git a/client/app/scripts/components/embedded-terminal.js b/client/app/scripts/components/embedded-terminal.js
index 2ad699449..3c50fcc6e 100644
--- a/client/app/scripts/components/embedded-terminal.js
+++ b/client/app/scripts/components/embedded-terminal.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
-import { getNodeColor, getNodeColorDark } from '../utils/color-utils';
+import { brightenColor, getNodeColorDark } from '../utils/color-utils';
 import Terminal from './terminal';
 import { DETAILS_PANEL_WIDTH, DETAILS_PANEL_MARGINS,
   DETAILS_PANEL_OFFSET } from '../constants/styles';
@@ -12,13 +12,13 @@ class EmeddedTerminal extends React.Component {
     const nodeId = pipe.get('nodeId');
     const node = details.get(nodeId);
     const d = node && node.details;
-    const titleBarColor = d && getNodeColorDark(d.rank, d.label);
-    const statusBarColor = d && getNodeColor(d.rank, d.label);
+    const titleBarColor = d && getNodeColorDark(d.rank, d.label, d.pseudo);
+    const statusBarColor = d && brightenColor(titleBarColor);
     const title = d && d.label;
 
     const style = {
-      right: DETAILS_PANEL_MARGINS.right + DETAILS_PANEL_WIDTH + 10 +
-        (details.size * DETAILS_PANEL_OFFSET)
+      right: DETAILS_PANEL_MARGINS.right + DETAILS_PANEL_WIDTH +
+        ((details.size - 1) * DETAILS_PANEL_OFFSET)
     };
 
     // React unmount/remounts when key changes, this is important for cleaning up
diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js
index a514a7b3b..8ea4d44e1 100644
--- a/client/app/scripts/components/terminal.js
+++ b/client/app/scripts/components/terminal.js
@@ -247,8 +247,14 @@ class Terminal extends React.Component {
   }
 
   getTerminalHeader() {
+    const dark = this.props.titleBarColor || getNeutralColor();
+    const light = this.props.statusBarColor || getNeutralColor();
+    const border = `4px solid ${dark}`;
     const style = {
-      backgroundColor: this.props.titleBarColor || getNeutralColor()
+      borderTop: border,
+      borderBottom: border,
+      borderLeft: border,
+      backgroundColor: light,
     };
     return (
       <div className="terminal-header" style={style}>
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 9d1d47832..56119dce8 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -41,7 +41,7 @@
 @details-window-padding-left: 36px;
 @border-radius: 4px;
 
-@terminal-header-height: 34px;
+@terminal-header-height: 44px + 8px;
 
 @node-opacity-blurred: 0.25;
 @node-highlight-fill-opacity: 0.1;
@@ -979,7 +979,7 @@ h2 {
   }
 
   &-embedded {
-    z-index: 512;
+    z-index: 1024;
     position: fixed;
     top: 24px;
     bottom: 48px;
@@ -996,18 +996,17 @@ h2 {
     border: 0px solid #000000;
     border-radius: 4px;
     color: #f0f0f0;
-    font-family: @mono-font;
-    .shadow-2;
   }
 
   &-header {
     .truncate;
-    text-align: center;
     color: @white;
     height: @terminal-header-height;
     padding: 8px 24px;
     background-color: @text-color;
     position: relative;
+    font-size: 14px;
+    line-height: 28px;
 
     &-title {
       cursor: default;
@@ -1030,7 +1029,6 @@ h2 {
         font-size: 0.8em;
         font-weight: bold;
         text-transform: uppercase;
-        word-spacing: -4px;
 
         &:hover {
           opacity: 1;
@@ -1047,6 +1045,7 @@ h2 {
   &-embedded &-inner { top: @terminal-header-height; }
   &-app &-inner { top: 0; }
   &-inner {
+    font-family: @mono-font;
     position: absolute;
     bottom: 0;
     left: 0;