diff --git a/client/browser/api/index.js b/client/browser/api/index.js
index c8f74c6..09daa8a 100644
--- a/client/browser/api/index.js
+++ b/client/browser/api/index.js
@@ -88,7 +88,7 @@
     clone.query = { id: encodeURIComponent(options.uuid) };
   }
 
-  if (api.options.debug) {
+  if (api.options.debug || options.debug) {
     clone.query = clone.query || {};
     clone.query.debug = 1;
   }
@@ -207,7 +207,10 @@
 API.prototype.run = function(data, callback) {
   var api = this;
   var uuid = data.uuid;
-  var uri = api.url({ action: 'run' });
+  var uri = api.url({
+        action: 'run',
+        debug: true
+      });
 
   if (api.isPending(uuid)) {
     var message = format('%s is already running');
diff --git a/client/browser/components/bundle/index.js b/client/browser/components/bundle/index.js
index ac85a98..d31995f 100644
--- a/client/browser/components/bundle/index.js
+++ b/client/browser/components/bundle/index.js
@@ -27,6 +27,7 @@
       stop: stop,
       save: save,
       fileChange: fileChange,
+      showResults: showResults
     }
   });
 
@@ -51,6 +52,7 @@
 
     // If running clear previous logs and open the console.
     if (running) {
+      state.results.open.set(true);
       state.results.logs.set(hg.array([]));
       state.results.follow.set(true);
     }
@@ -59,6 +61,10 @@
   return state;
 }
 
+function showResults(state, data) {
+  state.results.open.set(true);
+}
+
 // When a file's contents change via the editor update the state.
 function fileChange(state, data) {
   var current = state.files.get(data.name);
diff --git a/client/browser/components/bundle/render.js b/client/browser/components/bundle/render.js
index 746d1f8..4e547db 100644
--- a/client/browser/components/bundle/render.js
+++ b/client/browser/components/bundle/render.js
@@ -40,8 +40,18 @@
 
 function tabs(state, channels) {
   var files = toArray(state.files);
+  var children = files.map(tab, state);
 
-  return h('.tabs', files.map(tab, state));
+  // .spacer for flex box pushing a.show-results to the far right
+  children.push(h('.spacer'));
+
+  children.push(h('a.show-results', {
+    title: 'Open the results console.',
+    href: '#',
+    'ev-click': click(channels.showResults)
+  }));
+
+  return h('.tabs', children);
 }
 
 function tab(file, index, array) {
diff --git a/client/browser/components/log/render.js b/client/browser/components/log/render.js
index a064fbf..4dd85d6 100644
--- a/client/browser/components/log/render.js
+++ b/client/browser/components/log/render.js
@@ -8,7 +8,7 @@
 
 // This is expected to be called an iterator fn passed to logs.map(render)
 function render(state, index, logs) {
-  var time = moment(state.timestamp).format('MMM D HH:mm:ss SSS');
+  var time = moment(state.timestamp).format('MMM D HH:mm:ss.SSS');
   var stream = state.stream || 'unknown';
 
   return h('.log', {
diff --git a/client/browser/components/results/index.js b/client/browser/components/results/index.js
index 95c287c..44c29fb 100644
--- a/client/browser/components/results/index.js
+++ b/client/browser/components/results/index.js
@@ -14,7 +14,8 @@
     debug: hg.value(false),
     channels: {
       follow: follow,
-      debug: debug
+      debug: debug,
+      toggle: toggle
     }
   });
 
@@ -40,3 +41,9 @@
     state.debug.set(data.debug);
   }
 }
+
+function toggle(state, data) {
+  var current = state.open();
+
+  state.open.set(!current);
+}
diff --git a/client/browser/components/results/render.js b/client/browser/components/results/render.js
index 330917a..731d93e 100644
--- a/client/browser/components/results/render.js
+++ b/client/browser/components/results/render.js
@@ -8,20 +8,21 @@
 var followHook = require('./follow-hook');
 var log = require('../log');
 var format = require('format');
+var debug = require('debug')('components:results:render');
 
 module.exports = render;
 
 function render(state, channels) {
-  return h('.results', [
+  debug('update %o', state);
+
+  channels = channels || state.channels;
+
+  return h('.results', {
+    className: state.open ? 'opened' : 'closed'
+  },
+  [
     hg.partial(controls, state, channels),
-    h('.console', {
-      className: state.debug ? 'debug' : ''
-    }, [
-      h('.scroller', {
-        'ev-scroll': scroll(channels.follow, { scrolling: true }),
-        'follow-console': followHook(state.follow)
-      }, state.logs.map(log.render))
-    ])
+    hg.partial(terminal, state, channels)
   ]);
 }
 
@@ -30,12 +31,28 @@
   var title = format('Toggle debug console output %s.', onOrOff);
   var text = format(' Debug: %s', onOrOff);
 
-  return h('.controls', [
-    'Results',
-    h('a.debug', {
+  return h('.results-controls', [
+    h('a.toggle-display', {
+      href: '#',
+      title: (state.open ? 'Close' : 'Open') + ' the results console.',
+      'ev-click': click(channels.toggle),
+    }),
+    h('.title', 'Results'),
+    h('a.debug-button', {
       href: '#',
       'ev-click': click(channels.debug, { debug: ! state.debug }),
       title: title
-    }, text)
+    }, text),
+  ]);
+}
+
+function terminal(state, channels) {
+  return h('.results-console', {
+    className: state.debug ? 'debug' : ''
+  }, [
+    h('.scroller', {
+      'ev-scroll': scroll(channels.follow, { scrolling: true }),
+      'follow-console': followHook(state.follow)
+    }, state.logs.map(log.render))
   ]);
 }
diff --git a/client/package.json b/client/package.json
index 9185b9b..fdea47f 100644
--- a/client/package.json
+++ b/client/package.json
@@ -38,9 +38,11 @@
     "minimist": "^1.1.1",
     "myth": "^1.4.0",
     "pgbundle": "0.0.1",
-    "rework-inherit": "^0.2.3",
+    "raf": "^2.0.4",
     "rework": "^1.0.1",
+    "rework-inherit": "^0.2.3",
     "run-browser": "^2.0.2",
+    "synthetic-dom-events": "git://github.com/Raynos/synthetic-dom-events",
     "tape": "^3.5.0"
   },
   "repository": {
diff --git a/client/public/icons/chevron-left.svg b/client/public/icons/chevron-left.svg
new file mode 100644
index 0000000..4048deb
--- /dev/null
+++ b/client/public/icons/chevron-left.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path d="M30.83 14.83L28 12 16 24l12 12 2.83-2.83L21.66 24z" fill="#ffffff" />
+    <path d="M0 0h48v48H0z" fill="none"/>
+</svg>
diff --git a/client/public/icons/chevron-right.svg b/client/public/icons/chevron-right.svg
new file mode 100644
index 0000000..764bff3
--- /dev/null
+++ b/client/public/icons/chevron-right.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path d="M20 12l-2.83 2.83L26.34 24l-9.17 9.17L20 36l12-12z" fill="#ffffff"/>
+    <path d="M0 0h48v48H0z" fill="none"/>
+</svg>
diff --git a/client/stylesheets/components/results.css b/client/stylesheets/components/results.css
new file mode 100644
index 0000000..c8312d0
--- /dev/null
+++ b/client/stylesheets/components/results.css
@@ -0,0 +1,127 @@
+.results {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--grey-50);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 35%;
+  right: 0;
+  z-index: 2000;
+  transition: transform ease-in-out 0.3s;
+}
+
+.results.closed {
+  transform: translateX(100%);
+}
+
+.results.opened {
+  transform: translateX(0);
+}
+
+.results-controls {
+  display: flex;
+  background-color: var(--cyan-600);
+  padding: var(--gutter-half) var(--gutter);
+  padding-left: var(--gutter-half);
+  color: var(--white);
+}
+
+.results-controls a.toggle-display {
+  inherit: .icon-base;
+  background-image: url(/icons/chevron-right.svg);
+}
+
+.results-controls a.toggle-display {
+  inherit: .icon-base;
+  margin-right: var(--gutter-half);
+}
+
+.opened .results-controls a.toggle-display {
+  background-image: url(/icons/chevron-right.svg);
+}
+
+.closed .results-controls a.toggle-display {
+  background-image: url(/icons/chevron-left.svg);
+}
+
+.results-controls .title {
+  inherit: .type-body;
+  margin: 0;
+  color: var(--white);
+  /* Push .debug-button to the end. */
+  flex: 1;
+}
+
+.results-controls .debug-button {
+  color: var(--blue-grey-700);
+}
+
+.results-console {
+  flex: 1;
+  position: relative;
+}
+
+.scroller {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  padding: var(--gutter);
+}
+
+.log {
+  margin-bottom: var(--gutter);
+}
+
+.log .meta {
+  display: flex;
+}
+
+.log .meta .source {
+  flex: 1;
+  font-weight: bold;
+}
+
+.log .meta .source .stream {
+  font-weight: normal;
+}
+
+.log .message {
+  font-family: "Source Code Pro", monospace;
+  padding-left: var(--gutter-half);
+  overflow: hidden;
+  overflow-y: scroll;
+}
+
+.log .message pre {
+  padding: 0;
+  margin: 0;
+  white-space: pre-wrap;       /* CSS 3 */
+  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+  white-space: -pre-wrap;      /* Opera 4-6 */
+  white-space: -o-pre-wrap;    /* Opera 7 */
+  word-wrap: break-word;
+}
+
+.log.debug pre {
+  color: #00B9F7;
+}
+
+.log.stdout {
+
+}
+
+.log.stderr pre {
+  color: #F03A76;
+}
+
+.log.debug {
+  display: none;
+}
+
+.results-console.debug .log.debug {
+  display: block;
+}
diff --git a/client/stylesheets/icons.css b/client/stylesheets/icons.css
index 5cc16cd..15ce74f 100644
--- a/client/stylesheets/icons.css
+++ b/client/stylesheets/icons.css
@@ -80,8 +80,8 @@
   content: ' ';
   display: inline-block;
   /* matches typography line-height */
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
   vertical-align: middle;
   background-repeat: no-repeat;
   background-position: center center;
diff --git a/client/stylesheets/index.css b/client/stylesheets/index.css
index 80bea7d..449c579 100644
--- a/client/stylesheets/index.css
+++ b/client/stylesheets/index.css
@@ -9,11 +9,13 @@
 @import "./components/buttons.css";
 @import "./components/header.css";
 @import "./components/footer.css";
+@import "./components/results.css";
 
 body, .playground {
   display: flex;
   min-height: 100vh;
   flex-direction: column;
+  overflow: hidden;
 }
 
 main {
@@ -25,8 +27,8 @@
   flex: 1;
   display: flex;
   flex-wrap: wrap;
-  align-content: center;
   justify-content: center;
+  position: relative;
 }
 
 .bundle .code,
@@ -45,6 +47,10 @@
   background-color: var(--cyan-700);
 }
 
+.bundle .tabs .spacer {
+  flex: 1;
+}
+
 .bundle .tabs .tab {
   padding: calc(var(--gutter-half) - 2px) var(--gutter);
   border-bottom: 4px solid transparent;
@@ -56,6 +62,14 @@
   color: var(--white);
 }
 
+.bundle .tabs a.show-results {
+  inherit: .icon-base;
+  background-image: url(/icons/chevron-left.svg);
+  display: block;
+  margin: var(--gutter-half);
+  margin-right: var(--gutter);
+}
+
 .editors {
   flex: 1;
   display: flex;
@@ -65,13 +79,17 @@
 .editor {
   flex: 1;
   position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
   height: 100%;
-  visibility: hidden;
+  display: none;
 }
 
 .editor.active {
-  visibility: visible;
+  display: block;
 }
 
 .ace_editor {
@@ -79,91 +97,6 @@
   height: 100%;
 }
 
-.results {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--grey-50);
-}
-
-.results .controls {
-  background-color: var(--cyan-600);
-  padding: var(--gutter-half) var(--gutter);
-  color: var(--white);
-}
-
-.results .controls a {
-  color: var(--blue-grey-700);
-}
-
-.results .console {
-  flex: 1;
-  position: relative;
-}
-
-.scroller {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: auto;
-  padding: var(--gutter);
-}
-
-.log {
-  margin-bottom: var(--gutter);
-}
-
-.log .meta {
-  display: flex;
-}
-
-.log .meta .source {
-  flex: 1;
-  font-weight: bold;
-}
-
-.log .meta .source .stream {
-  font-weight: normal;
-}
-
-.log .message {
-  font-family: "Source Code Pro", monospace;
-  padding-left: var(--gutter-half);
-  overflow: hidden;
-  overflow-y: scroll;
-}
-
-.log .message pre {
-  padding: 0;
-  margin: 0;
-  white-space: pre-wrap;       /* CSS 3 */
-  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-  white-space: -pre-wrap;      /* Opera 4-6 */
-  white-space: -o-pre-wrap;    /* Opera 7 */
-  word-wrap: break-word;
-}
-
-.log.debug pre {
-  color: #00B9F7;
-}
-
-.log.stdout {
-
-}
-
-.log.stderr pre {
-  color: #F03A76;
-}
-
-.log.debug {
-  display: none;
-}
-
-.console.debug .log.debug {
-  display: block;
-}
-
 .error {
   margin: var(--gutter) auto;
   padding: var(--gutter);
diff --git a/client/test/test-component-results.js b/client/test/test-component-results.js
new file mode 100644
index 0000000..815cc6f
--- /dev/null
+++ b/client/test/test-component-results.js
@@ -0,0 +1,42 @@
+var test = require('tape');
+var results = require('../browser/components/results');
+var raf = require('raf');
+var event = require('synthetic-dom-events');
+var document = require('global/document');
+var hg = require('mercury');
+
+test('results state', function(t) {
+  var state = results();
+
+  t.equal(state.open(), false);
+  t.deepEqual(state.logs(), []);
+  t.end();
+});
+
+// TODO(jasoncampbell): Refactor all the boilerplate here into some simple test
+// helpers and assertion wrappers.
+test('toggle open', function(t) {
+  var div = document.createElement('div');
+  document.body.appendChild(div);
+
+  var state = results();
+  var remove = hg.app(div, state, results.render);
+  var toggle = document.getElementsByClassName('toggle-display')[0];
+
+  t.equal(state.open(), false);
+
+  toggle.dispatchEvent(event('click'));
+
+  raf(function(){
+    var results = document.getElementsByClassName('results')[0];
+
+    t.equal(state.open(), true);
+    t.ok(results.className.match('opened'), 'should have opened class');
+
+    // NOTE: maybe reset state here?
+    document.body.removeChild(div);
+    remove();
+
+    t.end();
+  });
+});