diff --git a/common/functions/__tests__/get_flot_axis_config.js b/common/functions/__tests__/get_flot_axis_config.js
index 852f1006e58d0..dbe969bb92dc4 100644
--- a/common/functions/__tests__/get_flot_axis_config.js
+++ b/common/functions/__tests__/get_flot_axis_config.js
@@ -15,40 +15,40 @@ describe('getFlotAxisConfig', () => {
 
   describe('show', () => {
     it('hides the axis', () => {
-      expect(getFlotAxisConfig('x', false, columns, ticks))
+      expect(getFlotAxisConfig('x', false, { columns, ticks }))
         .to.only.have.key('show')
         .and.to.have.property('show', false);
-      expect(getFlotAxisConfig('y', false, columns, ticks))
+      expect(getFlotAxisConfig('y', false, { columns, ticks }))
         .to.only.have.key('show')
         .and.to.have.property('show', false);
     });
 
     it('shows the axis', () => {
-      expect(getFlotAxisConfig('x', true, columns, ticks)).to.have.property('show', true);
-      expect(getFlotAxisConfig('y', true, columns, ticks)).to.have.property('show', true);
+      expect(getFlotAxisConfig('x', true, { columns, ticks })).to.have.property('show', true);
+      expect(getFlotAxisConfig('y', true, { columns, ticks })).to.have.property('show', true);
     });
 
     it('sets show using an AxisConfig', () => {
-      let result = getFlotAxisConfig('x', xAxisConfig, columns, ticks);
+      let result = getFlotAxisConfig('x', xAxisConfig, { columns, ticks });
       expect(result).to.have.property('show', xAxisConfig.show);
 
-      result = getFlotAxisConfig('y', yAxisConfig, columns, ticks);
+      result = getFlotAxisConfig('y', yAxisConfig, { columns, ticks });
       expect(result).to.have.property('show', yAxisConfig.show);
 
-      result = getFlotAxisConfig('x', hideAxis, columns, ticks);
+      result = getFlotAxisConfig('x', hideAxis, { columns, ticks });
       expect(result).to.have.property('show', hideAxis.show);
 
-      result = getFlotAxisConfig('y', hideAxis, columns, ticks);
+      result = getFlotAxisConfig('y', hideAxis, { columns, ticks });
       expect(result).to.have.property('show', hideAxis.show);
     });
   });
 
   describe('position', () => {
     it('sets the position of the axis when given an AxisConfig', () => {
-      let result = getFlotAxisConfig('x', xAxisConfig, columns, ticks);
+      let result = getFlotAxisConfig('x', xAxisConfig, { columns, ticks });
       expect(result).to.have.property('position', xAxisConfig.position);
 
-      result = getFlotAxisConfig('y', yAxisConfig, columns, ticks);
+      result = getFlotAxisConfig('y', yAxisConfig, { columns, ticks });
       expect(result).to.have.property('position', yAxisConfig.position);
     });
 
@@ -59,7 +59,7 @@ describe('getFlotAxisConfig', () => {
         position: 'left',
       };
 
-      const result = getFlotAxisConfig('x', invalidXPosition, columns, ticks);
+      const result = getFlotAxisConfig('x', invalidXPosition, { columns, ticks });
       expect(result).to.have.property('position', 'bottom');
     });
 
@@ -70,27 +70,27 @@ describe('getFlotAxisConfig', () => {
         position: 'bottom',
       };
 
-      const result = getFlotAxisConfig('y', invalidYPosition, columns, ticks);
+      const result = getFlotAxisConfig('y', invalidYPosition, { columns, ticks });
       expect(result).to.have.property('position', 'left');
     });
   });
 
   describe('ticks', () => {
     it('adds a tick mark mapping for string columns', () => {
-      let result = getFlotAxisConfig('x', true, columns, ticks);
+      let result = getFlotAxisConfig('x', true, { columns, ticks });
       expect(result.ticks).to.eql([[2, 'product1'], [1, 'product2']]);
 
-      result = getFlotAxisConfig('x', xAxisConfig, columns, ticks);
+      result = getFlotAxisConfig('x', xAxisConfig, { columns, ticks });
       expect(result.ticks).to.eql([[2, 'product1'], [1, 'product2']]);
     });
   });
 
   describe('mode', () => {
     it('sets the mode to time for date columns', () => {
-      let result = getFlotAxisConfig('y', true, columns, ticks);
+      let result = getFlotAxisConfig('y', true, { columns, ticks });
       expect(result).to.have.property('mode', 'time');
 
-      result = getFlotAxisConfig('y', yAxisConfig, columns, ticks);
+      result = getFlotAxisConfig('y', yAxisConfig, { columns, ticks });
       expect(result).to.have.property('mode', 'time');
     });
   });
diff --git a/common/functions/__tests__/get_font_spec.js b/common/functions/__tests__/get_font_spec.js
new file mode 100644
index 0000000000000..d024b832ff0e6
--- /dev/null
+++ b/common/functions/__tests__/get_font_spec.js
@@ -0,0 +1,31 @@
+import expect from 'expect.js';
+import { getFontSpec } from '../plot/get_font_spec';
+import { fontStyle } from './fixtures/test_styles';
+
+describe('getFontSpec', () => {
+  const defaultSpec = {
+    size: 12,
+    style: 'normal',
+    weight: 'normal',
+    family: '"Open Sans", Helvetica, Arial, sans-serif',
+    color: '#000',
+  };
+
+  describe('default output', () => {
+    it('returns the default spec object', () => {
+      expect(getFontSpec()).to.eql(defaultSpec);
+    });
+  });
+
+  describe('convert from fontStyle object', () => {
+    it('returns plot font spec', () => {
+      expect(getFontSpec(fontStyle)).to.eql({
+        size: 12,
+        style: 'normal',
+        weight: 'bolder',
+        family: 'Chalkboard, serif',
+        color: 'pink',
+      });
+    });
+  });
+});
diff --git a/common/functions/__tests__/plot.js b/common/functions/__tests__/plot.js
index 6d5bcb8b35aa1..13389e8d78041 100644
--- a/common/functions/__tests__/plot.js
+++ b/common/functions/__tests__/plot.js
@@ -131,8 +131,15 @@ describe('plot', () => {
     describe('font', () => {
       it('sets the font style', () => {
         const result = fn(testPlot, { font: fontStyle }).value;
-        expect(result).to.have.property('font');
-        expect(result.font).to.eql(fontStyle);
+        const style = {
+          size: 12,
+          style: 'normal',
+          weight: 'bolder',
+          family: 'Chalkboard, serif',
+          color: 'pink',
+        };
+        expect(result.options.xaxis.font).to.eql(style);
+        expect(result.options.yaxis.font).to.eql(style);
       });
 
       // TODO: write test when using an instance of the interpreter
diff --git a/common/functions/__tests__/render.js b/common/functions/__tests__/render.js
index aad55c4066864..586f91c87a212 100644
--- a/common/functions/__tests__/render.js
+++ b/common/functions/__tests__/render.js
@@ -21,7 +21,7 @@ describe('render', () => {
   it('returns a render', () => {
     const result = fn(renderTable, {
       as: 'debug',
-      css: '".canvas__element { background-color: red; }"',
+      css: '".canvasRenderEl { background-color: red; }"',
       containerStyle: containerStyle,
     });
 
@@ -44,10 +44,10 @@ describe('render', () => {
     describe('css', () => {
       it('sets the custom CSS for the render elemnt', () => {
         const result = fn(renderTable, {
-          css: '".canvas__element { background-color: red; }"',
+          css: '".canvasRenderEl { background-color: red; }"',
         });
 
-        expect(result).to.have.property('css', '".canvas__element { background-color: red; }"');
+        expect(result).to.have.property('css', '".canvasRenderEl { background-color: red; }"');
       });
 
       it("defaults to '* > * {}'", () => {
diff --git a/common/functions/plot/get_flot_axis_config.js b/common/functions/plot/get_flot_axis_config.js
index 5f5c24e73703c..8fd9736985c45 100644
--- a/common/functions/plot/get_flot_axis_config.js
+++ b/common/functions/plot/get_flot_axis_config.js
@@ -1,7 +1,7 @@
 import { get, map } from 'lodash';
 import { getType } from '../../lib/get_type';
 
-export const getFlotAxisConfig = (axis, argValue, columns, ticks) => {
+export const getFlotAxisConfig = (axis, argValue, { columns, ticks, font } = {}) => {
   if (!argValue || argValue.show === false) return { show: false };
 
   const config = { show: true };
@@ -23,5 +23,7 @@ export const getFlotAxisConfig = (axis, argValue, columns, ticks) => {
 
   if (axisType === 'date') config.mode = 'time';
 
+  if (typeof font === 'object') config.font = font;
+
   return config;
 };
diff --git a/common/functions/plot/get_font_spec.js b/common/functions/plot/get_font_spec.js
new file mode 100644
index 0000000000000..bc9a81bf20ea7
--- /dev/null
+++ b/common/functions/plot/get_font_spec.js
@@ -0,0 +1,24 @@
+// converts the output of the font function to a flot font spec
+// for font spec, see https://github.com/flot/flot/blob/master/API.md#customizing-the-axes
+const defaultSpec = {
+  size: 12,
+  style: 'normal',
+  weight: 'normal',
+  family: '"Open Sans", Helvetica, Arial, sans-serif',
+  color: '#000',
+};
+
+export const getFontSpec = argFont => {
+  if (!argFont || !argFont.spec) return defaultSpec;
+
+  const { fontSize, fontStyle, fontWeight, fontFamily, color } = argFont.spec;
+  const size = fontSize && Number(fontSize.replace('px', ''));
+
+  return {
+    size: !isNaN(size) ? size : defaultSpec.size,
+    style: fontStyle || defaultSpec.style,
+    weight: fontWeight || defaultSpec.weight,
+    family: fontFamily || defaultSpec.family,
+    color: color || defaultSpec.color,
+  };
+};
diff --git a/common/functions/plot/index.js b/common/functions/plot/index.js
index 522dbdc379cac..fcfff36f5818f 100644
--- a/common/functions/plot/index.js
+++ b/common/functions/plot/index.js
@@ -3,6 +3,7 @@ import keyBy from 'lodash.keyby';
 import { getColorsFromPalette } from '../../lib/get_colors_from_palette';
 import { getLegendConfig } from '../../lib/get_legend_config';
 import { getFlotAxisConfig } from './get_flot_axis_config';
+import { getFontSpec } from './get_font_spec';
 import { seriesStyleToFlot } from './series_style_to_flot';
 import { getTickHash } from './get_tick_hash';
 
@@ -54,10 +55,9 @@ export const plot = () => ({
   },
   fn: (context, args) => {
     const seriesStyles = keyBy(args.seriesStyle || [], 'label') || {};
-
     const sortedRows = sortBy(context.rows, ['x', 'y', 'color', 'size', 'text']);
-
     const ticks = getTickHash(context.columns, sortedRows);
+    const font = args.font ? getFontSpec(args.font) : {};
 
     const data = map(groupBy(sortedRows, 'color'), (series, label) => {
       const seriesStyle = seriesStyles[label] || args.defaultStyle;
@@ -102,15 +102,22 @@ export const plot = () => ({
       type: 'render',
       as: 'plot',
       value: {
-        font: args.font,
         data: sortBy(data, 'label'),
         options: {
           canvas: false,
           colors: getColorsFromPalette(args.palette, data.length),
           legend: getLegendConfig(args.legend, data.length),
           grid: gridConfig,
-          xaxis: getFlotAxisConfig('x', args.xaxis, context.columns, ticks),
-          yaxis: getFlotAxisConfig('y', args.yaxis, context.columns, ticks),
+          xaxis: getFlotAxisConfig('x', args.xaxis, {
+            columns: context.columns,
+            ticks,
+            font,
+          }),
+          yaxis: getFlotAxisConfig('y', args.yaxis, {
+            columns: context.columns,
+            ticks,
+            font,
+          }),
           series: {
             shadowSize: 0,
             ...seriesStyleToFlot(args.defaultStyle),
diff --git a/common/lib/ast.js b/common/lib/ast.js
index 624d8da709236..07362377942a2 100644
--- a/common/lib/ast.js
+++ b/common/lib/ast.js
@@ -88,7 +88,7 @@ export function fromExpression(expression, type = 'expression') {
   try {
     return parse(String(expression), { startRule: type });
   } catch (e) {
-    throw new Error(`Unable to parse expression: ${expression}\n ${e.message}`);
+    throw new Error(`Unable to parse expression: ${e.message}`);
   }
 }
 
diff --git a/package.json b/package.json
index f6417eee50cf5..cf0043b9ffe98 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@elastic/datemath": "^4.0.2",
-    "@elastic/eui": "^0.0.38-bugfix.1",
+    "@elastic/eui": "^3.0.0",
     "@elastic/numeral": "^2.3.2",
     "@scant/router": "^0.1.0",
     "axios": "^0.18.0",
diff --git a/public/app.js b/public/app.js
index 04d7395df3715..359b791e6673f 100644
--- a/public/app.js
+++ b/public/app.js
@@ -4,8 +4,6 @@ import './angular/config';
 import './angular/services';
 import { CanvasRootController } from './angular/controllers';
 
-// TODO: We needed button style support. Remove this and hackery.less when you can
-import 'bootstrap/dist/css/bootstrap.css';
 import './style/index.css';
 
 // load the application
diff --git a/public/apps/home/home_app.js b/public/apps/home/home_app.js
index 49d45998f294e..0f2688772aa32 100644
--- a/public/apps/home/home_app.js
+++ b/public/apps/home/home_app.js
@@ -1,13 +1,21 @@
 import React from 'react';
+import { EuiTitle, EuiText, EuiSpacer, EuiPanel } from '@elastic/eui';
 import { WorkpadLoader } from '../../components/workpad_loader';
 
 export const HomeApp = () => (
-  <div className="canvas__home_app">
-    <h1>Canvas</h1>
-    <p>
-      Welcome to Canvas! To get started, create a new workpad, or load an existing workpad from the
-      controls below.
-    </p>
-    <WorkpadLoader onClose={() => {}} />
+  <div className="canvasHomeApp">
+    <EuiTitle size="l">
+      <h1>Canvas</h1>
+    </EuiTitle>
+    <EuiText>
+      <p>
+        Welcome to Canvas! To get started, create a new workpad, or load an existing workpad from
+        the controls below.
+      </p>
+    </EuiText>
+    <EuiSpacer size="m" />
+    <EuiPanel className="canvasHomeApp__workpadLoader">
+      <WorkpadLoader onClose={() => {}} />
+    </EuiPanel>
   </div>
 );
diff --git a/public/apps/home/home_app.scss b/public/apps/home/home_app.scss
index 4cc13b790affc..94b26de856de3 100644
--- a/public/apps/home/home_app.scss
+++ b/public/apps/home/home_app.scss
@@ -1,9 +1,3 @@
-.canvas__home_app {
-  padding: $euiSizeS;
-
-  .canvas__workpad_loader {
-    background-color: $euiColorDarkestShade;
-    color: $euiColorLightShade;
-    padding: $euiSizeS;
-  }
+.canvasHomeApp {
+  padding: $euiSize;
 }
diff --git a/public/apps/workpad/workpad_app/workpad_app.js b/public/apps/workpad/workpad_app/workpad_app.js
index 84313886e4c57..fde8c22456171 100644
--- a/public/apps/workpad/workpad_app/workpad_app.js
+++ b/public/apps/workpad/workpad_app/workpad_app.js
@@ -20,22 +20,34 @@ export class WorkpadApp extends React.PureComponent {
     const { editing, deselectElement } = this.props;
 
     return (
-      <div className="canvas__workpad_app">
-        <div className="canvas__workpad_app--main">
-          <div className="canvas__workpad_app--workpad" onMouseDown={deselectElement}>
-            <WorkpadHeader />
-            <div className="canvas__workpad_app--workspace">
-              <Workpad />
+      <div className="canvasLayout">
+        <div className="canvasLayout__rows">
+          <div className="canvasLayout__cols">
+            <div className="canvasLayout__stage">
+              <div className="canvasLayout__stageHeader">
+                <WorkpadHeader />
+              </div>
+
+              <div className="canvasLayout__stageContent" onMouseDown={deselectElement}>
+                <div className="canvasLayout__stageContentOverflow">
+                  <Workpad />
+                </div>
+              </div>
             </div>
+
+            {editing && (
+              <div className="canvasLayout__sidebar">
+                <Sidebar />
+              </div>
+            )}
           </div>
-          {editing && (
-            <div className="canvas__workpad_app--sidebar">
-              <Sidebar />
+
+          {editing ? (
+            <div className="canvasLayout__footer">
+              <Toolbar />
             </div>
-          )}
+          ) : null}
         </div>
-
-        {editing ? <Toolbar /> : null}
       </div>
     );
   }
diff --git a/public/apps/workpad/workpad_app/workpad_app.scss b/public/apps/workpad/workpad_app/workpad_app.scss
index 4d619776eb7ed..f0e62358b3405 100644
--- a/public/apps/workpad/workpad_app/workpad_app.scss
+++ b/public/apps/workpad/workpad_app/workpad_app.scss
@@ -1,36 +1,71 @@
-.canvas__workpad_app {
+.canvasLayout {
   display: flex;
+  background: $euiColorLightestShade;
   flex-grow: 1;
-  flex-direction: column;
   overflow: hidden;
 }
 
-.canvas__workpad_app--main {
-  background-color: $euiColorLightestShade;
+.canvasLayout__rows {
   display: flex;
-  flex: 1 1 auto;
-  flex-direction: row;
-  height: 0px; // Essentially a hack to make the sidebar and workspace scroll when the tray is open
+  flex-direction: column;
+  flex-grow: 1;
+  max-height: 100vh;
 }
 
-.canvas__workpad_app--workpad {
-  background-color: $euiColorLightestShade;
-  padding: $euiSize;
+.canvasLayout__cols {
+  display: flex;
+  align-items: stretch;
   flex-grow: 1;
+}
+
+.canvasLayout__stage {
+  flex-grow: 1;
+  flex-basis: 0%;
   display: flex;
   flex-direction: column;
-  overflow: auto;
 }
 
-.canvas__workpad_app--workspace {
-  flex: 0 0;
-  width: 0;
+.canvasLayout__stageHeader {
+  flex-grow: 0;
+  flex-basis: auto;
+  padding: $euiSizeM $euiSize $euiSizeS $euiSize;
+}
+
+.canvasLayout__stageContent {
+  flex-grow: 1;
+  flex-basis: 0%;
+  position: relative;
 }
 
-.canvas__workpad_app--sidebar {
-  background-color: darken($euiColorLightestShade, 2%);
+.canvasLayout__stageContentOverflow {
+  @include euiScrollBar;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  display: flex;
+  align-items: center;
+}
+
+.canvasLayout__sidebar {
+  flex-grow: 0;
+  flex-basis: auto;
   width: 350px;
+  background: darken($euiColorLightestShade, 2%);
+  display: flex;
+
+  .euiPanel {
+    margin-bottom: $euiSizeS;
+  }
+}
+
+.canvasLayout__footer {
   flex-grow: 0;
-  overflow: auto;
-  border-left: $euiBorderThin;
+  flex-basis: auto;
+  width: 100%;
+  background-color: $euiColorLightestShade;
+  z-index: $euiZNavigation;
 }
diff --git a/public/components/alignment_guide/alignment_guide.js b/public/components/alignment_guide/alignment_guide.js
index dc6919793fff3..db6b03142c215 100644
--- a/public/components/alignment_guide/alignment_guide.js
+++ b/public/components/alignment_guide/alignment_guide.js
@@ -12,7 +12,7 @@ export const AlignmentGuide = ({ transformMatrix, a, b }) => {
     position: 'absolute',
     transform: aero.dom.matrixToCSS(transformMatrix),
   };
-  return <div className="canvas__alignment-guide canvas__interactable" style={newStyle} />;
+  return <div className="canvasAlignmentGuide canvasInteractable" style={newStyle} />;
 };
 
 AlignmentGuide.propTypes = {
diff --git a/public/components/alignment_guide/alignment_guide.scss b/public/components/alignment_guide/alignment_guide.scss
index 920a05d9789f5..27f06b42df453 100644
--- a/public/components/alignment_guide/alignment_guide.scss
+++ b/public/components/alignment_guide/alignment_guide.scss
@@ -1,4 +1,4 @@
-.canvas__alignment-guide {
+.canvasAlignmentGuide {
   transform-origin: center center; /* the default, only for clarity */
   transform-style: preserve-3d;
 }
diff --git a/public/components/app/app.js b/public/components/app/app.js
index c197be7d82d72..8972776da07c6 100644
--- a/public/components/app/app.js
+++ b/public/components/app/app.js
@@ -42,7 +42,7 @@ export class App extends React.PureComponent {
     const restoreRoute = storage.get(LOCALSTORAGE_LASTPAGE);
 
     return (
-      <div className="canvas canvas__container">
+      <div className="canvas canvasContainer">
         <Router
           routes={routes}
           restoreRoute={restoreRoute}
diff --git a/public/components/arg_add/arg_add.js b/public/components/arg_add/arg_add.js
index 8d8d53581859d..adf58d70905c8 100644
--- a/public/components/arg_add/arg_add.js
+++ b/public/components/arg_add/arg_add.js
@@ -1,13 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {
+  EuiDescriptionList,
+  EuiDescriptionListTitle,
+  EuiDescriptionListDescription,
+} from '@elastic/eui';
 
 export const ArgAdd = ({ onValueAdd, displayName, help }) => {
   return (
-    <div className="canvas__arg--add" onClick={onValueAdd}>
-      <strong>{displayName}</strong>
-      <br />
-      {help}
-    </div>
+    <button className="canvasArg__add" onClick={onValueAdd}>
+      <EuiDescriptionList compressed>
+        <EuiDescriptionListTitle>{displayName}</EuiDescriptionListTitle>
+        <EuiDescriptionListDescription>
+          <small>{help}</small>
+        </EuiDescriptionListDescription>
+      </EuiDescriptionList>
+    </button>
   );
 };
 
diff --git a/public/components/arg_add/arg_add.scss b/public/components/arg_add/arg_add.scss
index c0d4b91f8829c..39dd0fdd735e8 100644
--- a/public/components/arg_add/arg_add.scss
+++ b/public/components/arg_add/arg_add.scss
@@ -1,8 +1,7 @@
-
-.canvas__arg--add {
-  cursor: pointer;
-  padding: $euiSizeXS;
-  padding-left: $euiSizeS;
+.canvasArg__add {
+  padding: $euiSizeM;
+  text-align: left;
+  width: 100%;
 
   &:not(:last-child) {
     border-bottom: $euiBorderThin;
diff --git a/public/components/arg_add_popover/arg_add_popover.js b/public/components/arg_add_popover/arg_add_popover.js
index ad6676aca681e..b9462cab8250e 100644
--- a/public/components/arg_add_popover/arg_add_popover.js
+++ b/public/components/arg_add_popover/arg_add_popover.js
@@ -10,7 +10,12 @@ export const ArgAddPopover = ({ options }) => {
   );
 
   return (
-    <Popover id="arg-add-popover" panelClassName="canvas__add-arg-popover" button={button}>
+    <Popover
+      id="arg-add-popover"
+      panelClassName="canvasArg__addPopover"
+      panelPaddingSize="none"
+      button={button}
+    >
       {({ closePopover }) =>
         options.map(opt => (
           <ArgAdd
diff --git a/public/components/arg_add_popover/arg_add_popover.scss b/public/components/arg_add_popover/arg_add_popover.scss
index b710cdd703405..f2cdb1444ef23 100644
--- a/public/components/arg_add_popover/arg_add_popover.scss
+++ b/public/components/arg_add_popover/arg_add_popover.scss
@@ -1,8 +1,3 @@
-.canvas__add-arg-popover {
-  width: 200px;
-  font-size: $euiFontSizeS;
-
-  .popover-content {
-    padding: 0;
-  }
+.canvasArg__addPopover {
+  width: 250px;
 }
diff --git a/public/components/arg_form/arg_form.js b/public/components/arg_form/arg_form.js
index 560e3f6d9e064..52bd54611aa7b 100644
--- a/public/components/arg_form/arg_form.js
+++ b/public/components/arg_form/arg_form.js
@@ -89,7 +89,7 @@ const ArgFormComponent = props => {
         );
 
         const extendedArg = (
-          <div className="canvas__arg--controls">
+          <div className="canvasArg--controls">
             <ArgTemplateForm
               template={template}
               errorTemplate={AdvancedFailure}
@@ -100,7 +100,7 @@ const ArgFormComponent = props => {
         );
 
         return (
-          <div className="canvas__arg">
+          <div className={`canvasArg ${expandableLabel ? 'canvasArg--expandable' : null}`}>
             <ArgLabel
               className="resolved"
               argId={argId}
diff --git a/public/components/arg_form/arg_form.scss b/public/components/arg_form/arg_form.scss
index 31a33c9809484..5e8b25f024b3a 100644
--- a/public/components/arg_form/arg_form.scss
+++ b/public/components/arg_form/arg_form.scss
@@ -1,46 +1,97 @@
-.canvas__arg {
-  &:not(:last-child) {
-    border-bottom: $euiBorderThin;
+.canvasArg--expandable + .canvasArg--expandable {
+  margin-top: 0;
+
+  .canvasArg__accordion:before {
+    display: none;
   }
+}
+
+.canvasSidebar__panel {
+  .canvasArg--expandable:last-child {
+    .canvasArg__accordion.euiAccordion-isOpen:after {
+      display: none;
+    }
+  }
+}
+
+.canvasArg {
+  margin-top: $euiSize;
 
-  .form-control {
-    font-size: $euiFontSizeS;
+
+  .canvasArg--remove {
+    visibility: hidden;
   }
+}
 
+.canvasArg__content {
+  padding-top: $euiSizeS;
+}
+
+.canvasArg__form {
+  position: relative;
+
+}
+
+.canvasArg__form, .canvasArg__accordion {
   &:hover {
-    .canvas__arg--remove {
+    .canvasArg__remove {
+      opacity: 1;
       visibility: visible;
     }
   }
+}
 
-  .canvas__arg--label {
-    margin: $euiSizeS;
-    flex-shrink: 0;
-  }
+.canvasArg__tooltip {
+  margin-left: -$euiSizeXL;
+}
+
+.canvasArg__remove {
+  position: absolute;
+  right: -$euiSizeL;
+  top: $euiSizeS - 2px;
+  border-radius: $euiBorderRadius;
+  border: $euiBorderThin;
+  background: $euiColorEmptyShade;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity $euiAnimSpeedNormal $euiAnimSlightResistance;
+  transition-delay: $euiAnimSpeedSlow;
+}
+
+.canvasArg__accordion {
+  padding: $euiSizeS $euiSize;
+  margin: 0 (-$euiSize);
+  background: $euiColorLightestShade;
+  position: relative;
 
-  .canvas__arg--simple {
-    display: flex;
-    align-items: center;
+  // different spacing means leff shift
+  .canvasArg__remove {
+    right: -$euiSizeM;
   }
 
-  .canvas__arg--simple-controls {
-    width: 100%;
-    margin: $euiSizeS;
+  // don't let remove button position here if this is nested in an accordion
+  .canvasArg__form {
+    position: static;
   }
 
-  .canvas__arg--controls {
-    padding: $euiSizeS;
+  &.euiAccordion-isOpen {
+    background: transparent;
+  }
 
-    .canvas__arg--controls--submit {
-      text-align: right;
+  &:before, &:after {
+    content: "";
+    height: 1px;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    background: $euiColorLightShade;
+  }
 
-      button {
-        margin-left: $euiSize;
-      }
-    }
+  &:before {
+    top: 0;
   }
 
-  .canvas__arg--remove {
-    visibility: hidden;
+  &:after {
+    bottom: 0;
   }
 }
diff --git a/public/components/arg_form/arg_label.js b/public/components/arg_form/arg_label.js
index 539da38011ce5..0bbe7bd8d2ce1 100644
--- a/public/components/arg_form/arg_label.js
+++ b/public/components/arg_form/arg_label.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFormRow, EuiAccordion, EuiFormLabel } from '@elastic/eui';
+import { EuiFormRow, EuiAccordion, EuiText } from '@elastic/eui';
 import { Tooltip } from '../tooltip';
 // This is what is being generated by render() from the Arg class. It is called in FunctionForm
 
@@ -8,31 +8,26 @@ export const ArgLabel = props => {
   const { argId, className, label, help, expandable, children, simpleArg, initialIsOpen } = props;
 
   return (
-    <div className={`canvas__arg--header${className && ` ${className}`}`}>
+    <div className={`canvasArg--header${className && ` ${className}`}`}>
       {expandable ? (
         <EuiAccordion
           id={`accordion-${argId}`}
-          className="canvas__arg--label"
+          className="canvasArg__accordion"
           buttonContent={
-            <Tooltip text={help} placement="left">
-              <EuiFormLabel htmlFor={`accordion-${argId}`}>{label}</EuiFormLabel>
+            <Tooltip content={help} placement="left" className="canvasArg__tooltip">
+              <EuiText size="s" color="subdued" htmlFor={`accordion-${argId}`}>
+                {label}
+              </EuiText>
             </Tooltip>
           }
           extraAction={simpleArg}
           initialIsOpen={initialIsOpen}
         >
-          {children}
+          <div className="canvasArg__content">{children}</div>
         </EuiAccordion>
       ) : (
         simpleArg && (
-          <EuiFormRow
-            label={
-              <Tooltip text={help} placement="left">
-                <span className="canvas__arg--label">{label}</span>
-              </Tooltip>
-            }
-            id={argId}
-          >
+          <EuiFormRow label={label} helpText={help} id={argId}>
             {simpleArg}
           </EuiFormRow>
         )
diff --git a/public/components/arg_form/arg_simple_form.js b/public/components/arg_form/arg_simple_form.js
index a1640dc324d4e..77b82bb87be1c 100644
--- a/public/components/arg_form/arg_simple_form.js
+++ b/public/components/arg_form/arg_simple_form.js
@@ -1,28 +1,33 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiButtonIcon } from '@elastic/eui';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { TooltipIcon } from '../tooltip_icon';
 
 // This is what is being generated by render() from the Arg class. It is called in FunctionForm
 export const ArgSimpleForm = ({ children, required, valueMissing, onRemove }) => {
   return (
-    <div className="canvas__arg--simple">
-      <div className="canvas__arg--simple-controls">{children}</div>
-      {!required && (
-        <div className="canvas__arg--remove">
-          <EuiButtonIcon color="danger" onClick={onRemove} iconType="trash" aria-label="Remove" />
-        </div>
-      )}
+    <EuiFlexGroup alignItems="center" gutterSize="s" className="canvasArg__form">
+      <EuiFlexItem>{children}</EuiFlexItem>
       {valueMissing && (
-        <div className="canvas__arg--required">
+        <EuiFlexItem grow={false}>
           <TooltipIcon
             placement="left"
             icon="error"
-            text="This argument is required, you should specify a value."
+            content="This argument is required, you should specify a value."
           />
-        </div>
+        </EuiFlexItem>
+      )}
+
+      {!required && (
+        <EuiButtonIcon
+          color="danger"
+          onClick={onRemove}
+          iconType="trash"
+          aria-label="Remove"
+          className="canvasArg__remove"
+        />
       )}
-    </div>
+    </EuiFlexGroup>
   );
 };
 
diff --git a/public/components/arg_form/pending_arg_value.js b/public/components/arg_form/pending_arg_value.js
index 52c2a16f59e0e..8f836f2aa44f1 100644
--- a/public/components/arg_form/pending_arg_value.js
+++ b/public/components/arg_form/pending_arg_value.js
@@ -33,14 +33,14 @@ export class PendingArgValue extends React.PureComponent {
     const { label, argTypeInstance } = this.props;
 
     return (
-      <div className="canvas__arg">
+      <div className="canvasArg">
         <ArgLabel
           className="resolve-pending"
           label={label}
           help={argTypeInstance.help}
           expandable={false}
         >
-          <div className="canvas__arg--pending">
+          <div className="canvasArg--pending">
             <Loading animated text="Loading" />
           </div>
         </ArgLabel>
diff --git a/public/components/arg_form/simple_failure.js b/public/components/arg_form/simple_failure.js
index bc4449e41fd01..2d2c73589a16e 100644
--- a/public/components/arg_form/simple_failure.js
+++ b/public/components/arg_form/simple_failure.js
@@ -3,11 +3,11 @@ import { TooltipIcon } from '../tooltip_icon';
 
 // This is what is being generated by render() from the Arg class. It is called in FunctionForm
 export const SimpleFailure = () => (
-  <div className="canvas__arg--error canvas__arg--error-simple">
+  <div className="canvasArg--error canvasArg--error-simple">
     <TooltipIcon
       placement="left"
-      icon="info"
-      text="The interface for this argument could not parse the value, so a fallback input is being used"
+      icon="warning"
+      content="The interface for this argument could not parse the value, so a fallback input is being used"
     />
   </div>
 );
diff --git a/public/components/asset_manager/asset_manager.js b/public/components/asset_manager/asset_manager.js
index 9835f1142fe08..43b002f4cf13f 100644
--- a/public/components/asset_manager/asset_manager.js
+++ b/public/components/asset_manager/asset_manager.js
@@ -1,8 +1,26 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiImage, EuiButtonIcon } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonIcon,
+  EuiButtonEmpty,
+  EuiButton,
+  EuiOverlayMask,
+  EuiModal,
+  EuiModalHeader,
+  EuiModalBody,
+  EuiText,
+  EuiImage,
+  EuiPanel,
+  EuiModalFooter,
+  EuiModalHeaderTitle,
+  EuiFlexGrid,
+  EuiProgress,
+  EuiSpacer,
+  EuiTextColor,
+} from '@elastic/eui';
 import { ConfirmModal } from '../confirm_modal';
-import { RemoveIcon } from '../remove_icon';
 import { Clipboard } from '../clipboard';
 import { Download } from '../download';
 
@@ -14,8 +32,12 @@ export class AssetManager extends React.PureComponent {
 
   state = {
     deleteId: null,
+    isModalVisible: false,
   };
 
+  showModal = () => this.setState({ isModalVisible: true });
+  closeModal = () => this.setState({ isModalVisible: false });
+
   doDelete = () => {
     this.resetDelete();
     this.props.removeAsset(this.state.deleteId);
@@ -23,77 +45,124 @@ export class AssetManager extends React.PureComponent {
 
   resetDelete = () => this.setState({ deleteId: null });
 
-  renderAsset = asset => {
-    return (
-      <EuiPanel
-        key={asset.id}
-        className="canvas__asset-manager--asset canvas__checkered clickable"
-        paddingSize="none"
-      >
-        <div className="canvas__asset-manager--thumb">
+  renderAsset = asset => (
+    <EuiFlexItem key={asset.id}>
+      <EuiPanel className="canvasAssetManager__asset" paddingSize="s">
+        <div className="canvasAssetManager__thumb canvasCheckered">
           <EuiImage
-            size="m"
+            className="canvasAssetManager__img"
+            size="original"
             url={asset.value}
-            allowFullScreen
             fullScreenIconColor="dark"
-            className="canvas__asset-manager--image"
-            alt="Asset Thumbnail"
+            alt="Asset thumbnail"
+            style={{ backgroundImage: `url(${asset.value})` }}
           />
-          <EuiFlexGroup
-            className="canvas__asset-manager--asset-identifier"
-            gutterSize="none"
-            alignItems="baseline"
-          >
-            <EuiFlexItem className="asset-id" grow={false}>
-              {asset.id}
-            </EuiFlexItem>
-            <EuiFlexItem className="asset-download" title="Download" grow={false}>
-              <Download fileName={asset.id} content={asset.value}>
-                <EuiButtonIcon iconType="exportAction" color="ghost" aria-label="Download" />
-              </Download>
-            </EuiFlexItem>
-            <EuiFlexItem title="Copy to Clipboard" grow={false}>
-              <Clipboard content={asset.id}>
-                <EuiButtonIcon
-                  iconType="copyClipboard"
-                  color="ghost"
-                  aria-label="Copy to Clipboard"
-                />
-              </Clipboard>
-            </EuiFlexItem>
-          </EuiFlexGroup>
         </div>
 
-        <RemoveIcon
-          style={{ position: 'absolute', top: -12, right: -12 }}
-          onClick={() => this.setState({ deleteId: asset.id })}
-        />
+        <EuiSpacer size="s" />
+
+        <EuiText size="xs" className="eui-textBreakAll">
+          <p className="eui-textBreakAll">
+            <strong>{asset.id}</strong>
+            <br />
+            <EuiTextColor color="subdued">
+              <small>({Math.round(asset.value.length / 1024)} kb)</small>
+            </EuiTextColor>
+          </p>
+        </EuiText>
+
+        <EuiSpacer size="s" />
+
+        <EuiFlexGroup alignItems="baseline" justifyContent="center" responsive={false}>
+          <EuiFlexItem className="asset-download" grow={false}>
+            <Download fileName={asset.id} content={asset.value}>
+              <EuiButtonIcon iconType="sortDown" aria-label="Download" title="Download" />
+            </Download>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <Clipboard content={asset.id}>
+              <EuiButtonIcon
+                iconType="copyClipboard"
+                aria-label="Copy to clipboard"
+                title="Copy to clipboard"
+              />
+            </Clipboard>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonIcon
+              title="Delete asset"
+              color="danger"
+              iconType="trash"
+              aria-label="Delete asset"
+              onClick={() => this.setState({ deleteId: asset.id })}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiPanel>
-    );
-  };
+    </EuiFlexItem>
+  );
 
   render() {
+    const { isModalVisible } = this.state;
+
+    const assetMaxLimit = 25000;
+
+    const assetsTotal = Math.round(
+      this.props.assets.reduce((total, asset) => total + asset.value.length, 0) / 1024
+    );
+
+    const percentageUsed = Math.round(assetsTotal / assetMaxLimit * 100);
+
+    const assetModal = isModalVisible ? (
+      <EuiOverlayMask>
+        <EuiModal onClose={this.closeModal} className="canvasAssetManager">
+          <EuiModalHeader className="canvasAssetManager__modalHeader">
+            <EuiModalHeaderTitle className="canvasAssetManager__modalHeaderTitle">
+              Manage workpad assets
+            </EuiModalHeaderTitle>
+            <EuiFlexGroup className="canvasAssetManager__meterWrapper" responsive={false}>
+              <EuiFlexItem>
+                <EuiProgress
+                  value={assetsTotal}
+                  max={assetMaxLimit}
+                  color={percentageUsed < 90 ? 'secondary' : 'danger'}
+                  size="s"
+                  aria-labelledby="CanvasAssetManagerLabel"
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false} className="eui-textNoWrap">
+                <EuiText id="CanvasAssetManagerLabel">{percentageUsed}% space used</EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiModalHeader>
+          <EuiModalBody>
+            <EuiText size="s" color="subdued">
+              <p>
+                Below are the image assets that you added to this workpad. To reclaim space, delete
+                assets that you no longer need. Unfortunately, any assets that are actually in use
+                cannot be determined at this time.
+              </p>
+            </EuiText>
+            <EuiFlexGrid responsive="false" columns={4}>
+              {this.props.assets.map(this.renderAsset)}
+            </EuiFlexGrid>
+          </EuiModalBody>
+          <EuiModalFooter>
+            <EuiButton size="s" onClick={this.closeModal}>
+              Close
+            </EuiButton>
+          </EuiModalFooter>
+        </EuiModal>
+      </EuiOverlayMask>
+    ) : null;
+
     return (
-      <div className="canvas__asset-manager">
-        <div>
-          <h3>Manage Workpad Assets</h3>
-          <p>
-            Below are the image assets you have added to this workpad via image uploads, sorted by
-            when you added them. Workpads are limited in size.{' '}
-            <strong>You can reclaim space</strong> by deleting assets that you no longer needed.
-            Sorry, I can't tell you which assets are currently in use: We're working on that, I
-            promise.
-          </p>
-          <p>
-            I can tell you that the current approximate size of your uncompressed assets is{' '}
-            <strong>
-              {Math.round(
-                this.props.assets.reduce((total, asset) => total + asset.value.length, 0) / 1024
-              )}KB
-            </strong>
-          </p>
-        </div>
-        {this.props.assets.map(this.renderAsset)}
+      <Fragment>
+        <EuiButtonEmpty size="s" onClick={this.showModal}>
+          Manage assets
+        </EuiButtonEmpty>
+
+        {assetModal}
 
         <ConfirmModal
           isOpen={this.state.deleteId != null}
@@ -103,7 +172,7 @@ export class AssetManager extends React.PureComponent {
           onConfirm={this.doDelete}
           onCancel={this.resetDelete}
         />
-      </div>
+      </Fragment>
     );
   }
 }
diff --git a/public/components/asset_manager/asset_manager.scss b/public/components/asset_manager/asset_manager.scss
index fa8087290fc9d..55f569dcddadf 100644
--- a/public/components/asset_manager/asset_manager.scss
+++ b/public/components/asset_manager/asset_manager.scss
@@ -1,44 +1,56 @@
-.canvas__asset-manager {
-  .canvas__asset-manager--asset {
-    display: inline-block;
-    position: relative;
-    margin-right: $euiSize;
-    margin-bottom: $euiSize;
-    height: 200px;
-    width: 200px;
-  }
+.canvasAssetManager {
+  max-width: 1000px;
 
-  .canvas__asset-manager--thumb {
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
+  .canvasAssetManager__modalHeader {
+    flex-wrap: wrap;
+  }
 
-    .canvas_asset-manager-image {
+  .canvasAssetManager__modalHeaderTitle {
+    @include euiBreakpoint('xs', 's') {
       width: 100%;
-      height: 100%;
+      padding-bottom: $euiSize;
     }
+  }
 
-    img {
-      object-fit: cover;
-      min-height: 200px;
+  .canvasAssetManager__meterWrapper {
+    flex-grow: 0;
+    min-width: 40%;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: $euiSize;
+
+    @include euiBreakpoint('xs', 's') {
+      flex-grow: 1;
     }
   }
 
-  .canvas__asset-manager--asset-identifier {
-    position: absolute;
-    bottom: 0;
-    background-color: transparentize($euiColorDarkestShade, 0.2);
-    border-radius: 0 0 $euiBorderThin $euiBorderThin;
-    padding: $euiSizeXS;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 100%;
-
-    .asset-id {
-      font-size: $euiFontSizeS;
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
+  .canvasAssetManager__meterLabel {
+    margin: 0;
+  }
+
+  // ASSETS LIST
+
+  .canvasAssetManager__asset {
+    text-align: center;
+    overflow: hidden; // hides image from outer panel boundaries
+  }
+
+  .canvasAssetManager__thumb {
+    margin: -$euiSizeS;
+    margin-bottom: 0;
+    font-size: 0; // eliminates any extra space around img
+  }
+
+  .canvasAssetManager__img {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+
+    img {
+      width: auto;
+      max-width: 100%;
+      height: 164px; // nice default proportions for typical 4x3 images
+      opacity: 0; // only show the background image (which will properly keep proportions)
     }
   }
 }
diff --git a/public/components/border_connection/border_connection.js b/public/components/border_connection/border_connection.js
index be06da018fb30..21e6899aa41c9 100644
--- a/public/components/border_connection/border_connection.js
+++ b/public/components/border_connection/border_connection.js
@@ -11,7 +11,7 @@ export const BorderConnection = ({ transformMatrix, a, b }) => {
     position: 'absolute',
     transform: aero.dom.matrixToCSS(transformMatrix),
   };
-  return <div className="canvas__border-connection" style={newStyle} />;
+  return <div className="canvasBorder--connection" style={newStyle} />;
 };
 
 BorderConnection.propTypes = {
diff --git a/public/components/border_connection/border_connection.scss b/public/components/border_connection/border_connection.scss
index 709e409789ea7..3171a25182110 100644
--- a/public/components/border_connection/border_connection.scss
+++ b/public/components/border_connection/border_connection.scss
@@ -1,4 +1,4 @@
-.canvas__border-connection {
+.canvasBorder--connection {
   position: absolute;
   top: 0;
   width: 100%;
diff --git a/public/components/border_resize_handle/border_resize_handle.js b/public/components/border_resize_handle/border_resize_handle.js
index d61a7d63e3d30..aeed21a333c56 100644
--- a/public/components/border_resize_handle/border_resize_handle.js
+++ b/public/components/border_resize_handle/border_resize_handle.js
@@ -4,7 +4,7 @@ import aero from '../../lib/aeroelastic';
 
 export const BorderResizeHandle = ({ transformMatrix }) => (
   <div
-    className="canvas__border-resize-handle"
+    className="canvasBorderResizeHandle"
     style={{ transform: aero.dom.matrixToCSS(transformMatrix) }}
   />
 );
diff --git a/public/components/border_resize_handle/border_resize_handle.scss b/public/components/border_resize_handle/border_resize_handle.scss
index 1d7981bac318c..db8b926ba8221 100644
--- a/public/components/border_resize_handle/border_resize_handle.scss
+++ b/public/components/border_resize_handle/border_resize_handle.scss
@@ -1,4 +1,4 @@
-.canvas__border-resize-handle {
+.canvasBorderResizeHandle {
   transform-origin: center center; /* the default, only for clarity */
   transform-style: preserve-3d;
   display: block;
diff --git a/public/components/color_dot/color_dot.js b/public/components/color_dot/color_dot.js
index e352c6b2d6669..41eff6ff8b0db 100644
--- a/public/components/color_dot/color_dot.js
+++ b/public/components/color_dot/color_dot.js
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 
 export const ColorDot = ({ value, children }) => {
   return (
-    <div className="canvas__color-dot">
-      <div className="canvas__color-dot--background canvas__checkered" />
-      <div className="canvas__color-dot--foreground" style={{ background: value }}>
+    <div className="canvasColorDot">
+      <div className="canvasColorDot__background canvasCheckered" />
+      <div className="canvasColorDot__foreground" style={{ background: value }}>
         {children}
       </div>
     </div>
diff --git a/public/components/color_dot/color_dot.scss b/public/components/color_dot/color_dot.scss
index bcd623ed80dd9..473497506a893 100644
--- a/public/components/color_dot/color_dot.scss
+++ b/public/components/color_dot/color_dot.scss
@@ -1,24 +1,24 @@
-.canvas__color-dot {
+.canvasColorDot {
   display: inline-block;
   position: relative;
   height: $euiSizeXL;
   width: $euiSizeXL;
 
-  .canvas__color-dot--background {
+  .canvasColorDot__background {
     position: absolute;
     height: $euiSizeXL;
     width: $euiSizeXL;
-    border-radius: 16px;
+    border-radius: $euiBorderRadius;
     top: 0;
     left: 0;
   }
 
-  .canvas__color-dot--foreground {
+  .canvasColorDot__foreground {
     position: absolute;
-    border: $euiBorderThick;
+    border: $euiBorderThin;
     height: $euiSizeXL;
     width: $euiSizeXL;
-    border-radius: $euiSize;
+    border-radius: $euiBorderRadius;
     top: 0;
     left: 0;
     display: flex;
diff --git a/public/components/color_manager/color_manager.js b/public/components/color_manager/color_manager.js
index f91532a0c50a9..94b2b43c3f7b0 100644
--- a/public/components/color_manager/color_manager.js
+++ b/public/components/color_manager/color_manager.js
@@ -10,6 +10,7 @@ export const ColorManager = ({ value, addColor, removeColor, onChange }) => (
     </EuiFlexItem>
     <EuiFlexItem grow={5} style={{ display: 'inline-block' }}>
       <EuiFieldText
+        compressed
         value={value || ''}
         placeholder="#hex color"
         onChange={e => onChange(e.target.value)}
diff --git a/public/components/color_palette/color_palette.js b/public/components/color_palette/color_palette.js
index 56f767eb1abf8..6f17ae756e7f5 100644
--- a/public/components/color_palette/color_palette.js
+++ b/public/components/color_palette/color_palette.js
@@ -6,14 +6,14 @@ import { ColorDot } from '../color_dot';
 import { ItemGrid } from '../item_grid';
 
 export const ColorPalette = ({ value, colors, colorsPerRow, onChange }) => (
-  <div className="canvas__color-palette">
+  <div className="canvasColorPalette">
     <ItemGrid items={colors} itemsPerRow={colorsPerRow || 6}>
       {({ item: color }) => (
         <EuiLink
           style={{ fontSize: 0 }}
           key={color}
           onClick={() => onChange(color)}
-          className="canvas__color-palette--dot"
+          className="canvasColorPalette__dot"
         >
           <ColorDot value={color}>
             {color === value && (
diff --git a/public/components/color_palette/color_palette.scss b/public/components/color_palette/color_palette.scss
index c90897a2c6b35..1496db27cb469 100644
--- a/public/components/color_palette/color_palette.scss
+++ b/public/components/color_palette/color_palette.scss
@@ -1,5 +1,5 @@
-.canvas__color-palette {
-  .canvas__color-palette--dot {
+.canvasColorPalette {
+  .canvasColorPalette__dot {
     display: inline-block;
     margin: 0px $euiSizeXS $euiSizeXS 0px;
   }
diff --git a/public/components/color_picker_mini/color_picker_mini.js b/public/components/color_picker_mini/color_picker_mini.js
index 2adf9b96ef4b9..66445b6c3903f 100644
--- a/public/components/color_picker_mini/color_picker_mini.js
+++ b/public/components/color_picker_mini/color_picker_mini.js
@@ -16,7 +16,7 @@ export const ColorPickerMini = ({ onChange, value, anchorPosition, colors }) =>
   return (
     <Popover
       id="color-picker-mini-popover"
-      panelClassName="canvas canvas__color-picker-mini--popover"
+      panelClassName="canvas canvasColorPickerMini__popover"
       button={button}
       anchorPosition={anchorPosition}
     >
diff --git a/public/components/color_picker_mini/color_picker_mini.scss b/public/components/color_picker_mini/color_picker_mini.scss
index 939ce8b809f0e..c1aa8d09a1a6b 100644
--- a/public/components/color_picker_mini/color_picker_mini.scss
+++ b/public/components/color_picker_mini/color_picker_mini.scss
@@ -1,3 +1,3 @@
-.canvas__color-picker-mini--popover {
+.canvasColorPickerMini__popover {
   width: 250px;
 }
diff --git a/public/components/confirm_modal/confirm_modal.js b/public/components/confirm_modal/confirm_modal.js
index e14349a284bb7..a9cc635551342 100644
--- a/public/components/confirm_modal/confirm_modal.js
+++ b/public/components/confirm_modal/confirm_modal.js
@@ -28,7 +28,7 @@ export const ConfirmModal = props => {
   return (
     <EuiOverlayMask>
       <EuiConfirmModal
-        className={`canvas__confirm_modal ${className || ''}`}
+        className={`canvasConfirmModal ${className || ''}`}
         title={title}
         onCancel={cancel}
         onConfirm={confirm}
diff --git a/public/components/context_menu/context_menu.js b/public/components/context_menu/context_menu.js
index 5ba2e92ea4f62..5a1586fee61d9 100644
--- a/public/components/context_menu/context_menu.js
+++ b/public/components/context_menu/context_menu.js
@@ -16,11 +16,13 @@ export const ContextMenu = ({
   <div className="contextMenu" onKeyDown={onKeyDown} onKeyPress={onKeyPress}>
     {children}
     {isOpen && items.length ? (
-      <div className="contextMenuItems" style={itemsStyle}>
+      <div className="contextMenu__items" style={itemsStyle}>
         {items.map((item, i) => (
           <div
             key={i}
-            className={'contextMenuItem ' + (selectedIndex === i ? 'active' : '')}
+            className={
+              'contextMenu__item ' + (selectedIndex === i ? 'contextMenu__item-isActive' : '')
+            }
             onClick={() => onSelect(item)}
             onMouseOver={() => setSelectedIndex(i)}
           >
diff --git a/public/components/context_menu/context_menu.scss b/public/components/context_menu/context_menu.scss
index 6e01b32b6e57c..f982f8b3deedd 100644
--- a/public/components/context_menu/context_menu.scss
+++ b/public/components/context_menu/context_menu.scss
@@ -1,7 +1,7 @@
 .contextMenu {
   position: relative;
 
-  .contextMenuItems {
+  .contextMenu__items {
     position: absolute;
     z-index: 1;
     width: 100%;
@@ -10,7 +10,7 @@
     background: $euiColorEmptyShade;
     border: $euiBorderThin;
 
-    .contextMenuItem {
+    .contextMenu__item {
       padding: $euiSizeS;
       background-color: $euiColorEmptyShade;
       border: $euiBorderThin;
@@ -18,11 +18,11 @@
       display: flex;
       align-self: flex-start;
       width: 100%;
-    }
 
-    .contextMenuItem.active {
-      background-color: $euiColorDarkShade;
-      color: $euiColorGhost;
+      &-isActive {
+        background-color: $euiColorDarkShade;
+        color: $euiColorGhost;
+      }
     }
   }
 }
diff --git a/public/components/datasource/datasource_preview/datasource_preview.scss b/public/components/datasource/datasource.scss
similarity index 59%
rename from public/components/datasource/datasource_preview/datasource_preview.scss
rename to public/components/datasource/datasource.scss
index 190238406fdd3..ee6c082db1217 100644
--- a/public/components/datasource/datasource_preview/datasource_preview.scss
+++ b/public/components/datasource/datasource.scss
@@ -1,7 +1,11 @@
-.canvas__datasource_preview {
+.canvasDataSource {
   background-color: $euiColorEmptyShade;
   color: $euiTextColor;
   border-radius: $euiBorderThin;
   margin: $euiSizeS;
   padding: 0 $euiSizeS;
 }
+
+.canvasDataSource__card + .canvasDataSource__card {
+  margin-top: $euiSizeS;
+}
diff --git a/public/components/datasource/datasource_component.js b/public/components/datasource/datasource_component.js
index 3a35fca38c959..bc76312e05925 100644
--- a/public/components/datasource/datasource_component.js
+++ b/public/components/datasource/datasource_component.js
@@ -1,6 +1,13 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import {
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiSpacer,
+} from '@elastic/eui';
 import { DatasourceSelector } from './datasource_selector';
 import { DatasourcePreview } from './datasource_preview';
 
@@ -19,7 +26,6 @@ export const DatasourceComponent = props => {
     setSelecting,
     previewing,
     setPreviewing,
-    done,
   } = props;
 
   const getDatasourceFunctionNode = (name, args) => ({
@@ -40,10 +46,6 @@ export const DatasourceComponent = props => {
     setSelecting(false);
   };
 
-  const close = () => {
-    if (done) done();
-  };
-
   const save = () => {
     const datasourceAst = getDatasourceFunctionNode(stateDatasource.name, stateArgs);
     setDatasourceAst && setDatasourceAst(datasourceAst);
@@ -53,48 +55,40 @@ export const DatasourceComponent = props => {
     return <DatasourceSelector datasources={datasources} onSelect={setSelectedDatasource} />;
   }
 
-  if (previewing) {
-    return (
+  return (
+    <Fragment>
+      <EuiPanel>
+        <EuiButtonEmpty
+          iconSide="right"
+          flush="left"
+          iconType="sortRight"
+          onClick={() => setSelecting(!selecting)}
+        >
+          Change your data source
+        </EuiButtonEmpty>
+        <EuiSpacer size="s" />
+        {stateDatasource.render({ args: stateArgs, updateArgs, datasourceDef })}
+        <EuiSpacer size="m" />
+        <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
+          <EuiFlexItem grow={false}>
+            <EuiButton size="s" onClick={() => setPreviewing(true)} icon="check">
+              Preview
+            </EuiButton>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton size="s" color="secondary" fill onClick={save} icon="check">
+              Save
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+
       <DatasourcePreview
+        show={previewing}
         done={() => setPreviewing(false)}
         function={getDatasourceFunctionNode(stateDatasource.name, stateArgs)}
       />
-    );
-  }
-
-  return (
-    <div className="canvas__datasource">
-      <div>{stateDatasource.render({ args: stateArgs, updateArgs, datasourceDef })}</div>
-
-      <EuiSpacer size="m" />
-
-      <EuiFlexGroup gutterSize="s">
-        <EuiFlexItem grow={false}>
-          <EuiButton fill color="secondary" onClick={save}>
-            Apply
-          </EuiButton>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButton fill color="primary" onClick={() => setPreviewing(true)}>
-            Preview
-          </EuiButton>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButton fill color="ghost" onClick={close}>
-            Cancel
-          </EuiButton>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButtonEmpty
-            iconType="logstashInput"
-            color="ghost"
-            onClick={() => setSelecting(!selecting)}
-          >
-            Change Datasource
-          </EuiButtonEmpty>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
+    </Fragment>
   );
 };
 
@@ -102,13 +96,15 @@ DatasourceComponent.propTypes = {
   datasources: PropTypes.array.isRequired,
   datasource: PropTypes.object.isRequired,
   datasourceDef: PropTypes.object.isRequired,
-  stateDatasource: PropTypes.object.isRequired,
+  stateDatasource: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    render: PropTypes.func.isRequired,
+  }).isRequired,
   selectDatasource: PropTypes.func,
   setDatasourceAst: PropTypes.func,
   stateArgs: PropTypes.object.isRequired,
   updateArgs: PropTypes.func,
   resetArgs: PropTypes.func.isRequired,
-  done: PropTypes.func,
   selecting: PropTypes.bool,
   setSelecting: PropTypes.func,
   previewing: PropTypes.bool,
diff --git a/public/components/datasource/datasource_preview/datasource_preview.js b/public/components/datasource/datasource_preview/datasource_preview.js
index 401521fc99bf7..09b3ba2b26e49 100644
--- a/public/components/datasource/datasource_preview/datasource_preview.js
+++ b/public/components/datasource/datasource_preview/datasource_preview.js
@@ -1,18 +1,41 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {
+  EuiOverlayMask,
+  EuiModal,
+  EuiModalBody,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiSpacer,
+  EuiPanel,
+} from '@elastic/eui';
 import { Datatable } from '../../datatable';
 
-export const DatasourcePreview = ({ done, datatable }) => (
-  //<Datatable datatable={datatable}/>
-  <div style={{ overflow: 'auto' }}>
-    {!done ? null : <a onClick={() => done()}>&lt; Back</a>}
-    <div className="canvas__datasource_preview">
-      <Datatable datatable={datatable} />
-    </div>
-  </div>
-);
+export const DatasourcePreview = ({ show, done, datatable }) =>
+  show ? (
+    <EuiOverlayMask>
+      <EuiModal onClose={done} style={{ maxWidth: '1000px' }}>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>Datasource Preview</EuiModalHeaderTitle>
+        </EuiModalHeader>
+        <EuiModalBody>
+          <p>
+            Shown below are the first 10 rows of your datasource. Click <strong>Save</strong> in the
+            sidebar to use this data.
+          </p>
+
+          <EuiSpacer />
+
+          <EuiPanel>
+            <Datatable datatable={datatable} showHeader />
+          </EuiPanel>
+        </EuiModalBody>
+      </EuiModal>
+    </EuiOverlayMask>
+  ) : null;
 
 DatasourcePreview.propTypes = {
+  show: PropTypes.bool.isRequired,
   datatable: PropTypes.object,
   done: PropTypes.func,
 };
diff --git a/public/components/datasource/datasource_selector.js b/public/components/datasource/datasource_selector.js
index a33631fa7ac75..d8ad376d895c6 100644
--- a/public/components/datasource/datasource_selector.js
+++ b/public/components/datasource/datasource_selector.js
@@ -1,18 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MediaCard } from '../media_card';
+import { EuiCard, EuiIcon } from '@elastic/eui';
 
 export const DatasourceSelector = ({ onSelect, datasources }) => (
   <div>
     {datasources.map(d => (
-      <MediaCard
+      <EuiCard
         key={d.name}
         title={d.displayName}
-        image={d.image}
+        icon={<EuiIcon type={d.image} size="xxl" />}
         onClick={() => onSelect(d.name)}
-      >
-        {d.help}
-      </MediaCard>
+        description={d.help}
+        layout="horizontal"
+        className="canvasDataSource__card"
+      />
     ))}
   </div>
 );
diff --git a/public/components/datasource/no_datasource.js b/public/components/datasource/no_datasource.js
index dbd40b8b2a0f2..e3a8327f6eccc 100644
--- a/public/components/datasource/no_datasource.js
+++ b/public/components/datasource/no_datasource.js
@@ -1,24 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiButton } from '@elastic/eui';
-export const NoDatasource = ({ done }) => (
-  <div>
-    <h3>No Datasource Detected</h3>
-    <p>
-      Its not that you're not connected to any data. Maybe you are, maybe you're not. But if you
-      are, I don't know about it. I looked for a data source in your expression, because I really
-      wanted to give you a fancy interface to it. Alas, I could not find one that I know about.
-    </p>
+import { EuiPanel, EuiText } from '@elastic/eui';
 
-    <p>
-      I'm just going to trust that you know what you're doing. You look smart. We should hang out
-      more. What are you doing Thursday?
-    </p>
-    <br />
-    <EuiButton fill onClick={done}>
-      Close
-    </EuiButton>
-  </div>
+export const NoDatasource = () => (
+  <EuiPanel>
+    <EuiText>
+      <h4>No data source present</h4>
+      <p>
+        This element does not have an attached data source. This is usually because the element is
+        an image or other static asset. If that's not the case you might want to check your
+        expression to make sure it is not malformed.
+      </p>
+    </EuiText>
+  </EuiPanel>
 );
 
 NoDatasource.propTypes = {
diff --git a/public/components/datasource/unknown_args.js b/public/components/datasource/unknown_args.js
index 0e83fbfe5dcdc..89de2dd00dd26 100644
--- a/public/components/datasource/unknown_args.js
+++ b/public/components/datasource/unknown_args.js
@@ -1,20 +1,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiButton } from '@elastic/eui';
+import { EuiButton, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
 
 export const UnknownArgs = ({ unknownArgs, done }) => (
-  <div>
-    <h2>Unknown Arguments Found</h2>
-    <p>
-      There are arguments in the expression that can not be converting into an interface. Use the
-      expression editor to update the datasource.
-    </p>
-    <p>The following unknown arguments were found:</p>
-    <ul>{unknownArgs.map(name => <li key={name}>{name}</li>)}</ul>
-    <EuiButton fill onClick={done}>
+  <EuiPanel>
+    <EuiText>
+      <h4>Unknown Arguments Found</h4>
+      <p>
+        There are arguments in the expression that can not be converting into an interface. Use the
+        expression editor to update the datasource.
+      </p>
+    </EuiText>
+
+    <EuiSpacer size="m" />
+
+    <EuiText>
+      <p>The following unknown arguments were found:</p>
+      <ul>{unknownArgs.map(name => <li key={name}>{name}</li>)}</ul>
+    </EuiText>
+
+    <EuiSpacer size="m" />
+
+    <EuiButton size="s" fill onClick={done}>
       Close
     </EuiButton>
-  </div>
+  </EuiPanel>
 );
 
 UnknownArgs.propTypes = {
diff --git a/public/components/datatable/datatable.js b/public/components/datatable/datatable.js
index cec5a888dce18..5b5af8a105afe 100644
--- a/public/components/datatable/datatable.js
+++ b/public/components/datatable/datatable.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import { Table } from 'react-bootstrap';
+import { EuiTextColor } from '@elastic/eui';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Paginate } from '../paginate';
-import { PageControls } from '../paginate_controls';
+import { PaginateControls } from '../paginate_controls';
 
 const getIcon = type => {
   if (type === null) return;
@@ -43,7 +44,7 @@ export const Datatable = ({ datatable, perPage, paginate, showHeader }) => (
       pageNumber,
       totalPages,
     }) => (
-      <div className="canvas__datatable">
+      <div className="canvasDataTable">
         <div style={{ flexGrow: 1 }}>
           <Table condensed>
             {!showHeader ? null : (
@@ -52,7 +53,7 @@ export const Datatable = ({ datatable, perPage, paginate, showHeader }) => (
                   {datatable.columns.map(col => (
                     <th key={`header-${getColumnName(col)}`}>
                       {getColumnName(col)}{' '}
-                      <small className="muted">{getIcon(getColumnType(col))}</small>
+                      <EuiTextColor color="subdued">{getIcon(getColumnType(col))}</EuiTextColor>
                     </th>
                   ))}
                 </tr>
@@ -73,7 +74,7 @@ export const Datatable = ({ datatable, perPage, paginate, showHeader }) => (
         </div>
 
         {paginate && (
-          <PageControls
+          <PaginateControls
             prevPage={prevPage}
             prevPageEnabled={prevPageEnabled}
             setPage={setPage}
diff --git a/public/components/datatable/datatable.scss b/public/components/datatable/datatable.scss
index 6a7ce6d11d223..548bba21845b3 100644
--- a/public/components/datatable/datatable.scss
+++ b/public/components/datatable/datatable.scss
@@ -1,4 +1,4 @@
-.canvas__datatable {
+.canvasDataTable {
   height: 100%;
   overflow: auto;
   display: flex;
@@ -13,6 +13,7 @@
     white-space: nowrap;
   }
 
+  // This is a bootstrap overwrite
   .controls--perpage {
     padding: $euiSizeXS $euiSize;
     text-align: right;
diff --git a/public/components/element_content/element_content.js b/public/components/element_content/element_content.js
index 788b5b0bb10cb..c08605bc0edb3 100644
--- a/public/components/element_content/element_content.js
+++ b/public/components/element_content/element_content.js
@@ -35,14 +35,18 @@ const branches = [
 ];
 
 export const ElementContent = compose(pure, ...branches)(
-  ({ renderable, renderFunction, size, handlers }) => {
+  ({ renderable, renderFunction, size, handlers, selected }) => {
     const { getFilter, setFilter, done, onComplete } = handlers;
 
     return Style.it(
       renderable.css,
-      <div style={{ ...renderable.containerStyle, ...size }}>
+      <div
+        // TODO: 'canvas__element' was added for BWC, It can be removed after a while
+        className={`canvas__element canvasElement ${selected ? 'canvasElement--isSelected' : ''}`}
+        style={{ ...renderable.containerStyle, ...size }}
+      >
         <ElementShareContainer
-          className="canvas__element--content"
+          className="canvasElement__content"
           onComplete={onComplete}
           functionName={renderFunction.name}
         >
@@ -71,6 +75,7 @@ ElementContent.propTypes = {
     render: PropTypes.func,
     reuseDomNode: PropTypes.bool,
   }),
+  selected: PropTypes.bool,
   size: PropTypes.object,
   handlers: PropTypes.shape({
     setFilter: PropTypes.func.isRequired,
diff --git a/public/components/element_content/element_content.scss b/public/components/element_content/element_content.scss
new file mode 100644
index 0000000000000..b74740fdd74ef
--- /dev/null
+++ b/public/components/element_content/element_content.scss
@@ -0,0 +1,26 @@
+// It is up to the element to handle its overflow.
+.canvasElement {
+  height: 100%;
+  width: 100%;
+}
+
+.canvasElement__content {
+  height: 100%;
+  width: 100%;
+}
+
+.canvasWorkpad:not(.fullscreen) {
+  .canvasElement {
+    &--isSelected {
+      cursor: grab;
+
+      &:active {
+        cursor: grabbing;
+      }
+    }
+
+    &:not(.canvasElement--isSelected):hover {
+      outline: solid 1px $euiColorVis0;
+    }
+  }
+}
diff --git a/public/components/toolbar/element_types/element_types.js b/public/components/element_types/element_types.js
similarity index 54%
rename from public/components/toolbar/element_types/element_types.js
rename to public/components/element_types/element_types.js
index 9418a7364df5f..1efffa1b0b323 100644
--- a/public/components/toolbar/element_types/element_types.js
+++ b/public/components/element_types/element_types.js
@@ -1,20 +1,26 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { EuiFieldText } from '@elastic/eui';
 import { map, includes, sortBy } from 'lodash';
 import lowerCase from 'lodash.lowercase';
-import { MediaCard } from '../../media_card';
+import { EuiFieldSearch, EuiContextMenuItem, EuiPopoverTitle } from '@elastic/eui';
 
 export const ElementTypes = ({ elements, onClick, search, setSearch }) => {
   search = lowerCase(search);
   elements = sortBy(map(elements, (element, name) => ({ name, ...element })), 'displayName');
   const elementList = map(elements, (element, name) => {
-    const { help, image, displayName, expression, filter, width, height } = element;
+    const { help, displayName, expression, filter, width, height } = element;
     const whenClicked = () => onClick({ expression, filter, width, height });
+
+    // Add back in icon={image} to this when Design has a full icon set
     const card = (
-      <MediaCard key={name} image={image} title={displayName} onClick={whenClicked}>
-        {help}
-      </MediaCard>
+      <EuiContextMenuItem
+        key={name}
+        toolTipContent={help}
+        toolTipPosition="right"
+        onClick={whenClicked}
+      >
+        {displayName}
+      </EuiContextMenuItem>
     );
 
     if (!search) return card;
@@ -25,15 +31,17 @@ export const ElementTypes = ({ elements, onClick, search, setSearch }) => {
   });
 
   return (
-    <div>
-      <EuiFieldText
-        fullWidth
-        placeholder="Filter Elements"
-        onChange={e => setSearch(e.target.value)}
-        value={search}
-      />
-      <div>{elementList}</div>
-    </div>
+    <Fragment>
+      <EuiPopoverTitle>
+        <EuiFieldSearch
+          compressed
+          placeholder="Filter Elements"
+          onChange={e => setSearch(e.target.value)}
+          value={search}
+        />
+      </EuiPopoverTitle>
+      {elementList}
+    </Fragment>
   );
 };
 
diff --git a/public/components/toolbar/element_types/index.js b/public/components/element_types/index.js
similarity index 84%
rename from public/components/toolbar/element_types/index.js
rename to public/components/element_types/index.js
index 3d90b6175f929..d29f4da678358 100644
--- a/public/components/toolbar/element_types/index.js
+++ b/public/components/element_types/index.js
@@ -1,5 +1,5 @@
 import { pure, compose, withProps, withState } from 'recompose';
-import { elementsRegistry } from '../../../lib/elements_registry';
+import { elementsRegistry } from '../../lib/elements_registry';
 
 import { ElementTypes as Component } from './element_types';
 
diff --git a/public/components/element_wrapper/element_wrapper.js b/public/components/element_wrapper/element_wrapper.js
index 70c4e0b8d3101..6749c33bcdfaf 100644
--- a/public/components/element_wrapper/element_wrapper.js
+++ b/public/components/element_wrapper/element_wrapper.js
@@ -5,13 +5,13 @@ import { ElementContent } from '../element_content';
 
 export class ElementWrapper extends React.PureComponent {
   static propTypes = {
-    state: PropTypes.string,
-    error: PropTypes.object,
     renderable: PropTypes.object,
     transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
     a: PropTypes.number.isRequired,
     b: PropTypes.number.isRequired,
+    state: PropTypes.string,
     createHandlers: PropTypes.func.isRequired,
+    selected: PropTypes.bool,
   };
 
   state = {
@@ -29,11 +29,16 @@ export class ElementWrapper extends React.PureComponent {
     // wait until the handlers have been created
     if (!this.state.handlers) return null;
 
-    const { renderable, transformMatrix, a, b, state } = this.props;
+    const { selected, renderable, transformMatrix, a, b, state } = this.props;
 
     return (
       <Positionable transformMatrix={transformMatrix} a={a} b={b}>
-        <ElementContent renderable={renderable} state={state} handlers={this.state.handlers} />
+        <ElementContent
+          selected={selected}
+          renderable={renderable}
+          state={state}
+          handlers={this.state.handlers}
+        />
       </Positionable>
     );
   }
diff --git a/public/components/element_wrapper/element_wrapper.scss b/public/components/element_wrapper/element_wrapper.scss
deleted file mode 100644
index b0a028886306d..0000000000000
--- a/public/components/element_wrapper/element_wrapper.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// It is up to the element to handle its overflow.
-.canvas__element--content {
-  height: 100%;
-  width: 100%;
-}
diff --git a/public/components/element_wrapper/index.js b/public/components/element_wrapper/index.js
index f74bee9c9a60c..4d53ea42a9607 100644
--- a/public/components/element_wrapper/index.js
+++ b/public/components/element_wrapper/index.js
@@ -1,13 +1,12 @@
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { getFullscreen, getEditing } from '../../state/selectors/app';
+import { getEditing } from '../../state/selectors/app';
 import { getResolvedArgs, getSelectedPage } from '../../state/selectors/workpad';
 import { getState, getValue, getError } from '../../lib/resolved_arg';
 import { ElementWrapper as Component } from './element_wrapper';
 import { createHandlers as createHandlersWithDispatch } from './lib/handlers';
 
 const mapStateToProps = (state, { element }) => ({
-  isFullscreen: getFullscreen(state),
   isEditing: getEditing(state),
   resolvedArg: getResolvedArgs(state, element.id, 'expressionRenderable'),
   selectedPage: getSelectedPage(state),
@@ -19,17 +18,19 @@ const mapDispatchToProps = (dispatch, { element }) => ({
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
   const { resolvedArg, selectedPage } = stateProps;
-  const renderable = getValue(resolvedArg);
-  const { element } = ownProps;
+  const { element, restProps } = ownProps;
+  const { id, selected, transformMatrix, a, b } = element;
 
   return {
+    ...restProps, // pass through unused props
+    id, //pass through useful parts of the element object
+    selected,
+    transformMatrix,
+    a,
+    b,
     state: getState(resolvedArg),
     error: getError(resolvedArg),
-    renderable,
-    transformMatrix: element.transformMatrix,
-    id: element.id,
-    a: element.a,
-    b: element.b,
+    renderable: getValue(resolvedArg),
     createHandlers: dispatchProps.createHandlers(selectedPage),
   };
 };
@@ -39,5 +40,9 @@ export const ElementWrapper = connect(mapStateToProps, mapDispatchToProps, merge
 ElementWrapper.propTypes = {
   element: PropTypes.shape({
     id: PropTypes.string.isRequired,
+    selected: PropTypes.bool,
+    transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
+    a: PropTypes.number.isRequired,
+    b: PropTypes.number.isRequired,
   }).isRequired,
 };
diff --git a/public/components/enhance/error_boundary.js b/public/components/enhance/error_boundary.js
index 2b6a00d5242e4..12d97b8a8ada0 100644
--- a/public/components/enhance/error_boundary.js
+++ b/public/components/enhance/error_boundary.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { omit } from 'lodash';
 import { withState, withHandlers, lifecycle, mapProps, compose } from 'recompose';
@@ -22,13 +22,13 @@ export const errorBoundaryHoc = compose(
 );
 
 const ErrorBoundaryComponent = props => (
-  <div className="canvas_error-boundary">
+  <Fragment>
     {props.children({
       error: props.error,
       errorInfo: props.errorInfo,
       resetErrorState: props.resetErrorState,
     })}
-  </div>
+  </Fragment>
 );
 
 ErrorBoundaryComponent.propTypes = {
diff --git a/public/components/es_field_select/es_field_select.js b/public/components/es_field_select/es_field_select.js
index dd11186520c98..8098d4c8ee72a 100644
--- a/public/components/es_field_select/es_field_select.js
+++ b/public/components/es_field_select/es_field_select.js
@@ -8,7 +8,8 @@ export const ESFieldSelect = ({ value = '_score', fields = [], onChange, onFocus
 
   return (
     <EuiSelect
-      defaultValue={value}
+      compressed
+      value={value}
       options={options}
       onChange={e => onChange(e.target.value)}
       onFocus={onFocus}
diff --git a/public/components/es_fields_select/es_fields_select.js b/public/components/es_fields_select/es_fields_select.js
index 04bda4a5eb3d2..61bab0f16abad 100644
--- a/public/components/es_fields_select/es_fields_select.js
+++ b/public/components/es_fields_select/es_fields_select.js
@@ -16,7 +16,7 @@ export const ESFieldsSelect = ({ selected, fields, onChange, onFocus, onBlur })
       selectedOptions={selectedOptions}
       options={options}
       onChange={values => onChange(values.map(({ label }) => label))}
-      className="canvas__esdocs--fields"
+      className="canvasFieldsSelect"
       onFocus={onFocus}
       onBlur={onBlur}
     />
diff --git a/public/components/es_fields_select/es_fields_select.scss b/public/components/es_fields_select/es_fields_select.scss
index a62088c1480a0..2785e48079dc2 100644
--- a/public/components/es_fields_select/es_fields_select.scss
+++ b/public/components/es_fields_select/es_fields_select.scss
@@ -1,11 +1,3 @@
-.canvas__esdocs--fields {
+.canvasFieldsSelect {
   max-width: unset;
-
-  .euiFormControlLayout {
-    max-width: unset;
-
-    .euiComboBox__inputWrap {
-      max-width: unset;
-    }
-  }
 }
diff --git a/public/components/es_index_select/es_index_select.js b/public/components/es_index_select/es_index_select.js
index fe4bc3b00b06d..aaa36681004ff 100644
--- a/public/components/es_index_select/es_index_select.js
+++ b/public/components/es_index_select/es_index_select.js
@@ -9,6 +9,7 @@ export const ESIndexSelect = ({ value = '_all', loading, indices, onChange, onFo
 
   return (
     <EuiSelect
+      compressed
       defaultValue={value}
       onChange={e => onChange(e.target.value)}
       onBlur={onBlur}
diff --git a/public/components/expression/element_not_selected.js b/public/components/expression/element_not_selected.js
index f94be5f539ccb..e8a905f12a0e9 100644
--- a/public/components/expression/element_not_selected.js
+++ b/public/components/expression/element_not_selected.js
@@ -5,7 +5,12 @@ import { EuiButton } from '@elastic/eui';
 export const ElementNotSelected = ({ done }) => (
   <div>
     <div>Select an element to show expression input</div>
-    {done && <EuiButton onClick={done}> Close</EuiButton>}
+    {done && (
+      <EuiButton size="s" onClick={done}>
+        {' '}
+        Close
+      </EuiButton>
+    )}
   </div>
 );
 
diff --git a/public/components/expression/expression.js b/public/components/expression/expression.js
index 331a3783f0d38..e654870d91829 100644
--- a/public/components/expression/expression.js
+++ b/public/components/expression/expression.js
@@ -1,30 +1,38 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup, Button, ButtonToolbar } from 'react-bootstrap';
+import {
+  EuiPanel,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+} from '@elastic/eui';
 import { ExpressionInput } from '../expression_input';
 
 export const Expression = ({ formState, updateValue, setExpression, done, error }) => {
   return (
-    <div className="canvas__expression">
-      <FormGroup controlId="formControlsTextarea" validationState={error ? 'error' : null}>
-        <ExpressionInput value={formState.expression} onChange={updateValue} />
-        <label>
-          {error
-            ? error
-            : `The Canvas expression backing the element. Better know what you're doing here.`}
-        </label>
-      </FormGroup>
-      <ButtonToolbar>
-        <Button
-          disabled={!!error}
-          bsStyle="success"
-          onClick={() => setExpression(formState.expression)}
-        >
-          Run
-        </Button>
-        {done && <Button onClick={done}> {formState.dirty ? 'Cancel' : 'Done'}</Button>}
-      </ButtonToolbar>
-    </div>
+    <EuiPanel>
+      <ExpressionInput error={error} value={formState.expression} onChange={updateValue} />
+      <EuiSpacer size="m" />
+      <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty size="s" color={formState.dirty ? 'danger' : 'primary'} onClick={done}>
+            {formState.dirty ? 'Cancel' : 'Close'}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            fill
+            disabled={!!error}
+            onClick={() => setExpression(formState.expression)}
+            size="s"
+          >
+            Run
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
   );
 };
 
diff --git a/public/components/expression/expression.scss b/public/components/expression/expression.scss
deleted file mode 100644
index c3237a99f66eb..0000000000000
--- a/public/components/expression/expression.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.canvas__expression {
-
-  textarea {
-    font-size: $euiFontSize;
-    //font-size: $euiFontSizeS;
-    font-family: monospace;
-  }
-
-}
diff --git a/public/components/expression_input/expression_input.js b/public/components/expression_input/expression_input.js
index dff8701ad4579..293b6492f3362 100644
--- a/public/components/expression_input/expression_input.js
+++ b/public/components/expression_input/expression_input.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { EuiTextArea, EuiFormRow } from '@elastic/eui';
 import { getAutocompleteProposals } from '../../lib/autocomplete_proposals';
 import { ContextMenu } from '../context_menu';
 import { matchPairsProvider } from './match_pairs';
@@ -70,21 +71,29 @@ export class ExpressionInput extends React.Component {
   };
 
   render() {
+    const { value, error } = this.props;
+    const { suggestions } = this.state;
+
+    const helpText = error
+      ? null
+      : 'This is the coded expression that backs this element. You better know what you are doing here.';
     return (
       <div className="expressionInput">
         <ContextMenu
-          items={this.state.suggestions}
+          items={suggestions}
           onSelect={this.onSuggestionSelect}
           itemsStyle={this.getContextMenuItemsStyle()}
           itemComponent={Suggestion}
         >
-          <textarea
-            className="textarea form-control"
-            value={this.props.value}
-            onKeyDown={this.matchPairs}
-            onChange={this.onChange}
-            ref={ref => (this.ref = ref)}
-          />
+          <EuiFormRow fullWidth isInvalid={Boolean(error)} error={error} helpText={helpText}>
+            <EuiTextArea
+              className="canvasTextArea--code"
+              value={value}
+              onKeyDown={this.matchPairs}
+              onChange={this.onChange}
+              inputRef={ref => (this.ref = ref)}
+            />
+          </EuiFormRow>
         </ContextMenu>
       </div>
     );
@@ -94,4 +103,5 @@ export class ExpressionInput extends React.Component {
 ExpressionInput.propTypes = {
   value: PropTypes.string,
   onChange: PropTypes.func,
+  error: PropTypes.string,
 };
diff --git a/public/components/expression_input/suggestion.js b/public/components/expression_input/suggestion.js
index 55d9fea7326e6..5120d603bf203 100644
--- a/public/components/expression_input/suggestion.js
+++ b/public/components/expression_input/suggestion.js
@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 export const Suggestion = ({ item }) => (
-  <div className="suggestion">
-    <div className="name">{item.name}</div>
-    <div className="description">{item.description}</div>
+  <div className="canvasExpressionSuggestion">
+    <div className="canvasExpressionSuggestion__name">{item.name}</div>
+    <div className="canvasExpressionSuggestion__desc">{item.description}</div>
   </div>
 );
 
diff --git a/public/components/expression_input/suggestion.scss b/public/components/expression_input/suggestion.scss
index 0a8112ee0a88c..f1748578d1ffa 100644
--- a/public/components/expression_input/suggestion.scss
+++ b/public/components/expression_input/suggestion.scss
@@ -1,12 +1,12 @@
-.suggestion {
+.canvasExpressionSuggestion {
   display: flex;
 
-  .name {
+  .canvasExpressionSuggestion__name {
     width: 120px;
     font-weight: bold;
   }
 
-  .description {
+  .canvasExpressionSuggestion__desc {
     width: calc(100% - 120px);
   }
 }
diff --git a/public/components/faux_select/faux_select.js b/public/components/faux_select/faux_select.js
index 63566922f7221..f0abb359b2632 100644
--- a/public/components/faux_select/faux_select.js
+++ b/public/components/faux_select/faux_select.js
@@ -8,7 +8,7 @@ export const FauxSelect = ({ handleClick, children }) => (
     gutterSize="none"
     alignItems="center"
     justifyContent="spaceBetween"
-    className="euiSelect canvas__faux-select"
+    className="euiSelect  euiSelect--compressed euiSelect--fullWidth"
     style={{ padding: 12 }} // match padding with EuiSelect
     onClick={handleClick}
   >
diff --git a/public/components/feedback_button/feedback_button.js b/public/components/feedback_button/feedback_button.js
deleted file mode 100644
index f856ff10e97bc..0000000000000
--- a/public/components/feedback_button/feedback_button.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  EuiButton,
-  EuiHorizontalRule,
-  EuiOverlayMask,
-  EuiModal,
-  EuiModalHeader,
-  EuiModalHeaderTitle,
-  EuiModalBody,
-  EuiModalFooter,
-} from '@elastic/eui';
-import { NavbarButton } from '../navbar_button';
-
-export const FeedbackButton = ({ show, setShow }) => {
-  const formId = '1FAIpQLSfrHmSrLAWcLx8s4RM_pKP8_BvRGbASGeG-F_fagxUtGu7q4A';
-  const feedbackFormUrl = `https://docs.google.com/a/elastic.co/forms/d/e/${formId}/viewform?embedded=true`;
-  const forumLink = text => (
-    <a rel="noopener noreferrer" target="_blank" href="https://discuss.elastic.co/c/kibana">
-      {text}
-    </a>
-  );
-
-  const showFeedbackModal = () => setShow(true);
-  const closeFeedbackModal = () => setShow(false);
-
-  return (
-    <span>
-      <NavbarButton onClick={showFeedbackModal} className="pull-right">
-        <i className="fa fa-comment" />
-        Give Feedback
-      </NavbarButton>
-
-      {show && (
-        <EuiOverlayMask>
-          <EuiModal className="canvas__feedback-modal" onClose={closeFeedbackModal}>
-            <EuiModalHeader className="canvas__feedback-modal--header">
-              <EuiModalHeaderTitle>Give Feedback</EuiModalHeaderTitle>
-            </EuiModalHeader>
-            <EuiModalBody
-              className="canvas__feedback-modal--body"
-              style={{ overflow: 'none', position: 'relative' }}
-            >
-              <div className="message">
-                <p>
-                  Use the form below to provide feedback about Canvas, which only the people working
-                  on Canvas will be able to see. Keep in mind that we won't be able to contact you
-                  about your feedback.
-                </p>
-                <p>
-                  If you have a question or would like to post public feedback and have a public
-                  discussion, {forumLink('please use the Kibana forums instead')}.
-                </p>
-              </div>
-
-              <EuiHorizontalRule margin="s" />
-
-              <div className="feedback-form">
-                <iframe
-                  src={feedbackFormUrl}
-                  width="100%"
-                  height="550px"
-                  frameBorder="0"
-                  marginHeight="0"
-                  marginWidth="0"
-                >
-                  Loading...
-                </iframe>
-              </div>
-            </EuiModalBody>
-
-            <EuiModalFooter>
-              <EuiButton onClick={closeFeedbackModal}>Dismiss</EuiButton>
-            </EuiModalFooter>
-          </EuiModal>
-        </EuiOverlayMask>
-      )}
-    </span>
-  );
-};
-
-FeedbackButton.propTypes = {
-  show: PropTypes.any,
-  setShow: PropTypes.func,
-};
diff --git a/public/components/feedback_button/feedback_button.scss b/public/components/feedback_button/feedback_button.scss
deleted file mode 100644
index 2f76d2332d018..0000000000000
--- a/public/components/feedback_button/feedback_button.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.canvas__feedback-modal {
-  width: 600px;
-
-  .canvas__feedback-modal--body {
-    padding: 0px !important;
-    height: 800px;
-    overflow: hidden;
-
-    .message {
-      padding: $euiSize;
-      padding-bottom: 0;
-    }
-
-    .feedback-form {
-      height: 450px;
-      width: 100%;
-      overflow-y: scroll;
-    }
-  }
-}
diff --git a/public/components/feedback_button/index.js b/public/components/feedback_button/index.js
deleted file mode 100644
index 69f3f6a003e2c..0000000000000
--- a/public/components/feedback_button/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { withState, compose } from 'recompose';
-import { FeedbackButton as Component } from './feedback_button';
-
-export const FeedbackButton = compose(withState('show', 'setShow', null))(Component);
diff --git a/public/components/file_upload/file_upload.js b/public/components/file_upload/file_upload.js
index ad54a32065520..483f95022e642 100644
--- a/public/components/file_upload/file_upload.js
+++ b/public/components/file_upload/file_upload.js
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { EuiFilePicker } from '@elastic/eui';
 
-export const FileUpload = ({ id = '', className = 'canvas__file-upload', onUpload }) => (
-  <EuiFilePicker id={id} className={className} onChange={onUpload} />
+export const FileUpload = ({ id = '', className = 'canvasFileUpload', onUpload }) => (
+  <EuiFilePicker compressed id={id} className={className} onChange={onUpload} />
 );
 
 FileUpload.propTypes = {
diff --git a/public/components/font_picker/font_picker.js b/public/components/font_picker/font_picker.js
index ad9c0eaee3da9..5a6b97e3a6a59 100644
--- a/public/components/font_picker/font_picker.js
+++ b/public/components/font_picker/font_picker.js
@@ -60,16 +60,18 @@ export const FontPicker = ({ onSelect, value, anchorPosition }) => {
   return (
     <Popover
       id="font-picker-popover"
+      className="canvasFontPicker__wrapper"
       button={popoverButton}
-      panelClassName="canvas__font-picker--popover"
+      panelClassName="canvasFontPicker__popover"
       anchorPosition={anchorPosition}
+      panelPaddingSize="none"
     >
       {() => (
-        <div className="canvas__font-picker">
+        <div className="canvasFontPicker">
           {fonts.map(font => (
             <EuiLink
               key={font.label}
-              className="canvas__font-picker--font"
+              className="canvasFontPicker__font"
               style={{ fontFamily: font.value }}
               onClick={() => onSelect(font.value)}
             >
diff --git a/public/components/font_picker/font_picker.scss b/public/components/font_picker/font_picker.scss
index 8aa7ed2ecb44c..a777f74217f89 100644
--- a/public/components/font_picker/font_picker.scss
+++ b/public/components/font_picker/font_picker.scss
@@ -1,17 +1,20 @@
-.canvas__font-picker {
+.canvasFontPicker__wrapper {
+  // hacky fix until we can use EUI super select
+  > .euiPopover__anchor {
+    width: 100%;
+  }
+}
+
+.canvasFontPicker {
+  @include euiScrollBar;
+
   height: 200px;
   overflow-y: scroll;
 
-  .canvas__font-picker--font {
+  .canvasFontPicker__font {
     display: block;
     width: 100%;
     padding: $euiSizeXS $euiSize;
     color: black;
   }
 }
-
-.canvas__font-picker--popover {
-  .popover-content {
-    padding: 0;
-  }
-}
diff --git a/public/components/fullscreen/fullscreen.js b/public/components/fullscreen/fullscreen.js
index bd9165fefdcdb..78f1beba18ae2 100644
--- a/public/components/fullscreen/fullscreen.js
+++ b/public/components/fullscreen/fullscreen.js
@@ -47,10 +47,6 @@ export class Fullscreen extends React.Component {
       height: this.state.height,
     };
 
-    return (
-      <div className="canvas__fullscreen" allowFullScreen>
-        {children({ isFullscreen, windowSize })}
-      </div>
-    );
+    return children({ isFullscreen, windowSize });
   }
 }
diff --git a/public/components/fullscreen/fullscreen.scss b/public/components/fullscreen/fullscreen.scss
index d916b2ab92ecc..33735c6666449 100644
--- a/public/components/fullscreen/fullscreen.scss
+++ b/public/components/fullscreen/fullscreen.scss
@@ -1,41 +1,49 @@
-body.canvas-fullscreen {
-  nav.global-nav {
-    display: none;
+body.canvas-isFullscreen {
+  // this is a hack that overwrites Kibana's core chrome
+  .app-wrapper {
+    left: 0;
   }
 
-  .content .app-wrapper {
-    left: 0;
+  // set the background color
+  .canvasLayout {
+    background: #000; // This hex is OK, we always want it black
   }
 
-  .canvas__workpad_app {
-    .canvas__workpad_app--main .canvas__workpad_app--sidebar,
-    .canvas__workpad_app--main .canvas__workpad_header,
-    .canvas__toolbar {
-      display: none;
-    }
+  // hide all the interface parts
+  nav.global-nav,
+  .canvasLayout__stageHeader,
+  .canvasLayout__sidebar,
+  .canvasLayout__footer,
+  .canvasGrid {
+    display: none;
+  }
 
-    .canvas__workpad_app--main .canvas__workpad_app--workpad {
-      padding: 0;
-      background-color: black;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
+  .canvasLayout__stageContentOverflow {
+    overflow: visible;
+    position: static;
+    top: auto;
+    left: auto;
+    right: auto;
+    bottom: auto;
 
-      .canvas__workpad_app--workspace {
-        width: auto;
+    .canvasWorkpad__buffer {
+      padding: 0;
+      margin: 0;
+    }
+  }
 
-        .canvas__checkered {
-          background: none;
-        }
+  .canvasLayout__rows,
+  .canvasLayout__cols {
+    align-items: center;
+    justify-content: center;
+  }
 
-        .canvas__workpad {
-          overflow: hidden;
+  .canvasCheckered {
+    display: flex;
+    background: none;
+  }
 
-          .canvas__page {
-            box-shadow: none;
-          }
-        }
-      }
-    }
+  .canvasPage {
+    box-shadow: none;
   }
 }
diff --git a/public/components/fullscreen_control/index.js b/public/components/fullscreen_control/index.js
index b99bab75acbea..74ff5fea00014 100644
--- a/public/components/fullscreen_control/index.js
+++ b/public/components/fullscreen_control/index.js
@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { setFullscreen } from '../../state/actions/transient';
+import { setFullscreen, selectElement } from '../../state/actions/transient';
 import { getFullscreen } from '../../state/selectors/app';
 import { FullscreenControl as Component } from './fullscreen_control';
 
@@ -7,8 +7,11 @@ const mapStateToProps = state => ({
   isFullscreen: getFullscreen(state),
 });
 
-const mapDispatchToProps = {
-  setFullscreen,
-};
+const mapDispatchToProps = dispatch => ({
+  setFullscreen: value => {
+    dispatch(setFullscreen(value));
+    value && dispatch(selectElement(null));
+  },
+});
 
 export const FullscreenControl = connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/public/components/function_form/function_form.scss b/public/components/function_form/function_form.scss
index 9195db97fe2c7..1c0443228d230 100644
--- a/public/components/function_form/function_form.scss
+++ b/public/components/function_form/function_form.scss
@@ -1,16 +1,6 @@
-.canvas__function {
-  & > .canvas__loading {
+.canvasFunctionForm {
+  & > .canvasLoading {
     text-align: center;
     font-size: 20px;
   }
 }
-
-.canvas__function__arg--add {
-  display: inline-block;
-  padding-left: $euiSizeXS;
-
-  .label {
-    margin: ($euiSizeXS / 2);
-    cursor: pointer;
-  }
-}
diff --git a/public/components/function_form/function_form_component.js b/public/components/function_form/function_form_component.js
index ad71df2f1b9df..1b5eb71ae3792 100644
--- a/public/components/function_form/function_form_component.js
+++ b/public/components/function_form/function_form_component.js
@@ -18,7 +18,7 @@ export const FunctionFormComponent = props => {
     onValueRemove: props.onValueRemove,
   };
 
-  return <div className="canvas__function">{props.expressionType.render(passedProps)}</div>;
+  return <div className="canvasFunctionForm">{props.expressionType.render(passedProps)}</div>;
 };
 
 FunctionFormComponent.propTypes = {
diff --git a/public/components/function_form/function_form_context_error.js b/public/components/function_form/function_form_context_error.js
index 9e675e0341a5e..d51e8abd284e8 100644
--- a/public/components/function_form/function_form_context_error.js
+++ b/public/components/function_form/function_form_context_error.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 export const FunctionFormContextError = ({ context }) => (
-  <div className="canvas__function">ERROR: {context.error}</div>
+  <div className="canvasFunctionForm canvasFunctionForm--error">ERROR: {context.error}</div>
 );
 
 FunctionFormContextError.propTypes = {
diff --git a/public/components/function_form/function_form_context_pending.js b/public/components/function_form/function_form_context_pending.js
index 361e23699ce23..2c811dc366498 100644
--- a/public/components/function_form/function_form_context_pending.js
+++ b/public/components/function_form/function_form_context_pending.js
@@ -31,7 +31,7 @@ export class FunctionFormContextPending extends React.PureComponent {
 
   render() {
     return (
-      <div className="canvas__function">
+      <div className="canvasFunctionForm canvasFunctionForm--loading">
         <Loading />
       </div>
     );
diff --git a/public/components/function_form/function_unknown.js b/public/components/function_form/function_unknown.js
index a557b2f67a467..e561453a2078e 100644
--- a/public/components/function_form/function_unknown.js
+++ b/public/components/function_form/function_unknown.js
@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 export const FunctionUnknown = ({ argType }) => (
-  <div className="canvas__function">Unknown expression type "{argType}"</div>
+  <div className="canvasFunctionForm canvasFunctionForm--unknown-expression">
+    Unknown expression type "{argType}"
+  </div>
 );
 
 FunctionUnknown.propTypes = {
diff --git a/public/components/loading/loading.js b/public/components/loading/loading.js
index 94d730b332e6b..6e4ec096ab68c 100644
--- a/public/components/loading/loading.js
+++ b/public/components/loading/loading.js
@@ -5,7 +5,7 @@ import { EuiLoadingSpinner, EuiIcon } from '@elastic/eui';
 export const Loading = ({ animated, text }) => {
   if (animated) {
     return (
-      <div className="canvas__loading">
+      <div className="canvasLoading">
         {text && <span>{text}&nbsp;</span>}
         <EuiLoadingSpinner size="m" />
       </div>
@@ -13,7 +13,7 @@ export const Loading = ({ animated, text }) => {
   }
 
   return (
-    <div className="canvas__loading">
+    <div className="canvasLoading">
       {text && <span>{text}&nbsp;</span>}
       <EuiIcon type="clock" />
     </div>
diff --git a/public/components/loading/loading.scss b/public/components/loading/loading.scss
index 8a65a1420a5c1..1e8dd282f09a9 100644
--- a/public/components/loading/loading.scss
+++ b/public/components/loading/loading.scss
@@ -1,4 +1,4 @@
-.canvas__loading {
+.canvasLoading {
   display: flex;
   color: $euiColorLightShade;
   align-items: center;
diff --git a/public/components/media_card/index.js b/public/components/media_card/index.js
deleted file mode 100644
index bf27eeef7f61c..0000000000000
--- a/public/components/media_card/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { pure } from 'recompose';
-import { MediaCard as Component } from './media_card';
-
-export const MediaCard = pure(Component);
diff --git a/public/components/media_card/media_card.js b/public/components/media_card/media_card.js
deleted file mode 100644
index e3fc665676eba..0000000000000
--- a/public/components/media_card/media_card.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const noop = () => {};
-
-export const MediaCard = ({ image, children, title, onClick }) => {
-  const classes = ['canvas__media_card'];
-  if (onClick) classes.push('canvas__media_card_clickable');
-
-  return (
-    <div className={classes.join(' ')} onClick={onClick || noop}>
-      <div className="canvas__media_card-image" style={{ backgroundImage: `url(${image})` }} />
-
-      <div className="canvas__media_card-content">
-        <h4 className="canvas__media_card-title">{title}</h4>
-        {children}
-      </div>
-    </div>
-  );
-};
-
-MediaCard.propTypes = {
-  image: PropTypes.string,
-  title: PropTypes.string,
-  children: PropTypes.node,
-  onClick: PropTypes.func,
-};
diff --git a/public/components/media_card/media_card.scss b/public/components/media_card/media_card.scss
deleted file mode 100644
index 64ee5c2181c8f..0000000000000
--- a/public/components/media_card/media_card.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.canvas__media_card {
-  height: 200px;
-  width: 200px;
-  border: $euiBorderThin;
-  border-radius: $euiBorderThin;
-  display: inline-table;
-  margin: $euiSize $euiSize 0 0;
-  background-color: darken($euiColorDarkestShade, 5%);
-  border-color: lighten($euiColorDarkestShade, 10%);
-}
-
-.canvas__media_card_clickable:hover {
-  cursor: pointer;
-  border-color: $euiColorPrimary;
-}
-
-.canvas__media_card-image {
-  height: 80px;
-  background-position: center center;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-origin: content-box;
-  background-color: darken($euiColorDarkestShade, 2%);
-}
-
-.canvas__media_card-content {
-  font-size: $euiFontSizeXS;
-  padding: $euiSize;
-}
-
-.canvas__media_card-title {
-  text-transform: capitalize;
-  margin-top: 0px;
-}
diff --git a/public/components/navbar/navbar.js b/public/components/navbar/navbar.js
index becdd278f9cf9..3bcbb1bc1e8ca 100644
--- a/public/components/navbar/navbar.js
+++ b/public/components/navbar/navbar.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 export const Navbar = ({ children }) => {
-  return <div className="canvas__navbar">{children}</div>;
+  return <div className="canvasNavbar">{children}</div>;
 };
 
 Navbar.propTypes = {
diff --git a/public/components/navbar/navbar.scss b/public/components/navbar/navbar.scss
index e7649d4bac488..b34181f3068c0 100644
--- a/public/components/navbar/navbar.scss
+++ b/public/components/navbar/navbar.scss
@@ -1,8 +1,16 @@
-.canvas__navbar {
+.canvasNavbar {
   width: 100%;
   height: $euiSizeXL * 2;
-  background-color: $euiColorDarkestShade;
-  color: $euiColorLightShade;
-  padding-left: $euiSizeS;
-  padding-right: $euiSizeS;
+  background-color: darken($euiColorLightestShade, 5%);
+  position: relative;
+  z-index: 200;
+}
+
+.canvasNavBar__controls, .canvasNavBar__element {
+  padding: $euiSizeM;
+}
+
+.canvasNavBar__element {
+  width: 350px;
+  background-color: darken($euiColorDarkestShade, 10%);
 }
diff --git a/public/components/navbar_button/index.js b/public/components/navbar_button/index.js
deleted file mode 100644
index 7228eb2912939..0000000000000
--- a/public/components/navbar_button/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { pure } from 'recompose';
-import { NavbarButton as Component } from './navbar_button';
-
-export const NavbarButton = pure(Component);
diff --git a/public/components/navbar_button/navbar_button.js b/public/components/navbar_button/navbar_button.js
deleted file mode 100644
index d0d3f7282efb7..0000000000000
--- a/public/components/navbar_button/navbar_button.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export const NavbarButton = ({ children, onClick, className, disabled }) => {
-  const onClickHandler = ev => {
-    if (disabled) return;
-    onClick(ev);
-  };
-
-  return (
-    <button
-      disabled={disabled}
-      className={`canvas__navbarButton ${className || ''}`}
-      onClick={onClickHandler}
-    >
-      {children}
-    </button>
-  );
-};
-
-NavbarButton.propTypes = {
-  children: PropTypes.node,
-  onClick: PropTypes.func,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-};
diff --git a/public/components/navbar_button/navbar_button.scss b/public/components/navbar_button/navbar_button.scss
deleted file mode 100644
index a634c1e12b3a5..0000000000000
--- a/public/components/navbar_button/navbar_button.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.canvas__navbarButton {
-  line-height: ($euiSizeXL * 2);
-  height: 64px;
-  font-size: $euiFontSizeS;
-  color: $euiColorLightShade;
-  padding-right: $euiSize;
-  padding-left: $euiSize;
-  cursor: pointer;
-  border: 0;
-  background: transparent;
-
-  &:focus, &:active {
-    border: 0;
-    outline: none;
-  }
-
-  i.fa {
-    margin-right: $euiSizeXS;
-  }
-
-  &:hover {
-    color: $euiColorEmptyShade;
-  }
-
-  &:disabled {
-    color: $euiColorDarkShade;
-  }
-}
diff --git a/public/components/navbar_divider/index.js b/public/components/navbar_divider/index.js
deleted file mode 100644
index 05b3b1c84faf3..0000000000000
--- a/public/components/navbar_divider/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { pure } from 'recompose';
-import { NavbarDivider as Component } from './navbar_divider';
-
-export const NavbarDivider = pure(Component);
diff --git a/public/components/navbar_divider/navbar_divider.js b/public/components/navbar_divider/navbar_divider.js
deleted file mode 100644
index dcc72f69a9276..0000000000000
--- a/public/components/navbar_divider/navbar_divider.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import React from 'react';
-
-export const NavbarDivider = () => <div className="canvas__navbarDivider" />;
diff --git a/public/components/navbar_divider/navbar_divider.scss b/public/components/navbar_divider/navbar_divider.scss
deleted file mode 100644
index 3a4170ad804d1..0000000000000
--- a/public/components/navbar_divider/navbar_divider.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.canvas__navbarDivider {
-  height: 100%;
-  display: inline;
-  border-right: $euiBorderThin;
-}
diff --git a/public/components/page_config/page_config.js b/public/components/page_config/page_config.js
index 16d2626d4c98a..ddb93aee82563 100644
--- a/public/components/page_config/page_config.js
+++ b/public/components/page_config/page_config.js
@@ -1,15 +1,19 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { EuiFormRow } from '@elastic/eui';
+import { EuiFormRow, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { ColorPickerMini } from '../color_picker_mini';
 
 export const PageConfig = ({ setBackground, background }) => {
   return (
-    <EuiFormRow label="Page Background">
-      <span style={{ fontSize: 0, width: 'fit-content' }}>
-        <ColorPickerMini id="page-config" onChange={setBackground} value={background} />
-      </span>
-    </EuiFormRow>
+    <Fragment>
+      <EuiTitle size="xs">
+        <h4>Page</h4>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <EuiFormRow label="Background">
+        <ColorPickerMini onChange={setBackground} value={background} />
+      </EuiFormRow>
+    </Fragment>
   );
 };
 
diff --git a/public/components/page_manager/page_controls.js b/public/components/page_manager/page_controls.js
new file mode 100644
index 0000000000000..2826f74451e78
--- /dev/null
+++ b/public/components/page_manager/page_controls.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon } from '@elastic/eui';
+
+export const PageControls = ({ pageId, onDelete, onDuplicate, movePage }) => {
+  const handleDuplicate = ev => {
+    ev.preventDefault();
+    onDuplicate(pageId);
+  };
+
+  const handleDelete = ev => {
+    ev.preventDefault();
+    onDelete(pageId);
+  };
+
+  const handleMove = position => ev => {
+    ev.preventDefault();
+    movePage(pageId, position);
+  };
+
+  return (
+    <div className="canvasPageManager__controls">
+      <EuiFlexGroup gutterSize="xs" justifyContent="center">
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            iconType="sortLeft"
+            title="Move Left"
+            aria-label="Move Left"
+            onClick={ev => {
+              handleMove(-1)(ev);
+            }}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            color="danger"
+            iconType="trash"
+            title="Delete Page"
+            aria-label="Delete Page"
+            onClick={handleDelete}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            iconType="document"
+            title="Duplicate Page"
+            aria-label="Duplicate Page"
+            onClick={handleDuplicate}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            iconType="sortRight"
+            title="Move Left"
+            aria-label="Move Left"
+            onClick={ev => {
+              handleMove(+1)(ev);
+            }}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
+  );
+};
+
+PageControls.propTypes = {
+  pageId: PropTypes.string.isRequired,
+  pageNumber: PropTypes.number.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onDuplicate: PropTypes.func.isRequired,
+  movePage: PropTypes.func.isRequired,
+};
diff --git a/public/components/page_manager/page_manager.js b/public/components/page_manager/page_manager.js
index 1fd51cc9ff915..30cd7b1239c19 100644
--- a/public/components/page_manager/page_manager.js
+++ b/public/components/page_manager/page_manager.js
@@ -1,8 +1,11 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { EuiIcon, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { Tooltip } from '../tooltip';
 import { ConfirmModal } from '../confirm_modal';
 import { Link } from '../link';
 import { PagePreview } from '../page_preview';
+import { PageControls } from './page_controls';
 
 export class PageManager extends React.PureComponent {
   static propTypes = {
@@ -33,22 +36,43 @@ export class PageManager extends React.PureComponent {
     const pageNumber = i + 1;
 
     return (
-      <Link
+      <EuiFlexItem
         key={page.id}
-        name="loadWorkpad"
-        params={{ id: workpadId, page: pageNumber }}
-        aria-label={`Load page number ${pageNumber}`}
+        grow={false}
+        className={`canvasPageManager__page ${
+          page.id === selectedPage ? 'canvasPageManager__page-isActive' : ''
+        }`}
       >
-        <PagePreview
-          page={page}
-          height={94}
-          pageNumber={pageNumber}
-          movePage={movePage}
-          duplicatePage={duplicatePage}
-          selectedPage={selectedPage}
-          confirmDelete={this.confirmDelete}
-        />
-      </Link>
+        <EuiFlexGroup gutterSize="s">
+          <EuiFlexItem grow={false}>
+            <EuiText size="xs" className="canvasPageManager__pageNumber">
+              {pageNumber}
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <Link
+              name="loadWorkpad"
+              params={{ id: workpadId, page: pageNumber }}
+              aria-label={`Load page number ${pageNumber}`}
+            >
+              <PagePreview
+                page={page}
+                height={94}
+                pageNumber={pageNumber}
+                movePage={movePage}
+                selectedPage={selectedPage}
+              />
+            </Link>
+            <PageControls
+              pageId={page.id}
+              pageNumber={pageNumber}
+              movePage={movePage}
+              onDuplicate={duplicatePage}
+              onDelete={this.confirmDelete}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
     );
   };
 
@@ -56,14 +80,27 @@ export class PageManager extends React.PureComponent {
     const { pages, addPage, deleteId } = this.props;
 
     return (
-      <div className="canvas__page-manager">
-        <div className="canvas__page-manager--pages">
-          {pages.map(this.renderPage)}
-          <div className="canvas__page-manager--page-add" onClick={addPage}>
-            <i className="fa fa-plus-circle" />
-          </div>
-        </div>
-
+      <Fragment>
+        <EuiFlexGroup gutterSize="none" className="canvasPageManager">
+          <EuiFlexItem className="canvasPageManager__pages">
+            <div className="canvasPageManager__pageScroll">
+              <EuiFlexGroup gutterSize="none" className="canvasPageManager__pageList">
+                {pages.map(this.renderPage)}
+              </EuiFlexGroup>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <Tooltip
+              anchorClassName="canvasPageManager__addPageTip"
+              content="Add a new page to this workpad"
+              position="left"
+            >
+              <button onClick={addPage} className="canvasPageManager__addPage">
+                <EuiIcon color="ghost" type="plusInCircle" size="l" />
+              </button>
+            </Tooltip>
+          </EuiFlexItem>
+        </EuiFlexGroup>
         <ConfirmModal
           isOpen={deleteId != null}
           title="Remove Page"
@@ -72,7 +109,7 @@ export class PageManager extends React.PureComponent {
           onConfirm={this.doDelete}
           onCancel={this.resetDelete}
         />
-      </div>
+      </Fragment>
     );
   }
 }
diff --git a/public/components/page_manager/page_manager.scss b/public/components/page_manager/page_manager.scss
index 6207a9e98ba76..80f2e7e455983 100644
--- a/public/components/page_manager/page_manager.scss
+++ b/public/components/page_manager/page_manager.scss
@@ -1,107 +1,162 @@
-.canvas__page-manager {
+
+.canvasPageManager {
   white-space: nowrap;
-  overflow-x: auto;
-  overflow-y: hidden;
+  max-width: 100%;
 
-  .canvas__page-manager--pages {
-    max-height: ($euiSizeXXL + $euiSizeS) * 3;
-    padding-top: $euiSizeS;
-    margin-bottom: $euiSizeS;
+  .canvasPageManager__pages {
+    position: relative;
+    height: 160px;
   }
 
-  .canvas__page-manager--pages a {
-    box-shadow: none;
-    padding-left: $euiSizeXS;
+  .canvasPageManager__pageScroll {
+    @include euiScrollBar;
+    overflow-x: auto;
+    overflow-y: hidden;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+
   }
 
-  .canvas__page-manager--page.active {
-    box-shadow: 0 0 1px 2px $euiColorPrimary;
+  .canvasPageManager__pageList > div {
+    animation: trayPop $euiAnimSpeedNormal $euiAnimSlightResistance;
+    opacity: 0;
+    animation-fill-mode: forwards;
   }
 
-  .canvas__page-manager--page {
-    white-space: initial;
-    position: relative;
-    color: initial;
-    border: $euiBorderThin;
-    display: inline-block;
-    vertical-align: top;
-    font-weight: bold;
-    width: ($euiSizeXL * 2);
-    height: ($euiSizeXXL + $euiSizeS) * 2;
-    margin: 0 $euiSize $euiSizeS 0;
-    cursor: pointer;
+  @for $i from 1 through 10 {
+    .canvasPageManager__pageList > div:nth-child(#{$i}n) {
+      animation-delay: #{$i * 0.05}s;
+    }
+  }
+
+  .canvasPageManager__addPage {
+    width: $euiSizeXXL + $euiSize;
+    background: $euiColorSecondary;
+    color: $euiColorGhost;
+    opacity: 0;
+    animation: buttonPop $euiAnimSpeedNormal $euiAnimSlightResistance;
+    animation-fill-mode: forwards;
+    height: 160px;
+  }
+
+  .canvasPageManager__addPageTip {
+    display: block;
+    height: 100%;
+  }
+
+  .canvasPageManager__page {
+    padding: $euiSize $euiSize $euiSize $euiSizeS;
+    color: inherit;
+    min-height: 144px;
+    max-height: 160px;
+
+    &:focus, &-isActive {
+      background-color: darken($euiColorLightestShade, 10%);
+      outline: none;
+      text-decoration: none;
+    }
+
+    &-isActive:focus {
+      .canvasPageManager__pagePreview {
+        outline-color: $euiColorVis0;
+      }
+    }
 
     &:hover {
-      background-color: $euiColorMediumShade;
-      .canvas__page-manager--page-controls {
-        bottom: 0;
-        color: $euiColorLightShade;
-        display: block;
-        position: absolute;
-        text-align: center;
-        width: 100%;
-        background-color: $euiColorDarkestShade;
-        opacity: 0.75;
-
-        > * {
-          padding: $euiSizeXS;
-        }
-
-        .delete,
-        .duplicate {
-          font-size: $euiFontSize;
-        }
-
-        .delete {
-          color: $euiColorDanger;
-        }
-
-        .duplicate {
-          color: $euiColorPrimary;
-        }
+      text-decoration: none;
+
+      .canvasPageManager__pagePreview {
+        @include euiBottomShadowMedium($opacity: .3);
+      }
+
+      .canvasPageManager__controls {
+        visibility: visible;
+        opacity: 1;
       }
 
-      .canvas__page-manager--page-remove {
-        display: inline;
+      .canvasPageManager__removeIcon {
+        visibility: visible;
+        opacity: 1;
       }
     }
 
-    .canvas__page-manager--page-remove {
-      display: none;
-      position: absolute;
-      top: -$euiSizeS;
-      right: -$euiSizeM;
+    &-isActive {
+      .canvasPageManager__pagePreview {
+        @include euiBottomShadowMedium;
+        outline: $euiBorderThick;
+        outline-color: $euiColorDarkShade;
+      }
     }
 
-    .canvas__page-manager--page-controls {
+    // layout overrides
+    .canvasInteractable-actions,
+    .canvasInteractable-resize,
+    .canvasRenderEl--remove-icon {
       display: none;
     }
+  }
 
-    .canvas__page-manager--page-index {
-      overflow: hidden;
-      height: ($euiSizeXXL + $euiSizeS) * 2;
-    }
+  .canvasPageManager__pageNumber {
+    color: $euiColorDarkShade !important;
+  }
 
-    .canvas__interactable-actions,
-    .canvas__interactable-resize,
-    .canvas__element--remove-icon {
-      display: none;
+  .canvasPageManager__pagePreview {
+    @include euiBottomShadowSmall;
+
+    height: ($euiSizeXXL + $euiSizeS) * 2;
+    position: relative;
+    white-space: initial;
+    position: relative;
+    vertical-align: top;
+    width: ($euiSizeXL * 2);
+    height: ($euiSizeXXL + $euiSizeS) * 2;
+    overflow: hidden;
+    margin: 0 auto;
+
+    .canvasPositionable {
+      position: absolute;
     }
   }
 
-  .canvas__page-manager--page-add {
-    display: inline-block;
-    line-height: $euiSizeXXL * 2;
-    font-size: $euiFontSizeXXL;
-    padding: 0 $euiSizeS;
-    color: $euiColorMediumShade;
+  .canvasPageManager__controls {
+    margin-top: $euiSizeS;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance;
+    transition-delay: $euiAnimSpeedNormal;
+    border-radius: $euiBorderRadius;
+  }
+}
 
-    &:hover {
-      color: $euiColorEmptyShade;
-    }
+@keyframes buttonPop {
+  0% {
+    opacity: 0;
+    transform: translateX(100%);
   }
+  1% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 
-  .canvas__positionable {
-    position: absolute;
+@keyframes trayPop {
+  0% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  1% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
diff --git a/public/components/page_preview/page_controls.js b/public/components/page_preview/page_controls.js
deleted file mode 100644
index 7c0a210388d2a..0000000000000
--- a/public/components/page_preview/page_controls.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export class PageControls extends React.PureComponent {
-  static propTypes = {
-    pageId: PropTypes.string.isRequired,
-    pageNumber: PropTypes.number.isRequired,
-    duplicatePage: PropTypes.func.isRequired,
-    movePage: PropTypes.func.isRequired,
-  };
-
-  duplicatePage = pageId => ev => {
-    ev.preventDefault();
-    this.props.duplicatePage(pageId);
-  };
-
-  movePage = (pageId, position) => ev => {
-    ev.preventDefault();
-    this.props.movePage(pageId, position);
-  };
-
-  render() {
-    const { pageId, pageNumber } = this.props;
-
-    return (
-      <div className="canvas__page-manager--page-controls">
-        {`${pageNumber}`}
-        <br />
-        <span
-          className="fa fa-angle-double-left canvas__page-manager--page-move"
-          onClick={this.movePage(pageId, -1)}
-        />
-        <span className="fa fa-files-o" onClick={this.duplicatePage(pageId)} />
-        <span
-          className="fa fa-angle-double-right canvas__page-manager--page-move"
-          onClick={this.movePage(pageId, +1)}
-        />
-      </div>
-    );
-  }
-}
diff --git a/public/components/page_preview/page_preview.js b/public/components/page_preview/page_preview.js
index ee323466d639f..6e8a135252e56 100644
--- a/public/components/page_preview/page_preview.js
+++ b/public/components/page_preview/page_preview.js
@@ -1,45 +1,25 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { DomPreview } from '../dom_preview';
-import { RemoveIcon } from '../remove_icon';
-import { PageControls } from './page_controls';
 
 export class PagePreview extends PureComponent {
   static propTypes = {
     page: PropTypes.object.isRequired,
     height: PropTypes.number.isRequired,
     pageNumber: PropTypes.number.isRequired,
-    movePage: PropTypes.func,
-    duplicatePage: PropTypes.func,
-    selectedPage: PropTypes.string,
-    confirmDelete: PropTypes.func,
     width: PropTypes.number,
     setWidth: PropTypes.func,
   };
 
-  confirmDelete = pageId => ev => {
-    ev.preventDefault();
-    this.props.confirmDelete(pageId);
-  };
-
   render() {
-    const {
-      page,
-      pageNumber,
-      height,
-      selectedPage,
-      movePage,
-      duplicatePage,
-      width,
-      setWidth,
-    } = this.props;
+    const { page, pageNumber, height, width, setWidth } = this.props;
 
     return (
       <div
-        className={`canvas__page-manager--page ${page.id === selectedPage ? 'active' : ''}`}
+        className="canvasPageManager__pagePreview"
         style={{ width: width, backgroundColor: page.style.background }}
       >
-        <div className="canvas__page-manager--page-index" style={{ width: width }}>
+        <div className="canvasPageManager__preview" style={{ width: width }}>
           <DomPreview
             elementId={page.id}
             pageNumber={pageNumber}
@@ -47,16 +27,6 @@ export class PagePreview extends PureComponent {
             setPagePreviewWidth={width => setWidth(width)}
           />
         </div>
-        <RemoveIcon
-          className="canvas__page-manager--page-remove"
-          onClick={this.confirmDelete(page.id)}
-        />
-        <PageControls
-          pageId={page.id}
-          pageNumber={pageNumber}
-          movePage={movePage}
-          duplicatePage={duplicatePage}
-        />
       </div>
     );
   }
diff --git a/public/components/paginate_controls/index.js b/public/components/paginate_controls/index.js
index ef4210065e8f1..472ec5f6a6243 100644
--- a/public/components/paginate_controls/index.js
+++ b/public/components/paginate_controls/index.js
@@ -1,3 +1 @@
-import { PageControls } from './page_controls';
-
-export { PageControls };
+export { PaginateControls } from './paginate_controls';
diff --git a/public/components/paginate_controls/page_controls.js b/public/components/paginate_controls/paginate_controls.js
similarity index 73%
rename from public/components/paginate_controls/page_controls.js
rename to public/components/paginate_controls/paginate_controls.js
index 49f03ce03f678..8b26fa874956e 100644
--- a/public/components/paginate_controls/page_controls.js
+++ b/public/components/paginate_controls/paginate_controls.js
@@ -7,7 +7,7 @@ const showPages = ({ setPage, pageNumber, totalPages }) => {
   for (let i = 1; i <= totalPages; i++) {
     if (i === pageNumber)
       pages.push(
-        <span key={`pageNumber${i}`} className="page-number active">
+        <span key={`pageNumber${i}`} className="canvasPaginate__number active">
           {i}
         </span>
       );
@@ -15,7 +15,7 @@ const showPages = ({ setPage, pageNumber, totalPages }) => {
       pages.push(
         <button
           key={`pageNumber${i}`}
-          className="btn btn-link page-number"
+          className="btn btn-link canvasPaginate__number"
           onClick={() => setPage(i)}
         >
           {i}
@@ -27,7 +27,7 @@ const showPages = ({ setPage, pageNumber, totalPages }) => {
   return pages;
 };
 
-export const PageControls = ({
+export const PaginateControls = ({
   prevPage,
   prevPageEnabled,
   setPage,
@@ -36,22 +36,22 @@ export const PageControls = ({
   nextPage,
   nextPageEnabled,
 }) => (
-  <div className="canvas__paginate--page-controls">
+  <div className="canvasPaginate__controls">
     {prevPageEnabled && (
-      <button className="btn btn-link page-navigate" onClick={prevPage}>
+      <button className="btn btn-link canvasPaginate__nav" onClick={prevPage}>
         <i className="fa fa-angle-left" />
       </button>
     )}
     {showPages({ setPage, pageNumber, totalPages })}
     {nextPageEnabled && (
-      <button className="btn btn-link page-navigate" onClick={nextPage}>
+      <button className="btn btn-link canvasPaginate__nav" onClick={nextPage}>
         <i className="fa fa-angle-right" />
       </button>
     )}
   </div>
 );
 
-PageControls.propTypes = {
+PaginateControls.propTypes = {
   pageNumber: PropTypes.number.isRequired,
   totalPages: PropTypes.number.isRequired,
   setPage: PropTypes.func.isRequired,
diff --git a/public/components/paginate_controls/paginate_controls.scss b/public/components/paginate_controls/paginate_controls.scss
index 6b16197bf40fb..5d086df636307 100644
--- a/public/components/paginate_controls/paginate_controls.scss
+++ b/public/components/paginate_controls/paginate_controls.scss
@@ -1,9 +1,9 @@
-.canvas__paginate--page-controls {
+.canvasPaginate__controls {
   overflow: hidden;
   text-align: center;
 
-  .page-navigate,
-  .page-number {
+  .canvasPaginate__nav,
+  .canvasPaginate__number {
     padding: ($euiSizeXS / 2);
     vertical-align: middle;
   }
diff --git a/public/components/palette_picker/palette_picker.js b/public/components/palette_picker/palette_picker.js
index 8d9cdc8ee10c9..d2a3eefff82ce 100644
--- a/public/components/palette_picker/palette_picker.js
+++ b/public/components/palette_picker/palette_picker.js
@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
-import { EuiLink, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { Popover } from '../popover';
 import { PaletteSwatch } from '../palette_swatch';
 import { palettes } from '../../../common/lib/palettes';
 
 export const PalettePicker = ({ onChange, value, anchorPosition }) => {
   const button = handleClick => (
-    <EuiLink style={{ width: '100%' }} onClick={handleClick}>
+    <button style={{ width: '100%', height: 16 }} onClick={handleClick}>
       <PaletteSwatch colors={value.colors} gradient={value.gradient} />
-    </EuiLink>
+    </button>
   );
 
   return (
@@ -18,26 +18,27 @@ export const PalettePicker = ({ onChange, value, anchorPosition }) => {
       id="palette-picker-popover"
       button={button}
       anchorPosition={anchorPosition}
-      panelClassName="canvas__palette-picker--swatches-popover"
+      panelClassName="canvasPalettePicker__swatchesPanel"
+      className="canvasPalettePicker__swatchesPopover"
     >
       {() => (
-        <div className="canvas canvas__palette-picker--swatches">
+        <div className="canvas canvasPalettePicker__swatches">
           {map(palettes, (palette, name) => (
-            <EuiLink
+            <button
               key={name}
               onClick={() => onChange(palette)}
-              className="canvas__palette-picker--swatch"
+              className="canvasPalettePicker__swatch"
               style={{ width: '100%' }}
             >
-              <EuiFlexGroup gutterSize="none" alignItems="center">
+              <EuiFlexGroup gutterSize="s" alignItems="center">
                 <EuiFlexItem grow={1}>
-                  <span className="canvas__palette-picker--label">{name.replace(/_/g, ' ')}</span>
+                  <span className="canvasPalettePicker__label">{name.replace(/_/g, ' ')}</span>
                 </EuiFlexItem>
                 <EuiFlexItem grow={2}>
                   <PaletteSwatch colors={palette.colors} gradient={palette.gradient} />
                 </EuiFlexItem>
               </EuiFlexGroup>
-            </EuiLink>
+            </button>
           ))}
         </div>
       )}
diff --git a/public/components/palette_picker/palette_picker.scss b/public/components/palette_picker/palette_picker.scss
index 66a1cef43ff25..64678e9fc8de9 100644
--- a/public/components/palette_picker/palette_picker.scss
+++ b/public/components/palette_picker/palette_picker.scss
@@ -1,25 +1,41 @@
-.canvas__palette-picker {
+.canvasPalettePicker {
   display: inline-block;
   width: 100%;
 }
 
-.canvas__palette-picker--swatches-popover {
-  .popover-content {
-    padding: 0;
-  }
-}
+.canvasPalettePicker__swatches {
+  @include euiScrollBar;
 
-.canvas__palette-picker--swatches {
   width: 280px;
   height: 250px;
   overflow-y: scroll;
 }
 
-.canvas__palette-picker--swatch {
-  padding: $euiSizeS;
+.canvasPalettePicker__swatchesPanel {
+  padding: $euiSizeS 0 !important;
+}
+
+.canvasPalettePicker__swatch {
+  padding: $euiSizeS $euiSize;
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+    background-color: $euiColorLightestShade;
+
+    .canvasPaletteSwatch,
+    .canvasPaletteSwatch__background {
+      transform: scaleY(2);
+    }
+    .canvasPalettePicker__label {
+      color: $euiTextColor;
+    }
+  }
 }
 
-.canvas__palette-picker--label {
-  font-size: $euiFontSizeS;
+.canvasPalettePicker__label {
+  font-size: $euiFontSizeXS;
   text-transform: capitalize;
+  text-align: left;
+  color: $euiColorDarkShade;
 }
diff --git a/public/components/palette_swatch/palette_swatch.js b/public/components/palette_swatch/palette_swatch.js
index ccc2cc68c3787..ceea9a7b25d04 100644
--- a/public/components/palette_swatch/palette_swatch.js
+++ b/public/components/palette_swatch/palette_swatch.js
@@ -8,7 +8,7 @@ export const PaletteSwatch = ({ colors, gradient }) => {
     colorBoxes = colors.map(color => (
       <div
         key={color}
-        className="canvas__palette-swatch--box"
+        className="canvasPaletteSwatch__box"
         style={{
           backgroundColor: color,
         }}
@@ -18,7 +18,7 @@ export const PaletteSwatch = ({ colors, gradient }) => {
     colorBoxes = [
       <div
         key="gradient"
-        className="canvas__palette-swatch--box"
+        className="canvasPaletteSwatch__box"
         style={{
           background: `linear-gradient(90deg, ${colors.join(', ')})`,
         }}
@@ -27,9 +27,9 @@ export const PaletteSwatch = ({ colors, gradient }) => {
   }
 
   return (
-    <div className="canvas__palette-swatch">
-      <div className="canvas__palette-swatch--background canvas__checkered" />
-      <div className="canvas__palette-swatch--foreground">{colorBoxes}</div>
+    <div className="canvasPaletteSwatch">
+      <div className="canvasPaletteSwatch__background canvasCheckered" />
+      <div className="canvasPaletteSwatch__foreground">{colorBoxes}</div>
     </div>
   );
 };
diff --git a/public/components/palette_swatch/palette_swatch.scss b/public/components/palette_swatch/palette_swatch.scss
index 0bed4c531d702..b57c520a5b07f 100644
--- a/public/components/palette_swatch/palette_swatch.scss
+++ b/public/components/palette_swatch/palette_swatch.scss
@@ -1,23 +1,26 @@
-.canvas__palette-swatch {
+.canvasPaletteSwatch {
   display: inline-block;
   position: relative;
-  height: $euiSizeL;
+  height: $euiSizeXS;
   width: 100%;
   overflow: hidden;
-  border-radius: $euiSize;
-  border: 2px solid $euiColorDarkShade;
+  text-align: left;
+  transform: scaleY(1);
+  transition: transform $euiAnimSlightResistance $euiAnimSpeedExtraFast;
 
-  .canvas__palette-swatch--background {
+  .canvasPaletteSwatch__background {
     position: absolute;
-    height: $euiSizeL;
+    height: $euiSizeXS;
     top: 0;
     left: 0;
     width: 100%;
+    transform: scaleY(1);
+    transition: transform $euiAnimSlightResistance $euiAnimSpeedExtraFast;
   }
 
-  .canvas__palette-swatch--foreground {
+  .canvasPaletteSwatch__foreground {
     position: absolute;
-    height: $euiSizeL + 2px; // TODO: No idea why this can't be 25, but it leaves a 1px white spot in the palettePicker if its 25
+    height: 100%; // TODO: No idea why this can't be 25, but it leaves a 1px white spot in the palettePicker if its 25
     top: 0;
     left: 0;
     white-space: nowrap;
@@ -25,7 +28,7 @@
     display: flex;
   }
 
-  .canvas__palette-swatch--box {
+  .canvasPaletteSwatch__box {
     display: inline-block;
     width: 100%;
   }
diff --git a/public/components/popover/popover.js b/public/components/popover/popover.js
index 5539c627c356f..37b792e280f70 100644
--- a/public/components/popover/popover.js
+++ b/public/components/popover/popover.js
@@ -1,41 +1,8 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Popover as BootstrapPopover, Overlay } from 'react-bootstrap';
-import uuid from 'uuid/v4';
-
-// mapping for EUI popover positions to bootstrap placements
-const anchorPositions = {
-  upCenter: 'top',
-  upLeft: 'top',
-  upRight: 'top',
-  downCenter: 'bottom',
-  downLeft: 'bottom',
-  downRight: 'bottom',
-  leftCenter: 'left',
-  leftUp: 'left',
-  leftDown: 'left',
-  rightCenter: 'right',
-  rightUp: 'right',
-  rightDown: 'right',
-};
-
-export class Popover extends PureComponent {
-  static propTypes = {
-    id: PropTypes.string,
-    panelClassName: PropTypes.string,
-    button: PropTypes.func.isRequired,
-    children: PropTypes.func.isRequired,
-    title: PropTypes.string,
-    anchorPosition: PropTypes.string,
-    style: PropTypes.object,
-  };
-
-  static defaultProps = {
-    ownFocus: false,
-    anchorPosition: 'downCenter',
-    panelPaddingSize: 'm',
-  };
+import { EuiPopover } from '@elastic/eui';
 
+export class Popover extends Component {
   state = {
     isPopoverOpen: false,
   };
@@ -53,36 +20,49 @@ export class Popover extends PureComponent {
   };
 
   render() {
-    const { id, button, children, panelClassName, title, anchorPosition, style } = this.props;
-
-    const position = anchorPositions[anchorPosition] ? anchorPosition : 'downCenter';
-
-    // TODO: replace bootstrap popover with EuiPopover https://github.com/elastic/kibana-canvas/issues/612
-    // Pending https://github.com/elastic/eui/issues/873
-    const popover = (
-      <BootstrapPopover id={id || `popover-${uuid()}`} className={panelClassName} title={title}>
-        {children({ closePopover: this.closePopover })}
-      </BootstrapPopover>
-    );
+    // TODO: This should just pass {...rest} otherwise it won't get EUI updates.
+    const {
+      className,
+      button,
+      children,
+      panelClassName,
+      anchorPosition,
+      panelPaddingSize,
+      withTitle,
+      ownFocus,
+      title,
+      ...rest
+    } = this.props;
 
     return (
-      <div
-        ref={button => {
-          this.target = button;
-        }}
-        style={style}
+      <EuiPopover
+        panelClassName={panelClassName}
+        title={title}
+        withTitle={withTitle}
+        anchorPosition={anchorPosition}
+        button={button(this.handleClick)}
+        isOpen={this.state.isPopoverOpen}
+        panelPaddingSize={panelPaddingSize}
+        closePopover={this.closePopover}
+        className={className}
+        ownFocus={ownFocus}
+        {...rest}
       >
-        {button(this.handleClick)}
-        <Overlay
-          show={this.state.isPopoverOpen}
-          onHide={() => this.setState({ isPopoverOpen: false })}
-          rootClose
-          placement={anchorPositions[position]}
-          target={this.target}
-        >
-          {popover}
-        </Overlay>
-      </div>
+        {children({ closePopover: this.closePopover })}
+      </EuiPopover>
     );
   }
 }
+
+Popover.propTypes = {
+  isOpen: PropTypes.bool,
+  ownFocus: PropTypes.bool,
+  withTitle: PropTypes.bool,
+  button: PropTypes.func.isRequired,
+  children: PropTypes.func,
+  className: PropTypes.string,
+  anchorPosition: PropTypes.string,
+  panelClassName: PropTypes.string,
+  title: PropTypes.string,
+  panelPaddingSize: PropTypes.string,
+};
diff --git a/public/components/positionable/positionable.js b/public/components/positionable/positionable.js
index 3ad8bba872797..f12e135116cc0 100644
--- a/public/components/positionable/positionable.js
+++ b/public/components/positionable/positionable.js
@@ -18,7 +18,7 @@ export const Positionable = ({ children, transformMatrix, a, b }) => {
 
     const stepChild = React.cloneElement(child, { size: { width: a * 2, height: b * 2 } });
     return (
-      <div className="canvas__positionable canvas__interactable" style={newStyle}>
+      <div className="canvasPositionable canvasInteractable" style={newStyle}>
         {stepChild}
       </div>
     );
diff --git a/public/components/positionable/positionable.scss b/public/components/positionable/positionable.scss
index 2c1514452378e..ae6c0c8f5b6ef 100644
--- a/public/components/positionable/positionable.scss
+++ b/public/components/positionable/positionable.scss
@@ -1,4 +1,4 @@
-.canvas__positionable {
+.canvasPositionable {
   transform-origin: center center; /* the default, only for clarity */
   transform-style: preserve-3d;
   cursor: -webkit-grab;
diff --git a/public/components/refresh_control/auto_refresh_controls.js b/public/components/refresh_control/auto_refresh_controls.js
index f11b29468d5bb..6e61f522d2817 100644
--- a/public/components/refresh_control/auto_refresh_controls.js
+++ b/public/components/refresh_control/auto_refresh_controls.js
@@ -1,85 +1,138 @@
-import React from 'react';
+import React, { Fragment, Component } from 'react';
 import PropTypes from 'prop-types';
 import {
   EuiFlexGroup,
+  EuiFlexGrid,
   EuiFlexItem,
   EuiFormRow,
   EuiButton,
   EuiLink,
   EuiFieldText,
   EuiSpacer,
+  EuiHorizontalRule,
+  EuiDescriptionList,
+  EuiDescriptionListTitle,
+  EuiDescriptionListDescription,
+  EuiFormLabel,
+  EuiText,
 } from '@elastic/eui';
 import { timeDurationString } from '../../lib/time_duration';
 
-export const AutoRefreshControls = ({ refreshInterval, setRefresh, disableInterval }) => {
-  let refreshInput;
+export class AutoRefreshControls extends Component {
+  static propTypes = {
+    refreshInterval: PropTypes.number,
+    setRefresh: PropTypes.func.isRequired,
+    disableInterval: PropTypes.func.isRequired,
+    doRefresh: PropTypes.func.isRequired,
+  };
 
-  return (
-    <div>
-      {refreshInterval > 0 ? (
-        <EuiFlexGroup gutterSize="xs" alignItems="baseline">
-          <EuiFlexItem grow={false}>
-            <h5>Interval: {timeDurationString(refreshInterval)}</h5>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiLink onClick={disableInterval}>Disable</EuiLink>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      ) : (
-        <h5>Interval: disabled</h5>
-      )}
+  refreshInput = null;
 
-      <EuiSpacer size="m" />
+  render() {
+    const { refreshInterval, setRefresh, doRefresh, disableInterval } = this.props;
 
-      <EuiFlexGroup
-        gutterSize="m"
-        className="canvas__refresh_control--auto-refresh--preset-intervals"
-      >
-        <EuiFlexItem className="items">
-          <EuiLink onClick={() => setRefresh(5000)}>5 Seconds</EuiLink>
-          <EuiLink onClick={() => setRefresh(15000)}>15 Seconds</EuiLink>
-          <EuiLink onClick={() => setRefresh(30000)}>30 Seconds</EuiLink>
-          <EuiLink onClick={() => setRefresh(60000)}>1 Minute</EuiLink>
-          <EuiLink onClick={() => setRefresh(300000)}>5 Minutes</EuiLink>
-          <EuiLink onClick={() => setRefresh(900000)}>15 Minutes</EuiLink>
-        </EuiFlexItem>
-        <EuiFlexItem className="items">
-          <EuiLink onClick={() => setRefresh(1800000)}>30 Minutes</EuiLink>
-          <EuiLink onClick={() => setRefresh(3600000)}>1 Hour</EuiLink>
-          <EuiLink onClick={() => setRefresh(7200000)}>2 Hours</EuiLink>
-          <EuiLink onClick={() => setRefresh(21600000)}>6 Hours</EuiLink>
-          <EuiLink onClick={() => setRefresh(43200000)}>12 Hours</EuiLink>
-          <EuiLink onClick={() => setRefresh(86400000)}>24 Hours</EuiLink>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-
-      <EuiSpacer size="m" />
-
-      <form
-        onSubmit={ev => {
-          ev.preventDefault();
-          setRefresh(refreshInput.value);
-        }}
-      >
-        <EuiFlexGroup gutterSize="s" alignItems="flexEnd">
+    return (
+      <div>
+        <EuiFlexGroup alignItems="center" justifyContent="spaceAround" gutterSize="xs">
           <EuiFlexItem>
-            <EuiFormRow label="Custom Interval">
-              <EuiFieldText inputRef={i => (refreshInput = i)} />
-            </EuiFormRow>
+            <EuiDescriptionList textStyle="reverse">
+              <EuiDescriptionListTitle>Refresh this page</EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                {refreshInterval > 0 ? (
+                  <Fragment>
+                    <span>Every {timeDurationString(refreshInterval)}</span>
+                    <div>
+                      <EuiLink size="s" onClick={disableInterval}>
+                        Disable auto-refresh
+                      </EuiLink>
+                    </div>
+                  </Fragment>
+                ) : (
+                  <span>Manually</span>
+                )}
+              </EuiDescriptionListDescription>
+            </EuiDescriptionList>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton className="canvas__refresh_control--auto-refresh--submit" type="submit">
-              Set
+            <EuiButton size="s" fill iconType="refresh" onClick={doRefresh}>
+              Refresh
             </EuiButton>
           </EuiFlexItem>
         </EuiFlexGroup>
-      </form>
-    </div>
-  );
-};
 
-AutoRefreshControls.propTypes = {
-  refreshInterval: PropTypes.number,
-  setRefresh: PropTypes.func.isRequired,
-  disableInterval: PropTypes.func.isRequired,
-};
+        <EuiHorizontalRule margin="m" />
+
+        <EuiFormLabel>Change auto-refresh interval</EuiFormLabel>
+        <EuiSpacer size="s" />
+        <EuiText size="s">
+          <EuiFlexGrid gutterSize="s" columns={2}>
+            <EuiFlexItem>
+              <EuiLink onClick={() => setRefresh(5000)}>5 Seconds</EuiLink>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiLink onClick={() => setRefresh(15000)}>15 Seconds</EuiLink>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiLink onClick={() => setRefresh(30000)}>30 Seconds</EuiLink>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiLink onClick={() => setRefresh(60000)}>1 Minute</EuiLink>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiLink onClick={() => setRefresh(300000)}>5 Minutes</EuiLink>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiLink onClick={() => setRefresh(900000)}>15 Minutes</EuiLink>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiLink onClick={() => setRefresh(1800000)}>30 Minutes</EuiLink>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiLink onClick={() => setRefresh(3600000)}>1 Hour</EuiLink>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiLink onClick={() => setRefresh(7200000)}>2 Hours</EuiLink>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiLink onClick={() => setRefresh(21600000)}>6 Hours</EuiLink>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiLink onClick={() => setRefresh(43200000)}>12 Hours</EuiLink>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiLink onClick={() => setRefresh(86400000)}>24 Hours</EuiLink>
+            </EuiFlexItem>
+          </EuiFlexGrid>
+        </EuiText>
+
+        <EuiSpacer size="m" />
+
+        <form
+          onSubmit={ev => {
+            ev.preventDefault();
+            setRefresh(this.refreshInput.value);
+          }}
+        >
+          <EuiFlexGroup gutterSize="s">
+            <EuiFlexItem>
+              <EuiFormRow
+                label="Set a custom interval"
+                helpText="Use shorthand notation, like 30s, 10m, or 1h"
+                compressed
+              >
+                <EuiFieldText inputRef={i => (this.refreshInput = i)} />
+              </EuiFormRow>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiFormRow label="&nbsp;">
+                <EuiButton size="s" type="submit" style={{ minWidth: 'auto' }}>
+                  Set
+                </EuiButton>
+              </EuiFormRow>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </form>
+      </div>
+    );
+  }
+}
diff --git a/public/components/refresh_control/refresh_control.js b/public/components/refresh_control/refresh_control.js
index d5433a84b187d..becb58e0a6283 100644
--- a/public/components/refresh_control/refresh_control.js
+++ b/public/components/refresh_control/refresh_control.js
@@ -1,19 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiIcon, EuiButtonIcon } from '@elastic/eui';
+import { EuiButtonEmpty } from '@elastic/eui';
 import { Popover } from '../popover';
 import { AutoRefreshControls } from './auto_refresh_controls';
 
-const refreshClass = active => {
-  const baseClass = 'canvas__refresh_control--refresh';
-  return active ? `${baseClass} canvas__in_flight` : baseClass;
-};
-
-const autoClass = active => {
-  const baseClass = 'canvas__refresh_control--auto-refresh';
-  return Boolean(active) ? `${baseClass} canvas__auto_refresh` : baseClass;
-};
-
 const getRefreshInterval = (val = '') => {
   // if it's a number, just use it directly
   if (!isNaN(Number(val))) {
@@ -38,50 +28,41 @@ const getRefreshInterval = (val = '') => {
   }
 };
 
-export const RefreshControl = ({ inFlight, doRefresh, setRefreshInterval, refreshInterval }) => {
+export const RefreshControl = ({ inFlight, setRefreshInterval, refreshInterval, doRefresh }) => {
   const setRefresh = val => setRefreshInterval(getRefreshInterval(val));
 
   const popoverButton = handleClick => (
-    <EuiButtonIcon
-      iconType="arrowDown"
-      size="m"
-      className={autoClass(refreshInterval)}
-      aria-label="Auto Refresh Popover"
-      onClick={handleClick}
-    />
+    <EuiButtonEmpty isLoading={inFlight} size="s" onClick={handleClick}>
+      Refresh
+    </EuiButtonEmpty>
   );
 
   const autoRefreshControls = (
     <Popover
       id="auto-refresh-popover"
       button={popoverButton}
-      title="Workpad Auto Refresh"
-      panelClassName="canvas__refresh_control--popover"
+      panelClassName="canvasRefreshControl__popover"
     >
       {({ closePopover }) => (
-        <AutoRefreshControls
-          refreshInterval={refreshInterval}
-          setRefresh={setRefresh}
-          disableInterval={() => {
-            setRefresh(0);
-            closePopover();
-          }}
-        />
+        <div>
+          <AutoRefreshControls
+            refreshInterval={refreshInterval}
+            setRefresh={val => {
+              setRefresh(val);
+              closePopover();
+            }}
+            doRefresh={doRefresh}
+            disableInterval={() => {
+              setRefresh(0);
+              closePopover();
+            }}
+          />
+        </div>
       )}
     </Popover>
   );
 
-  return (
-    <span className={`canvas__refresh_control`}>
-      <EuiIcon
-        type="refresh"
-        size="xl"
-        className={`${refreshClass(inFlight)}`}
-        onClick={doRefresh}
-      />
-      {autoRefreshControls}
-    </span>
-  );
+  return autoRefreshControls;
 };
 
 RefreshControl.propTypes = {
diff --git a/public/components/refresh_control/refresh_control.scss b/public/components/refresh_control/refresh_control.scss
index b127f4b3aef0d..0a193851ba1bc 100644
--- a/public/components/refresh_control/refresh_control.scss
+++ b/public/components/refresh_control/refresh_control.scss
@@ -1,62 +1,8 @@
-.canvas__refresh_control {
+.canvasRefreshControl {
   display: flex;
   align-items: center;
-
-  .canvas__auto_refresh {
-    color: #93c83d;
-  }
-
-  .canvas__in_flight {
-    -webkit-animation: refreshInFlight 3s 0s linear infinite;
-    animation: refreshInFlight 3s linear 0s infinite;
-  }
-}
-
-.canvas__refresh_control--popover {
-  width: 250px;
-  .canvas__refresh_control--auto-refresh--submit {
-    min-width: ($euiSizeXXL + $euiSizeS);
-  }
-}
-
-@-webkit-keyframes refreshInFlight {
-  0% {
-    color: #0779a1;
-  }
-  20% {
-    color: #93c83d;
-  }
-  40% {
-    color: #24bbb1;
-  }
-  60% {
-    color: #17a8e0;
-  }
-  80% {
-    color: #ef5098;
-  }
-  100% {
-    color: #0779a1;
-  }
 }
 
-@keyframes refreshInFlight {
-  0% {
-    color: #0779a1;
-  }
-  20% {
-    color: #93c83d;
-  }
-  40% {
-    color: #24bbb1;
-  }
-  60% {
-    color: #17a8e0;
-  }
-  80% {
-    color: #ef5098;
-  }
-  100% {
-    color: #0779a1;
-  }
+.canvasRefreshControl__popover {
+  width: 300px;
 }
diff --git a/public/components/remove_icon/remove_icon.js b/public/components/remove_icon/remove_icon.js
index 178a0ae1d5bce..35a5a0bf96196 100644
--- a/public/components/remove_icon/remove_icon.js
+++ b/public/components/remove_icon/remove_icon.js
@@ -1,12 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { EuiIcon } from '@elastic/eui';
 
-export const RemoveIcon = ({ onClick, style, className }) => (
-  <div className={className} style={{ height: 20, width: 20, ...style }} onClick={onClick}>
-    <div className="canvas__remove-icon--background" />
-    <div className="canvas__remove-icon--foreground">
-      <i className={`fa fa-times-circle canvas__remove-icon `} />
-    </div>
+export const RemoveIcon = ({ onClick, className }) => (
+  <div className={`canvasRemove ${className}`} onClick={onClick}>
+    <EuiIcon type="cross" className="canvasRemove__icon" />
   </div>
 );
 
diff --git a/public/components/remove_icon/remove_icon.scss b/public/components/remove_icon/remove_icon.scss
index 2937e6f50fb06..a27400b2e0522 100644
--- a/public/components/remove_icon/remove_icon.scss
+++ b/public/components/remove_icon/remove_icon.scss
@@ -1,23 +1,29 @@
-.canvas__remove-icon--background,
-.canvas__remove-icon--foreground {
+.canvasRemove {
+  $clearSize: $euiSize;
   position: absolute;
-}
+  pointer-events: all;
+  @include size($clearSize);
+  background-color: $euiColorSlightHue;
+  border-radius: $clearSize;
+  line-height: $clearSize;
+  top: -$euiSizeL;
+  right: -$euiSizeL;
 
-.canvas__remove-icon--background {
-  height: 14px;
-  width: 14px;
-  background-color: $euiColorEmptyShade;
-  top: 2px;
-  left: 2px;
-  border-radius: 20px;
-}
+  .canvasRemove__icon {
+    @include size($euiSizeS);
+    fill: $euiColorEmptyShade;
+    stroke: $euiColorEmptyShade;
+    stroke-width: 3px; // increase thickness of icon at such a small size
+    // better vertical position fix that works with IE
+    position: relative;
+    top: -1px;
+    left: $euiSizeXS;
 
-.canvas__remove-icon {
-  color: $euiColorDanger;
-  font-size: 20px;
-  cursor: pointer;
+  }
 
   &:hover {
-    color: darken($euiColorDanger, 10%);
+    background-color: $euiColorDanger;
+    cursor: pointer;
   }
+
 }
diff --git a/public/components/render_with_fn/render_with_fn.js b/public/components/render_with_fn/render_with_fn.js
index 3c49b929654b1..6799e62d97a2b 100644
--- a/public/components/render_with_fn/render_with_fn.js
+++ b/public/components/render_with_fn/render_with_fn.js
@@ -120,7 +120,7 @@ export class RenderWithFn extends React.Component {
     // NOTE: the data-shared-* attributes here are used for reporting
     return (
       <div
-        className="canvas__workpad--element_render canvas__element"
+        className="canvasWorkpad--element_render canvasRenderEl"
         style={{ height: '100%', width: '100%' }}
       >
         <RenderToDom
diff --git a/public/components/render_with_fn/render_with_fn.scss b/public/components/render_with_fn/render_with_fn.scss
index 4fd65937ceee2..4725382a137c0 100644
--- a/public/components/render_with_fn/render_with_fn.scss
+++ b/public/components/render_with_fn/render_with_fn.scss
@@ -1,3 +1,3 @@
-.canvas__element {
+.canvasRenderEl {
   overflow: hidden;
 }
diff --git a/public/components/rotation_handle/rotation_handle.js b/public/components/rotation_handle/rotation_handle.js
index 564a71afd6617..aeadce237fda2 100644
--- a/public/components/rotation_handle/rotation_handle.js
+++ b/public/components/rotation_handle/rotation_handle.js
@@ -4,10 +4,10 @@ import aero from '../../lib/aeroelastic';
 
 export const RotationHandle = ({ transformMatrix }) => (
   <div
-    className="canvas__rotation-handle-connector"
+    className="canvasRotationHandle canvasRotationHandle--connector"
     style={{ transform: aero.dom.matrixToCSS(transformMatrix) }}
   >
-    <div className="canvas__rotation-handle" />
+    <div className="canvasRotationHandle--handle" />
   </div>
 );
 
diff --git a/public/components/rotation_handle/rotation_handle.scss b/public/components/rotation_handle/rotation_handle.scss
index 074cf30e6eac1..0f71565666f90 100644
--- a/public/components/rotation_handle/rotation_handle.scss
+++ b/public/components/rotation_handle/rotation_handle.scss
@@ -1,4 +1,4 @@
-.canvas__rotation-handle-connector {
+.canvasRotationHandle--connector {
   transform-origin: center center; /* the default, only for clarity */
   transform-style: preserve-3d;
   display: block;
@@ -10,7 +10,7 @@
   border: 1px solid #d9d9d9;
 }
 
-.canvas__rotation-handle {
+.canvasRotationHandle--handle {
   transform-origin: center center; /* the default, only for clarity */
   transform-style: preserve-3d;
   display: block;
diff --git a/public/components/router/router.js b/public/components/router/router.js
index 4e9e2675eebc1..fca313c026bc9 100644
--- a/public/components/router/router.js
+++ b/public/components/router/router.js
@@ -1,8 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { EuiPanel, EuiLoadingChart, EuiSpacer, EuiText } from '@elastic/eui';
 import { routerProvider } from '../../lib/router_provider';
 
-const getLoadingComponent = msg => <div>{msg || 'Loading...'}</div>;
+const getLoadingComponent = msg => (
+  <div className="canvasLoading">
+    <EuiPanel>
+      <EuiLoadingChart size="m" />
+      <EuiSpacer size="s" />
+      <EuiText>
+        {/*
+            For some reason a styled color is required,
+            likely something with the chrome css from Kibana
+          */}
+        <p style={{ color: '#000' }}>{msg || 'Loading...'}</p>
+      </EuiText>
+    </EuiPanel>
+  </div>
+);
 
 export class Router extends React.PureComponent {
   static childContextTypes = {
diff --git a/public/components/sidebar/global_config.js b/public/components/sidebar/global_config.js
index 4094e0fd17469..0f0dd48d2efe5 100644
--- a/public/components/sidebar/global_config.js
+++ b/public/components/sidebar/global_config.js
@@ -2,14 +2,13 @@ import React from 'react';
 import { PageConfig } from '../page_config';
 import { WorkpadConfig } from '../workpad_config';
 import { SidebarSection } from './sidebar_section';
-import { SidebarSectionTitle } from './sidebar_section_title';
 
 export const GlobalConfig = () => (
-  <div className="canvas__sidebar">
-    <SidebarSectionTitle title="Workpad Settings" />
+  <div className="canvasSidebar">
     <SidebarSection>
       <WorkpadConfig />
-      <hr />
+    </SidebarSection>
+    <SidebarSection>
       <PageConfig />
     </SidebarSection>
   </div>
diff --git a/public/components/sidebar/index.js b/public/components/sidebar/index.js
index cc1d9e6f20998..a3b65fd4f302c 100644
--- a/public/components/sidebar/index.js
+++ b/public/components/sidebar/index.js
@@ -1,9 +1,38 @@
 import { connect } from 'react-redux';
-import { getSelectedElement } from '../../state/selectors/workpad';
+import { duplicateElement, elementLayer } from '../../state/actions/elements';
+import { getSelectedPage, getSelectedElement } from '../../state/selectors/workpad';
+
 import { Sidebar as Component } from './sidebar';
 
 const mapStateToProps = state => ({
-  element: getSelectedElement(state),
+  selectedPage: getSelectedPage(state),
+  selectedElement: getSelectedElement(state),
+});
+
+const mapDispatchToProps = dispatch => ({
+  duplicateElement: (pageId, selectedElement) => () =>
+    dispatch(duplicateElement(selectedElement, pageId)),
+  elementLayer: (pageId, selectedElement) => movement =>
+    dispatch(
+      elementLayer({
+        pageId,
+        elementId: selectedElement.id,
+        movement,
+      })
+    ),
 });
 
-export const Sidebar = connect(mapStateToProps)(Component);
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { selectedElement, selectedPage } = stateProps;
+
+  return {
+    ...stateProps,
+    ...dispatchProps,
+    ...ownProps,
+    elementIsSelected: Boolean(selectedElement),
+    duplicateElement: dispatchProps.duplicateElement(selectedPage, selectedElement),
+    elementLayer: dispatchProps.elementLayer(selectedPage, selectedElement),
+  };
+};
+
+export const Sidebar = connect(mapStateToProps, mapDispatchToProps, mergeProps)(Component);
diff --git a/public/components/sidebar/sidebar.js b/public/components/sidebar/sidebar.js
index 38f9e7b07b175..1482337bedc2e 100644
--- a/public/components/sidebar/sidebar.js
+++ b/public/components/sidebar/sidebar.js
@@ -2,6 +2,6 @@ import { compose, branch, renderComponent } from 'recompose';
 import { SidebarComponent } from './sidebar_component';
 import { GlobalConfig } from './global_config';
 
-const branches = [branch(props => !props.element, renderComponent(GlobalConfig))];
+const branches = [branch(props => !props.selectedElement, renderComponent(GlobalConfig))];
 
 export const Sidebar = compose(...branches)(SidebarComponent);
diff --git a/public/components/sidebar/sidebar.scss b/public/components/sidebar/sidebar.scss
index 8da0d9a29bca9..bc31e945cc887 100644
--- a/public/components/sidebar/sidebar.scss
+++ b/public/components/sidebar/sidebar.scss
@@ -1,22 +1,36 @@
-.canvas__sidebar {
-  padding: $euiSizeS;
+.canvasSidebar {
+  @include euiScrollBar;
+
+  width: 100%;
+  padding: $euiSizeM;
+  max-height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
-.canvas__sidebar-section-title {
-  font-size: $euiFontSize;
-  font-weight: 200;
-  display: flex;
-  align-items: center;
+.canvasSidebar__pop {
+  animation: sidebarPop $euiAnimSpeedFast $euiAnimSlightResistance;
 }
 
-.canvas__sidebar-section-tip {
-  font-size: $euiFontSizeS;
-  margin-left: $euiSizeS;
+
+.canvasSidebarFlyout {
+  width: 350px;
+  min-width: 350px;
 }
 
-.canvas__sidebar-section-body {
+.canvasSidebar__elementButtons {
+  background: darken($euiColorLightestShade, 5%);
   margin-bottom: $euiSizeS;
-  padding: $euiSizeS;
-  background-color: $euiColorEmptyShade;
-  border: $euiBorderThin;
+}
+
+@keyframes sidebarPop {
+  0% {
+    opacity: 0;
+  }
+  1% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
diff --git a/public/components/sidebar/sidebar_component.js b/public/components/sidebar/sidebar_component.js
index 2d7b0866a75ec..96fcd86282e41 100644
--- a/public/components/sidebar/sidebar_component.js
+++ b/public/components/sidebar/sidebar_component.js
@@ -1,15 +1,127 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {
+  EuiTitle,
+  EuiSpacer,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTabbedContent,
+} from '@elastic/eui';
+import { Datasource } from '../datasource';
 import { FunctionFormList } from '../function_form_list';
+import { Tooltip } from '../tooltip';
 
-export const SidebarComponent = ({ element }) => (
-  <div className="canvas__sidebar">
-    <div className="canvas__sidebar--args">
-      <FunctionFormList element={element} />
+export const SidebarComponent = ({
+  selectedElement,
+  duplicateElement,
+  elementLayer,
+  elementIsSelected,
+}) => {
+  const tabs = [
+    {
+      id: 'edit',
+      name: 'Display',
+      content: (
+        <div className="canvasSidebar__pop">
+          <EuiSpacer size="s" />
+          <div className="canvasSidebar--args">
+            <FunctionFormList element={selectedElement} />
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: 'data',
+      name: 'Data',
+      content: (
+        <div className="canvasSidebar__pop">
+          <EuiSpacer size="s" />
+          <Datasource />
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div className="canvasSidebar">
+      {elementIsSelected && (
+        <div>
+          <EuiFlexGroup gutterSize="none" alignItems="center" justifyContent="spaceBetween">
+            <EuiFlexItem grow={false}>
+              <EuiTitle size="s">
+                <h3>Selected layer</h3>
+              </EuiTitle>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup alignItems="center" gutterSize="none">
+                <EuiFlexItem grow={false}>
+                  <EuiFlexGroup alignItems="center" gutterSize="none">
+                    <EuiFlexItem grow={false}>
+                      <Tooltip position="bottom" content="Move element to top layer">
+                        <EuiButtonIcon
+                          color="text"
+                          iconType="sortUp"
+                          onClick={() => elementLayer(Infinity)}
+                          aria-label="Move element to top layer"
+                        />
+                      </Tooltip>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <Tooltip position="bottom" content="Move element up one layer">
+                        <EuiButtonIcon
+                          color="text"
+                          iconType="arrowUp"
+                          onClick={() => elementLayer(1)}
+                          aria-label="Move element up one layer"
+                        />
+                      </Tooltip>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <Tooltip position="bottom" content="Move element down one layer">
+                        <EuiButtonIcon
+                          color="text"
+                          iconType="arrowDown"
+                          onClick={() => elementLayer(-1)}
+                          aria-label="Move element down one layer"
+                        />
+                      </Tooltip>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <Tooltip position="bottom" content="Move element to bottom layer">
+                        <EuiButtonIcon
+                          color="text"
+                          iconType="sortDown"
+                          onClick={() => elementLayer(-Infinity)}
+                          aria-label="Move element to bottom layer"
+                        />
+                      </Tooltip>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <Tooltip position="bottom" content="Duplicate this element into a new layer">
+                        <EuiButtonIcon
+                          color="text"
+                          iconType="copy"
+                          onClick={() => duplicateElement()}
+                          aria-label="Duplicate this element into a new layer"
+                        />
+                      </Tooltip>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} />
+        </div>
+      )}
     </div>
-  </div>
-);
+  );
+};
 
 SidebarComponent.propTypes = {
-  element: PropTypes.object,
+  selectedElement: PropTypes.object,
+  duplicateElement: PropTypes.func.isRequired,
+  elementLayer: PropTypes.func,
+  elementIsSelected: PropTypes.bool.isRequired,
 };
diff --git a/public/components/sidebar/sidebar_section.js b/public/components/sidebar/sidebar_section.js
index 0d965a772b343..1f2b3305ea093 100644
--- a/public/components/sidebar/sidebar_section.js
+++ b/public/components/sidebar/sidebar_section.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { EuiPanel } from '@elastic/eui';
+
 export const SidebarSection = ({ children }) => (
-  <div className="canvas__sidebar-section">
-    <div className="canvas__sidebar-section-body">{children}</div>
-  </div>
+  <EuiPanel className="canvasSidebar__panel">{children}</EuiPanel>
 );
 
 SidebarSection.propTypes = {
diff --git a/public/components/sidebar/sidebar_section_title.js b/public/components/sidebar/sidebar_section_title.js
index 2d556d588a858..b85386ba99993 100644
--- a/public/components/sidebar/sidebar_section_title.js
+++ b/public/components/sidebar/sidebar_section_title.js
@@ -1,25 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { EuiTitle, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
 import { Tooltip } from '../tooltip';
 
 export const SidebarSectionTitle = ({ title, tip, children }) => {
+  const formattedTitle = (
+    <EuiTitle size="xs">
+      <h4>{title}</h4>
+    </EuiTitle>
+  );
   const renderTitle = () => {
     if (tip) {
       return (
-        <Tooltip placement="left" text={tip}>
-          <span>{title}</span>
+        <Tooltip placement="left" content={tip}>
+          {formattedTitle}
         </Tooltip>
       );
     }
 
-    return <span>{title}</span>;
+    return formattedTitle;
   };
 
   return (
-    <div className="canvas__sidebar-section-title">
-      {renderTitle(tip)}
-      {children}
-    </div>
+    <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
+      <EuiFlexItem grow={false}>{renderTitle(tip)}</EuiFlexItem>
+      <EuiFlexItem grow={false}>{children}</EuiFlexItem>
+    </EuiFlexGroup>
   );
 };
 
diff --git a/public/components/text_style_picker/font_sizes.js b/public/components/text_style_picker/font_sizes.js
index 13347aff000d3..80a468c0b2b88 100644
--- a/public/components/text_style_picker/font_sizes.js
+++ b/public/components/text_style_picker/font_sizes.js
@@ -1 +1 @@
-export const fontSizes = [0, 6, 7, 8, 9, 10, 11, 12, 14, 18, 24, 30, 36, 48, 60, 72, 96];
+export const fontSizes = [0, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96];
diff --git a/public/components/text_style_picker/text_style_picker.js b/public/components/text_style_picker/text_style_picker.js
index b7d81bd5ab909..b53a00ec520f4 100644
--- a/public/components/text_style_picker/text_style_picker.js
+++ b/public/components/text_style_picker/text_style_picker.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, ButtonGroup } from 'react-bootstrap';
-import { EuiFlexGroup, EuiFlexItem, EuiSelect, EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSelect, EuiSpacer, EuiButtonGroup } from '@elastic/eui';
 import { FontPicker } from '../font_picker';
 import { ColorPickerMini } from '../color_picker_mini';
 import { fontSizes } from './font_sizes';
@@ -17,7 +16,49 @@ export const TextStylePicker = ({
   onChange,
   colors,
 }) => {
-  function doChange(propName, value) {
+  const alignmentButtons = [
+    {
+      id: 'left',
+      label: 'Align left',
+      iconType: 'editorAlignLeft',
+    },
+    {
+      id: 'center',
+      label: 'Align center',
+      iconType: 'editorAlignCenter',
+    },
+    {
+      id: 'right',
+      label: 'Align right',
+      iconType: 'editorAlignRight',
+    },
+  ];
+
+  const styleButtons = [
+    {
+      id: 'bold',
+      label: 'Bold',
+      iconType: 'editorBold',
+    },
+    {
+      id: 'italic',
+      label: 'Italic',
+      iconType: 'editorItalic',
+    },
+    {
+      id: 'underline',
+      label: 'Underline',
+      iconType: 'editorUnderline',
+    },
+  ];
+
+  const stylesSelectedMap = {
+    ['bold']: weight === 'bold',
+    ['italic']: Boolean(italic),
+    ['underline']: Boolean(underline),
+  };
+
+  const doChange = (propName, value) => {
     onChange({
       family,
       size,
@@ -28,13 +69,31 @@ export const TextStylePicker = ({
       italic: italic || false,
       [propName]: value,
     });
-  }
+  };
+
+  const onAlignmentChange = optionId => doChange('align', optionId);
+
+  const onStyleChange = optionId => {
+    let prop;
+    let value;
+
+    if (optionId === 'bold') {
+      prop = 'weight';
+      value = !stylesSelectedMap[optionId] ? 'bold' : 'normal';
+    } else {
+      prop = optionId;
+      value = !stylesSelectedMap[optionId];
+    }
+
+    doChange(prop, value);
+  };
 
   return (
-    <div className="canvas__text-style-picker">
-      <EuiFlexGroup gutterSize="s">
+    <div className="canvasTextStylePicker">
+      <EuiFlexGroup gutterSize="m">
         <EuiFlexItem grow={false}>
           <EuiSelect
+            compressed
             defaultValue={size}
             onChange={e => doChange('size', Number(e.target.value))}
             options={fontSizes.map(size => ({ text: String(size), value: size }))}
@@ -47,7 +106,24 @@ export const TextStylePicker = ({
 
       <EuiSpacer size="m" />
 
-      <EuiFlexGroup gutterSize="none" justifyContent="spaceAround" alignItems="flexEnd">
+      <EuiFlexGroup gutterSize="m" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiButtonGroup
+            options={styleButtons}
+            idToSelectedMap={stylesSelectedMap}
+            onChange={onStyleChange}
+            type="multi"
+            isIconOnly
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonGroup
+            options={alignmentButtons}
+            isIconOnly
+            idSelected={align}
+            onChange={onAlignmentChange}
+          />
+        </EuiFlexItem>
         <EuiFlexItem grow={false} style={{ fontSize: 0 }}>
           <ColorPickerMini
             value={color}
@@ -55,36 +131,6 @@ export const TextStylePicker = ({
             colors={colors}
           />
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          {/* The bootstrap button groups will be removed when EUI has button groups. See https://github.com/elastic/eui/issues/841 */}
-          <ButtonGroup bsSize="medium">
-            <Button
-              active={weight === 'bold'}
-              onClick={() => doChange('weight', weight !== 'bold' ? 'bold' : 'normal')}
-            >
-              <span style={{ fontWeight: 'bold' }}>B</span>
-            </Button>
-            <Button active={italic} onClick={() => doChange('italic', !italic)}>
-              <span style={{ fontStyle: 'italic' }}>I</span>
-            </Button>
-            <Button active={underline} onClick={() => doChange('underline', !underline)}>
-              <span style={{ textDecoration: 'underline' }}>U</span>
-            </Button>
-          </ButtonGroup>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <ButtonGroup bsSize="medium">
-            <Button active={align === 'left'} onClick={() => doChange('align', 'left')}>
-              <i className="fa fa-align-left" />
-            </Button>
-            <Button active={align === 'center'} onClick={() => doChange('align', 'center')}>
-              <i className="fa fa-align-center" />
-            </Button>
-            <Button active={align === 'right'} onClick={() => doChange('align', 'right')}>
-              <i className="fa fa-align-right" />
-            </Button>
-          </ButtonGroup>
-        </EuiFlexItem>
       </EuiFlexGroup>
     </div>
   );
@@ -101,3 +147,7 @@ TextStylePicker.propTypes = {
   onChange: PropTypes.func.isRequired,
   colors: PropTypes.array,
 };
+
+TextStylePicker.defaultProps = {
+  align: 'left',
+};
diff --git a/public/components/text_style_picker/text_style_picker.scss b/public/components/text_style_picker/text_style_picker.scss
deleted file mode 100644
index 7d757740020c8..0000000000000
--- a/public/components/text_style_picker/text_style_picker.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.canvas__font-picker--preview {
-  width: 100%;
-
-  .canvas__faux-select {
-    width: 100%;
-  }
-}
diff --git a/public/components/toolbar/index.js b/public/components/toolbar/index.js
index d19b364218176..ae07c62b9547d 100644
--- a/public/components/toolbar/index.js
+++ b/public/components/toolbar/index.js
@@ -2,56 +2,27 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { compose, withState, getContext, withHandlers } from 'recompose';
 import { getEditing } from '../../state/selectors/app';
-import { addElement, duplicateElement, elementLayer } from '../../state/actions/elements';
-import { getAssets } from '../../state/selectors/assets';
+
 import {
   getWorkpad,
-  getSelectedPage,
-  getSelectedElement,
+  getWorkpadName,
   getSelectedPageIndex,
+  getSelectedElement,
 } from '../../state/selectors/workpad';
 
 import { Toolbar as Component } from './toolbar';
 
 const mapStateToProps = state => ({
   editing: getEditing(state),
+  workpadName: getWorkpadName(state),
   workpadId: getWorkpad(state).id,
   totalPages: getWorkpad(state).pages.length,
-  selectedPage: getSelectedPage(state),
   selectedPageNumber: getSelectedPageIndex(state) + 1,
   selectedElement: getSelectedElement(state),
-  hasAssets: Object.keys(getAssets(state)).length ? true : false,
 });
 
-const mapDispatchToProps = dispatch => ({
-  addElement: pageId => partialElement => dispatch(addElement(pageId, partialElement)),
-  duplicateElement: (pageId, element) => () => dispatch(duplicateElement(element, pageId)),
-  elementLayer: (pageId, element) => movement =>
-    dispatch(
-      elementLayer({
-        pageId,
-        elementId: element.id,
-        movement,
-      })
-    ),
-});
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { selectedElement, selectedPage } = stateProps;
-
-  return {
-    ...stateProps,
-    ...dispatchProps,
-    ...ownProps,
-    elementIsSelected: Boolean(selectedElement),
-    addElement: dispatchProps.addElement(selectedPage),
-    duplicateElement: dispatchProps.duplicateElement(selectedPage, selectedElement),
-    elementLayer: dispatchProps.elementLayer(selectedPage, selectedElement),
-  };
-};
-
 export const Toolbar = compose(
-  connect(mapStateToProps, mapDispatchToProps, mergeProps),
+  connect(mapStateToProps),
   getContext({
     router: PropTypes.object,
   }),
diff --git a/public/components/toolbar/toolbar.js b/public/components/toolbar/toolbar.js
index 9731c16b7a6ca..4dd4940e32d57 100644
--- a/public/components/toolbar/toolbar.js
+++ b/public/components/toolbar/toolbar.js
@@ -1,133 +1,130 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiOverlayMask,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiButton,
+} from '@elastic/eui';
 import { Navbar } from '../navbar';
-import { NavbarButton } from '../navbar_button';
-import { FeedbackButton } from '../feedback_button';
-import { NavbarDivider } from '../navbar_divider';
-import { Expression } from '../expression';
-import { Datasource } from '../datasource';
 import { WorkpadLoader } from '../workpad_loader';
 import { PageManager } from '../page_manager';
-import { AssetManager } from '../asset_manager';
-import { ElementTypes } from './element_types';
+import { Expression } from '../expression';
 import { Tray } from './tray';
 
 export const Toolbar = props => {
   const {
     editing,
-    hasAssets,
+    selectedElement,
     tray,
     setTray,
-    addElement,
-    duplicateElement,
-    elementLayer,
     previousPage,
     nextPage,
-    elementIsSelected,
     selectedPageNumber,
+    workpadName,
     totalPages,
   } = props;
+
+  const elementIsSelected = Boolean(selectedElement);
+
   const done = () => setTray(null);
+
   const showHideTray = exp => {
     if (tray && tray === exp) return done();
     setTray(exp);
   };
 
-  const createElement = element => {
-    addElement(element);
-
-    // close the tray
-    done();
-  };
+  const workpadLoader = (
+    <EuiOverlayMask>
+      <EuiModal onClose={done} style={{ width: '1080px' }}>
+        <EuiModalBody>
+          <WorkpadLoader onClose={done} />
+        </EuiModalBody>
+        <EuiModalFooter>
+          <EuiButton size="s" onClick={done}>
+            Dismiss
+          </EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    </EuiOverlayMask>
+  );
 
   const trays = {
     pageManager: <PageManager />,
-    assetManager: <AssetManager />,
-    elements: <ElementTypes done={done} onClick={createElement} />,
+    workpadloader: workpadLoader,
     expression: !elementIsSelected ? null : <Expression done={done} />,
-    datasource: !elementIsSelected ? null : <Datasource done={done} />,
-    workpadloader: <WorkpadLoader onClose={done} />,
   };
 
   return !editing ? null : (
-    <div className="canvas__toolbar">
-      {trays[tray] && <Tray>{trays[tray]}</Tray>}
-
+    <div>
+      {trays[tray] && <Tray done={done}>{trays[tray]}</Tray>}
       <Navbar>
-        <NavbarButton onClick={previousPage} disabled={selectedPageNumber <= 1}>
-          <i className="fa fa-chevron-left" />
-        </NavbarButton>
-        {selectedPageNumber}
-        <NavbarButton onClick={nextPage} disabled={selectedPageNumber >= totalPages}>
-          <i className="fa fa-chevron-right" />
-        </NavbarButton>
-
-        <NavbarDivider />
-
-        <NavbarButton onClick={() => showHideTray('workpadloader')}>
-          <i className="fa fa-briefcase" /> Workpads
-        </NavbarButton>
-        <NavbarButton onClick={() => showHideTray('pageManager')}>
-          <i className="fa fa-file" /> Pages
-        </NavbarButton>
-        <NavbarButton onClick={() => showHideTray('elements')}>
-          <i className="fa fa-plus" /> Elements
-        </NavbarButton>
-
-        {hasAssets && (
-          <NavbarButton onClick={() => showHideTray('assetManager')}>
-            <i className="fa fa-image" /> Assets
-          </NavbarButton>
-        )}
-
-        {elementIsSelected && (
-          <span>
-            <NavbarDivider />
-
-            <NavbarButton onClick={() => showHideTray('datasource')}>
-              <i className="fa fa-database" /> Datasource
-            </NavbarButton>
-            <NavbarButton onClick={() => showHideTray('expression')}>
-              <i className="fa fa-terminal" /> Code
-            </NavbarButton>
-
-            <NavbarDivider />
-
-            <NavbarButton onClick={() => elementLayer(Infinity)}>
-              <i className="fa fa-arrow-circle-up" />
-            </NavbarButton>
-            <NavbarButton onClick={() => elementLayer(1)}>
-              <i className="fa fa-arrow-up" />
-            </NavbarButton>
-            <NavbarButton onClick={() => elementLayer(-1)}>
-              <i className="fa fa-arrow-down" />
-            </NavbarButton>
-            <NavbarButton onClick={() => elementLayer(-Infinity)}>
-              <i className="fa fa-arrow-circle-down" />
-            </NavbarButton>
-
-            <NavbarButton onClick={() => duplicateElement()}>
-              <i className="fa fa-clone" /> Clone
-            </NavbarButton>
-          </span>
-        )}
-        <FeedbackButton />
+        <EuiFlexGroup alignItems="center" gutterSize="none" className="canvasNavBar__controls">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              color="text"
+              iconType="grid"
+              onClick={() => showHideTray('workpadloader')}
+            >
+              {workpadName}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false} />
+          <EuiFlexItem grow={false}>
+            <EuiButtonIcon
+              color="text"
+              onClick={previousPage}
+              iconType="arrowLeft"
+              disabled={selectedPageNumber <= 1}
+              aria-label="Previous Page"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty color="text" onClick={() => showHideTray('pageManager')}>
+              Page {selectedPageNumber}
+              {totalPages > 1 ? ` of ${totalPages}` : null}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonIcon
+              color="text"
+              onClick={nextPage}
+              iconType="arrowRight"
+              disabled={selectedPageNumber >= totalPages}
+              aria-label="Next Page"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem />
+          {elementIsSelected && (
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                color="text"
+                iconType="editorCodeBlock"
+                onClick={() => showHideTray('expression')}
+              >
+                Expression editor
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
       </Navbar>
     </div>
   );
 };
 
 Toolbar.propTypes = {
+  workpadName: PropTypes.string,
   editing: PropTypes.bool,
-  hasAssets: PropTypes.bool,
   tray: PropTypes.node,
   setTray: PropTypes.func.isRequired,
-  addElement: PropTypes.func.isRequired,
-  duplicateElement: PropTypes.func.isRequired,
-  elementLayer: PropTypes.func,
   nextPage: PropTypes.func.isRequired,
   previousPage: PropTypes.func.isRequired,
   selectedPageNumber: PropTypes.number.isRequired,
   totalPages: PropTypes.number.isRequired,
-  elementIsSelected: PropTypes.bool.isRequired,
+  selectedElement: PropTypes.object,
 };
diff --git a/public/components/toolbar/toolbar.scss b/public/components/toolbar/toolbar.scss
deleted file mode 100644
index cd7800e7da24a..0000000000000
--- a/public/components/toolbar/toolbar.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.canvas__toolbar {
-  width: 100%;
-  background-color: $euiColorDarkestShade;
-  color: $euiColorGhost;
-  border-top: $euiBorderThin;
-  border-color: lighten($euiColorDarkestShade, 10%);
-}
diff --git a/public/components/toolbar/tray/tray.js b/public/components/toolbar/tray/tray.js
index cf2a88da19bbb..bd85a66a4040d 100644
--- a/public/components/toolbar/tray/tray.js
+++ b/public/components/toolbar/tray/tray.js
@@ -1,10 +1,22 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon } from '@elastic/eui';
 
-export const Tray = ({ children }) => {
-  return <div className="canvas__tray">{children}</div>;
+export const Tray = ({ children, done }) => {
+  return (
+    <Fragment>
+      <EuiFlexGroup justifyContent="spaceAround">
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon size="s" onClick={done} aria-label="Dismiss tray" iconType="arrowDown" />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      <div className="canvasTray">{children}</div>
+    </Fragment>
+  );
 };
 
 Tray.propTypes = {
   children: PropTypes.node,
+  done: PropTypes.func,
 };
diff --git a/public/components/toolbar/tray/tray.scss b/public/components/toolbar/tray/tray.scss
index f0a01b4d51291..9d8b6d13dde94 100644
--- a/public/components/toolbar/tray/tray.scss
+++ b/public/components/toolbar/tray/tray.scss
@@ -1,11 +1,5 @@
-.canvas__tray {
+.canvasTray {
   max-height: 400px;
-  overflow: auto;
-  padding: $euiSize $euiSize $euiSizeXS $euiSize;
-  display: flex;
   flex-direction: column;
-
-  textarea {
-    min-height: 300px;
-  }
+  @include euiBottomShadowFlat;
 }
diff --git a/public/components/tooltip/tooltip.js b/public/components/tooltip/tooltip.js
index f72549a02c50b..d525674e52af5 100644
--- a/public/components/tooltip/tooltip.js
+++ b/public/components/tooltip/tooltip.js
@@ -2,14 +2,29 @@ import React from 'react';
 import { EuiToolTip } from '@elastic/eui';
 import { PropTypes } from 'prop-types';
 
-export const TooltipComponent = ({ children, text, placement = 'top' }) => (
-  <EuiToolTip position={placement} content={text}>
+export const TooltipComponent = ({
+  children,
+  content,
+  placement,
+  className,
+  anchorClassName,
+  ...rest
+}) => (
+  <EuiToolTip
+    position={placement}
+    content={content}
+    anchorClassName={anchorClassName}
+    className={className}
+    {...rest}
+  >
     {children}
   </EuiToolTip>
 );
 
 TooltipComponent.propTypes = {
   children: PropTypes.node.isRequired,
-  text: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
   placement: PropTypes.string,
+  className: PropTypes.string,
+  anchorClassName: PropTypes.string,
 };
diff --git a/public/components/workpad/workpad.js b/public/components/workpad/workpad.js
index c9ff22e1d901e..3ff6a43ddcdf5 100644
--- a/public/components/workpad/workpad.js
+++ b/public/components/workpad/workpad.js
@@ -21,6 +21,10 @@ export const Workpad = props => {
   } = props;
 
   const { height, width } = workpad;
+  const bufferStyle = {
+    height: isFullscreen ? height : height + 32,
+    width: isFullscreen ? width : width + 32,
+  };
 
   const keyHandler = action => {
     // handle keypress events for editor and presentation events
@@ -38,57 +42,60 @@ export const Workpad = props => {
   };
 
   return (
-    <div className="canvas__checkered" style={{ height, width }}>
-      {!isFullscreen && (
-        <Shortcuts name="EDITOR" handler={keyHandler} targetNodeSelector="body" global />
-      )}
+    <div className="canvasWorkpad__buffer" style={bufferStyle}>
+      <div className="canvasCheckered" style={{ height, width }}>
+        {!isFullscreen && (
+          <Shortcuts name="EDITOR" handler={keyHandler} targetNodeSelector="body" global />
+        )}
 
-      <Fullscreen>
-        {({ isFullscreen, windowSize }) => {
-          const scale = Math.min(windowSize.height / height, windowSize.width / width);
-          const transform = `scale3d(${scale}, ${scale}, 1)`;
-          const fsStyle = !isFullscreen
-            ? {}
-            : {
-                transform,
-                WebkitTransform: transform,
-                msTransform: transform,
-                height,
-                width,
-              };
+        <Fullscreen>
+          {({ isFullscreen, windowSize }) => {
+            const scale = Math.min(windowSize.height / height, windowSize.width / width);
+            const fsStyle = isFullscreen
+              ? {
+                  transform: `scale3d(${scale}, ${scale}, 1)`,
+                  WebkitTransform: `scale3d(${scale}, ${scale}, 1)`,
+                  msTransform: `scale3d(${scale}, ${scale}, 1)`,
+                  // height,
+                  // width,
+                  height: windowSize.height < height ? 'auto' : height,
+                  width: windowSize.width < width ? 'auto' : width,
+                }
+              : {};
 
-          // NOTE: the data-shared-* attributes here are used for reporting
-          return (
-            <div
-              className={`canvas__workpad ${isFullscreen ? 'fullscreen' : ''}`}
-              style={fsStyle}
-              data-shared-items-count={totalElementCount}
-            >
-              {isFullscreen && (
-                <Shortcuts
-                  name="PRESENTATION"
-                  handler={keyHandler}
-                  targetNodeSelector="body"
-                  global
-                />
-              )}
-              {pages.map(page => (
-                <WorkpadPage
-                  key={page.id}
-                  page={page}
-                  isSelected={selectedPageId === page.id}
-                  height={height}
-                  width={width}
-                />
-              ))}
+            // NOTE: the data-shared-* attributes here are used for reporting
+            return (
               <div
-                className="canvas__grid"
-                style={{ height, width, display: grid ? 'block' : 'none' }}
-              />
-            </div>
-          );
-        }}
-      </Fullscreen>
+                className={`canvasWorkpad ${isFullscreen ? 'fullscreen' : ''}`}
+                style={fsStyle}
+                data-shared-items-count={totalElementCount}
+              >
+                {isFullscreen && (
+                  <Shortcuts
+                    name="PRESENTATION"
+                    handler={keyHandler}
+                    targetNodeSelector="body"
+                    global
+                  />
+                )}
+                {pages.map(page => (
+                  <WorkpadPage
+                    key={page.id}
+                    page={page}
+                    isSelected={selectedPageId === page.id}
+                    height={height}
+                    width={width}
+                  />
+                ))}
+                <div
+                  className="canvasGrid"
+                  style={{ height, width, display: grid ? 'block' : 'none' }}
+                />
+              </div>
+            );
+          }}
+        </Fullscreen>
+      </div>
     </div>
   );
 };
diff --git a/public/components/workpad/workpad.scss b/public/components/workpad/workpad.scss
index e0f693acd5151..6bd1ae58d2846 100644
--- a/public/components/workpad/workpad.scss
+++ b/public/components/workpad/workpad.scss
@@ -1,12 +1,18 @@
-.canvas__workpad {
+.canvasWorkpad {
   position: relative;
 }
 
-.canvas__grid {
+.canvasWorkpad__buffer {
+  padding: $euiSize;
+  margin: auto;
+}
+
+.canvasGrid {
   position: absolute;
   user-select: none;
   pointer-events: none;
   background-image: linear-gradient(to right, grey 1px, transparent 1px),
     linear-gradient(to bottom, grey 1px, transparent 1px);
   background-size: 50px 50px;
+  top: 0;
 }
diff --git a/public/components/workpad_config/workpad_config.js b/public/components/workpad_config/workpad_config.js
index 388a01ce9f7f1..2984d5c708d0c 100644
--- a/public/components/workpad_config/workpad_config.js
+++ b/public/components/workpad_config/workpad_config.js
@@ -9,7 +9,9 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
+  EuiTitle,
 } from '@elastic/eui';
+import { Tooltip } from '../tooltip';
 
 export const WorkpadConfig = ({ size, name, setSize, setName }) => {
   const rotate = () => setSize({ width: size.height, height: size.width });
@@ -35,17 +37,19 @@ export const WorkpadConfig = ({ size, name, setSize, setName }) => {
 
   return (
     <div>
-      <div>
-        <EuiFormRow label="Workpad Name">
-          <EuiFieldText value={name} onChange={e => setName(e.target.value)} />
-        </EuiFormRow>
-      </div>
+      <EuiTitle size="xs">
+        <h4>Workpad</h4>
+      </EuiTitle>
 
       <EuiSpacer size="m" />
 
+      <EuiFormRow label="Name" compressed>
+        <EuiFieldText value={name} onChange={e => setName(e.target.value)} />
+      </EuiFormRow>
+
       <EuiFlexGroup gutterSize="s" alignItems="center">
         <EuiFlexItem>
-          <EuiFormRow label="Width">
+          <EuiFormRow label="Width" compressed>
             <EuiFieldNumber
               onChange={e => setSize({ width: Number(e.target.value), height: size.height })}
               value={size.width}
@@ -54,17 +58,19 @@ export const WorkpadConfig = ({ size, name, setSize, setName }) => {
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiFormRow hasEmptyLabelSpace>
-            <EuiButtonIcon
-              size="l"
-              className="clickable"
-              iconType="kqlOperand"
-              onClick={rotate}
-              aria-label="Swap Page Dimensions"
-            />
+            <Tooltip position="bottom" content="Flip the width and height">
+              <EuiButtonIcon
+                iconType="merge"
+                color="text"
+                onClick={rotate}
+                aria-label="Swap Page Dimensions"
+                style={{ marginBottom: 12 }}
+              />
+            </Tooltip>
           </EuiFormRow>
         </EuiFlexItem>
         <EuiFlexItem>
-          <EuiFormRow label="Height">
+          <EuiFormRow label="Height" compressed>
             <EuiFieldNumber
               onChange={e => setSize({ height: Number(e.target.value), width: size.width })}
               value={size.height}
@@ -79,9 +85,10 @@ export const WorkpadConfig = ({ size, name, setSize, setName }) => {
         {badges.map((badge, i) => (
           <EuiBadge
             key={`page-size-badge-${i}`}
-            color="default"
+            color="hollow"
             onClick={() => setSize(badge.size)}
             aria-label={`Preset Page Size: ${badge.name}`}
+            onClickAriaLabel={`Set page size to ${badge.name}`}
           >
             {badge.name}
           </EuiBadge>
diff --git a/public/components/workpad_header/index.js b/public/components/workpad_header/index.js
index 8485fb082a689..7fee6d7b0314e 100644
--- a/public/components/workpad_header/index.js
+++ b/public/components/workpad_header/index.js
@@ -1,22 +1,28 @@
 import { connect } from 'react-redux';
 import { getEditing } from '../../state/selectors/app';
-import { getWorkpadName } from '../../state/selectors/workpad';
+import { getWorkpadName, getSelectedPage } from '../../state/selectors/workpad';
 import { setEditing } from '../../state/actions/transient';
+import { getAssets } from '../../state/selectors/assets';
+import { addElement } from '../../state/actions/elements';
 import { WorkpadHeader as Component } from './workpad_header';
 
 const mapStateToProps = state => ({
   editing: getEditing(state),
   workpadName: getWorkpadName(state),
+  selectedPage: getSelectedPage(state),
+  hasAssets: Object.keys(getAssets(state)).length ? true : false,
 });
 
-const mapDispatchToProps = {
-  setEditing,
-};
+const mapDispatchToProps = dispatch => ({
+  setEditing: editing => dispatch(setEditing(editing)),
+  addElement: pageId => partialElement => dispatch(addElement(pageId, partialElement)),
+});
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => ({
   ...stateProps,
   ...dispatchProps,
   ...ownProps,
+  addElement: dispatchProps.addElement(stateProps.selectedPage),
   toggleEditing: () => dispatchProps.setEditing(!stateProps.editing),
 });
 
diff --git a/public/components/workpad_header/workpad_header.js b/public/components/workpad_header/workpad_header.js
index 82b3034a05106..aff0ce7556bf8 100644
--- a/public/components/workpad_header/workpad_header.js
+++ b/public/components/workpad_header/workpad_header.js
@@ -1,46 +1,100 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Shortcuts } from 'react-shortcuts';
-import { EuiIcon, EuiSwitch, EuiTitle, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
+import { EuiFlexItem, EuiFlexGroup, EuiButtonIcon, EuiButton } from '@elastic/eui';
+import { Tooltip } from '../tooltip';
+import { AssetManager } from '../asset_manager';
+import { ElementTypes } from '../element_types';
 import { FullscreenControl } from '../fullscreen_control';
 import { RefreshControl } from '../refresh_control';
+import { Popover } from '../popover';
 
-export const WorkpadHeader = ({ workpadName, editing, toggleEditing }) => {
+export const WorkpadHeader = ({ editing, toggleEditing, hasAssets, addElement }) => {
   const keyHandler = action => {
     if (action === 'EDITING') toggleEditing();
   };
 
+  const elementsButton = handleClick => (
+    <EuiButton fill size="s" iconType="vector" onClick={handleClick}>
+      Add element
+    </EuiButton>
+  );
+
   return (
-    <div className="canvas__workpad_header">
-      <EuiFlexGroup gutterSize="s" alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiTitle size="l">
-            <h2 className="canvas__workpad_header--title">{workpadName}</h2>
-          </EuiTitle>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <RefreshControl />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <FullscreenControl className={`clickable`}>
-            {({ toggleFullscreen }) => (
-              <EuiIcon type="fullScreen" size="l" onClick={toggleFullscreen} />
-            )}
-          </FullscreenControl>
-        </EuiFlexItem>
+    <div>
+      <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
-          <span>
-            <Shortcuts name="EDITOR" handler={keyHandler} targetNodeSelector="body" global />
-            <EuiSwitch checked={editing} onChange={toggleEditing} />
-          </span>
+          <EuiFlexGroup alignItems="center" gutterSize="xs">
+            <EuiFlexItem grow={false}>
+              <RefreshControl />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <FullscreenControl>
+                {({ toggleFullscreen }) => (
+                  <Tooltip position="bottom" content="Toggle fullscreen mode">
+                    <EuiButtonIcon
+                      iconType="fullScreen"
+                      aria-label="View fullscreen"
+                      onClick={toggleFullscreen}
+                    />
+                  </Tooltip>
+                )}
+              </FullscreenControl>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <Shortcuts name="EDITOR" handler={keyHandler} targetNodeSelector="body" global />
+              <Tooltip
+                position="bottom"
+                content={editing ? 'Hide editing controls' : 'Show editing controls'}
+              >
+                <EuiButtonIcon
+                  iconType={editing ? 'eye' : 'eyeClosed'}
+                  onClick={() => {
+                    toggleEditing();
+                  }}
+                  size="s"
+                  aria-label={editing ? 'Hide editing controls' : 'Show editing controls'}
+                />
+              </Tooltip>
+            </EuiFlexItem>
+          </EuiFlexGroup>
         </EuiFlexItem>
+        {editing ? (
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup alignItems="center" gutterSize="s">
+              {hasAssets && (
+                <EuiFlexItem grow={false}>
+                  <AssetManager />
+                </EuiFlexItem>
+              )}
+              <EuiFlexItem grow={false}>
+                <Popover
+                  button={elementsButton}
+                  withTitle
+                  anchorPosition="downRight"
+                  panelClassName="canvasPopover--elements"
+                >
+                  {({ closePopover }) => (
+                    <ElementTypes
+                      onClick={element => {
+                        addElement(element);
+                        closePopover();
+                      }}
+                    />
+                  )}
+                </Popover>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        ) : null}
       </EuiFlexGroup>
     </div>
   );
 };
 
 WorkpadHeader.propTypes = {
-  workpadName: PropTypes.string,
   editing: PropTypes.bool,
   toggleEditing: PropTypes.func,
+  hasAssets: PropTypes.bool,
+  addElement: PropTypes.func.isRequired,
 };
diff --git a/public/components/workpad_header/workpad_header.scss b/public/components/workpad_header/workpad_header.scss
deleted file mode 100644
index 4fe5b7b4c460e..0000000000000
--- a/public/components/workpad_header/workpad_header.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.canvas__workpad_header {
-  h2 {
-    margin: ($euiSizeXS / 2) 0;
-  }
-}
diff --git a/public/components/workpad_loader/workpad_create.js b/public/components/workpad_loader/workpad_create.js
index 85a1e0489f28c..d607d82d2ef14 100644
--- a/public/components/workpad_loader/workpad_create.js
+++ b/public/components/workpad_loader/workpad_create.js
@@ -3,13 +3,8 @@ import PropTypes from 'prop-types';
 import { EuiButton } from '@elastic/eui';
 
 export const WorkpadCreate = ({ createPending, onCreate }) => (
-  <EuiButton
-    fill
-    onClick={onCreate}
-    isLoading={createPending}
-    iconType={!createPending ? 'plusInCircle' : null}
-  >
-    Create Workpad
+  <EuiButton size="s" fill onClick={onCreate} isLoading={createPending}>
+    Create workpad
   </EuiButton>
 );
 
diff --git a/public/components/workpad_loader/workpad_loader.js b/public/components/workpad_loader/workpad_loader.js
index 48e3fbb524958..b940c72d358da 100644
--- a/public/components/workpad_loader/workpad_loader.js
+++ b/public/components/workpad_loader/workpad_loader.js
@@ -2,7 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { sortByOrder } from 'lodash';
-import { EuiFlexGroup, EuiFlexItem, EuiBasicTable, EuiButtonIcon, EuiSpacer } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiBasicTable,
+  EuiButtonIcon,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
 import { ConfirmModal } from '../confirm_modal';
 import { Link } from '../link';
 import { Tooltip } from '../tooltip';
@@ -91,7 +98,7 @@ export class WorkpadLoader extends React.PureComponent {
         render: workpad => (
           <EuiFlexGroup gutterSize="xs" alignItems="center">
             <EuiFlexItem grow={false}>
-              <Tooltip text="Download">
+              <Tooltip content="Download">
                 <EuiButtonIcon
                   iconType="exportAction"
                   onClick={() => this.downloadWorkpad(workpad)}
@@ -100,7 +107,7 @@ export class WorkpadLoader extends React.PureComponent {
               </Tooltip>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <Tooltip text="Clone">
+              <Tooltip content="Clone">
                 <EuiButtonIcon
                   iconType="copy"
                   onClick={() => this.cloneWorkpad(workpad)}
@@ -109,7 +116,7 @@ export class WorkpadLoader extends React.PureComponent {
               </Tooltip>
             </EuiFlexItem>
             <EuiFlexItem>
-              <Tooltip text="Delete">
+              <Tooltip content="Delete">
                 <EuiButtonIcon
                   iconType="trash"
                   color="danger"
@@ -177,6 +184,7 @@ export class WorkpadLoader extends React.PureComponent {
 
     return (
       <EuiBasicTable
+        compressed
         items={sortedWorkpads}
         columns={columns}
         sorting={sorting}
@@ -191,23 +199,31 @@ export class WorkpadLoader extends React.PureComponent {
     const isLoading = this.props.workpads == null;
 
     return (
-      <div className="canvas__workpad_loader">
-        <WorkpadUpload onUpload={this.uploadWorkpad}>
-          <EuiFlexGroup gutterSize="s" className="canvas__workpad_loader--controls">
-            <EuiFlexItem grow={false}>
-              <WorkpadCreate createPending={createPending} onCreate={this.createWorkpad} />
-            </EuiFlexItem>
-            <EuiFlexItem className="canvas__workpad_loader--search">
-              <WorkpadSearch onChange={this.props.findWorkpads} />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-
-          <EuiSpacer size="l" />
-
-          {createPending && <div>Creating Workpad...</div>}
-          {!createPending && isLoading && <div>Fetching Workpads...</div>}
-          {!createPending && !isLoading && this.renderWorkpadTable()}
-        </WorkpadUpload>
+      <WorkpadUpload onUpload={this.uploadWorkpad}>
+        <EuiFlexGroup gutterSize="s" alignItems="center" className="canvasWorkPadLoader">
+          <EuiFlexItem>
+            <EuiTitle size="s">
+              <h4>Workpads</h4>
+            </EuiTitle>
+            <EuiText>
+              <p>
+                <i>
+                  Drag and drop a JSON file oto this area to load a previously built workpad as a
+                  new file
+                </i>
+              </p>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <WorkpadSearch onChange={this.props.findWorkpads} />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <WorkpadCreate createPending={createPending} onCreate={this.createWorkpad} />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        {createPending && <div>Creating Workpad...</div>}
+        {!createPending && isLoading && <div>Fetching Workpads...</div>}
+        {!createPending && !isLoading && this.renderWorkpadTable()}
 
         <ConfirmModal
           isOpen={deletingWorkpad.id != null}
@@ -217,7 +233,7 @@ export class WorkpadLoader extends React.PureComponent {
           onConfirm={() => this.removeWorkpad(deletingWorkpad.id)}
           onCancel={this.closeRemoveConfirm}
         />
-      </div>
+      </WorkpadUpload>
     );
   }
 }
diff --git a/public/components/workpad_loader/workpad_loader.scss b/public/components/workpad_loader/workpad_loader.scss
index 68a7e0ada39d4..9a6569653521e 100644
--- a/public/components/workpad_loader/workpad_loader.scss
+++ b/public/components/workpad_loader/workpad_loader.scss
@@ -1,7 +1,4 @@
-.canvas__workpad_loader {
+.canvasWorkPadLoader {
+  padding: $euiSize;
   height: fit-content;
-
-  .canvas__workpad_loader--search {
-    color: $euiColorDarkestShade;
-  }
 }
diff --git a/public/components/workpad_loader/workpad_search.js b/public/components/workpad_loader/workpad_search.js
index 7363fc726ff09..da88fa760e470 100644
--- a/public/components/workpad_loader/workpad_search.js
+++ b/public/components/workpad_loader/workpad_search.js
@@ -24,6 +24,7 @@ export class WorkpadSearch extends React.PureComponent {
   render() {
     return (
       <EuiFieldSearch
+        compressed
         placeholder="Find workpad"
         value={this.state.searchText}
         onChange={this.setSearchText}
diff --git a/public/components/workpad_loader/workpad_upload.js b/public/components/workpad_loader/workpad_upload.js
index f99d87d6eef24..6232b1f5d1f8c 100644
--- a/public/components/workpad_loader/workpad_upload.js
+++ b/public/components/workpad_loader/workpad_upload.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Dropzone from 'react-dropzone';
-import { EuiCode } from '@elastic/eui';
 import { getId } from '../../lib/get_id';
 
 export class WorkpadUpload extends React.PureComponent {
@@ -43,14 +42,6 @@ export class WorkpadUpload extends React.PureComponent {
         disableClick
         style={{ border: this.state.dropping ? '2px dashed' : '2px solid transparent' }}
       >
-        <center>
-          <p>
-            <i>
-              Tip: Drag and drop a <EuiCode>JSON</EuiCode> exported workpad into this dialog to load
-              new workpad from a file
-            </i>
-          </p>
-        </center>
         {this.props.children}
       </Dropzone>
     );
diff --git a/public/components/workpad_page/event_handlers.js b/public/components/workpad_page/event_handlers.js
index 8671a8a9859ea..d11dfa079bffb 100644
--- a/public/components/workpad_page/event_handlers.js
+++ b/public/components/workpad_page/event_handlers.js
@@ -7,7 +7,7 @@ const ancestorElement = (element, className) => {
 };
 
 const localMousePosition = (target, clientX, clientY) => {
-  const ancestor = ancestorElement(target, 'canvas__page') || target;
+  const ancestor = ancestorElement(target, 'canvasPage') || target;
   const box = ancestor.getBoundingClientRect(); // causes reflow, fixme check performance impact
   return {
     x: clientX - box.left,
diff --git a/public/components/workpad_page/index.js b/public/components/workpad_page/index.js
index d898ddae1544f..5e5f7cda2a42e 100644
--- a/public/components/workpad_page/index.js
+++ b/public/components/workpad_page/index.js
@@ -25,12 +25,12 @@ const mapDispatchToProps = dispatch => {
   };
 };
 
-const mergeProps = (stateProps, { removeElement }, props) => {
+const mergeProps = (stateProps, { removeElement }, ownProps) => {
   const { isEditing, isFullscreen } = stateProps;
-  const { page } = props;
+  const { page } = ownProps;
 
   return {
-    ...props,
+    ...ownProps,
     isEditable: !isFullscreen && isEditing,
     key: page.id,
     removeElement,
@@ -60,6 +60,7 @@ export const WorkpadPage = compose(
           : shape
     );
     const selectedElements = selectedShapes.map(id => getRootElementId(shapeLookup, id));
+
     return {
       elements,
       selectedShapes,
diff --git a/public/components/workpad_page/workpad_page.js b/public/components/workpad_page/workpad_page.js
index 8f34b6b8aa68c..9ad919b3cc1b9 100644
--- a/public/components/workpad_page/workpad_page.js
+++ b/public/components/workpad_page/workpad_page.js
@@ -6,6 +6,7 @@ import { RotationHandle } from '../rotation_handle';
 import { BorderConnection } from '../border_connection';
 import { BorderResizeHandle } from '../border_resize_handle';
 
+// NOTE: the data-shared-* attributes here are used for reporting
 export const WorkpadPage = ({
   page,
   elements,
@@ -21,13 +22,13 @@ export const WorkpadPage = ({
   onMouseUp,
   selectedShapes,
 }) => {
-  const activeClass = isSelected ? 'canvas__page--active' : 'canvas__page--inactive';
+  const activeClass = isSelected ? 'canvasPage--isActive' : 'canvasPage--isInactive';
 
   return (
     <div
       key={page.id}
       id={page.id}
-      className={`canvas__page ${activeClass}`}
+      className={`canvasPage ${activeClass}`}
       data-shared-items-container
       style={{
         ...page.style,
@@ -45,53 +46,30 @@ export const WorkpadPage = ({
       {elements
         .map(element => {
           const selected = selectedShapes.indexOf(element.id) !== -1;
+
           if (element.type === 'annotation') {
-            if (!isEditable) {
-              return;
-            }
+            if (!isEditable) return;
+
+            const props = {
+              key: element.id,
+              type: element.type,
+              transformMatrix: element.transformMatrix,
+              a: element.a,
+              b: element.b,
+            };
+
             switch (element.subtype) {
               case 'alignmentGuide':
-                return (
-                  <AlignmentGuide
-                    key={element.id}
-                    type={element.type}
-                    transformMatrix={element.transformMatrix}
-                    a={element.a}
-                    b={element.b}
-                  />
-                );
+                return <AlignmentGuide {...props} />;
               case 'rotationHandle':
-                return (
-                  <RotationHandle
-                    key={element.id}
-                    type={element.type}
-                    transformMatrix={element.transformMatrix}
-                    a={element.a}
-                    b={element.b}
-                  />
-                );
+                return <RotationHandle {...props} />;
               case 'resizeHandle':
-                return (
-                  <BorderResizeHandle
-                    key={element.id}
-                    type={element.type}
-                    transformMatrix={element.transformMatrix}
-                    a={element.a}
-                    b={element.b}
-                  />
-                );
+                return <BorderResizeHandle {...props} />;
               case 'resizeConnector':
-                return (
-                  <BorderConnection
-                    key={element.id}
-                    type={element.type}
-                    transformMatrix={element.transformMatrix}
-                    a={element.a}
-                    b={element.b}
-                  />
-                );
+                return <BorderConnection {...props} />;
             }
           }
+
           return <ElementWrapper key={element.id} element={{ ...element, selected }} />;
         })
         .filter(element => !!element)}
@@ -106,8 +84,12 @@ WorkpadPage.propTypes = {
   elements: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string.isRequired,
+      transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
+      a: PropTypes.number.isRequired,
+      b: PropTypes.number.isRequired,
+      type: PropTypes.string,
     })
-  ),
+  ).isRequired,
   isSelected: PropTypes.bool.isRequired,
   height: PropTypes.number.isRequired,
   width: PropTypes.number.isRequired,
diff --git a/public/components/workpad_page/workpad_page.scss b/public/components/workpad_page/workpad_page.scss
index 00b29c3ee4600..3467d9e010a6d 100644
--- a/public/components/workpad_page/workpad_page.scss
+++ b/public/components/workpad_page/workpad_page.scss
@@ -1,11 +1,15 @@
-.canvas__page, .canvas__page:focus {
+.canvasPage, .canvasPage:focus {
   z-index: initial;
-  position: absolute;
   box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.2);
+  position: absolute;
+  top: 0;
   transform-style: preserve-3d !important;
   user-select: none;
 }
 
-.canvas__page--inactive {
-  visibility: hidden;
+.canvasLayout__stage {
+  .canvasPage--isInactive {
+    visibility: hidden;
+    opacity: 0;
+  }
 }
diff --git a/public/elements/area_chart/area_chart.js b/public/elements/area_chart/area_chart.js
index 6908eee7da216..d4b405ccba650 100644
--- a/public/elements/area_chart/area_chart.js
+++ b/public/elements/area_chart/area_chart.js
@@ -1,10 +1,7 @@
-import header from './header.png';
-
 export const areaChart = () => ({
   name: 'areaChart',
   displayName: 'Area Chart',
   help: 'A customizable area chart',
-  image: header,
   expression: `filters
 | demodata
 | pointseries x="time" y="mean(price)"
diff --git a/public/elements/area_chart/header.png b/public/elements/area_chart/header.png
deleted file mode 100644
index 93456066429d9..0000000000000
Binary files a/public/elements/area_chart/header.png and /dev/null differ
diff --git a/public/elements/bubble_chart/bubble_chart.js b/public/elements/bubble_chart/bubble_chart.js
index 1e9381f17e0a9..d112473b6b761 100644
--- a/public/elements/bubble_chart/bubble_chart.js
+++ b/public/elements/bubble_chart/bubble_chart.js
@@ -1,12 +1,9 @@
-import header from './header.png';
-
 export const bubbleChart = () => ({
   name: 'bubbleChart',
   displayName: 'Bubble Chart',
   help: 'A customizable bubble chart',
   width: 700,
   height: 300,
-  image: header,
   expression: `filters
 | demodata
 | pointseries x="project" y="sum(price)" color="state" size="size(username)"
diff --git a/public/elements/bubble_chart/header.png b/public/elements/bubble_chart/header.png
deleted file mode 100644
index db541fe7c53b8..0000000000000
Binary files a/public/elements/bubble_chart/header.png and /dev/null differ
diff --git a/public/elements/debug/debug.js b/public/elements/debug/debug.js
index d24dcc9320e14..dca7ddfa16588 100644
--- a/public/elements/debug/debug.js
+++ b/public/elements/debug/debug.js
@@ -1,10 +1,8 @@
-import header from './header.png';
-
 export const debug = () => ({
   name: 'debug',
   displayName: 'Debug',
   help: 'Just dumps the configuration of the element',
-  image: header,
+  image: 'alert',
   expression: `demodata
 | render as=debug`,
 });
diff --git a/public/elements/debug/header.png b/public/elements/debug/header.png
deleted file mode 100644
index 37ab329a49bb8..0000000000000
Binary files a/public/elements/debug/header.png and /dev/null differ
diff --git a/public/elements/default_header.png b/public/elements/default_header.png
deleted file mode 100644
index 532ee2b10a96e..0000000000000
Binary files a/public/elements/default_header.png and /dev/null differ
diff --git a/public/elements/donut/donut.js b/public/elements/donut/donut.js
index c9db75dcfd3b7..1aefb8057c763 100644
--- a/public/elements/donut/donut.js
+++ b/public/elements/donut/donut.js
@@ -1,10 +1,7 @@
-import header from './header.png';
-
 export const donut = () => ({
   name: 'donut',
   displayName: 'Donut Chart',
   help: 'A customizable donut chart',
-  image: header,
   expression: `filters
 | demodata
 | pointseries color="project" size="max(price)"
diff --git a/public/elements/donut/header.png b/public/elements/donut/header.png
deleted file mode 100644
index 4bbfb6f8f68fc..0000000000000
Binary files a/public/elements/donut/header.png and /dev/null differ
diff --git a/public/elements/dropdown_filter/header.png b/public/elements/dropdown_filter/header.png
deleted file mode 100644
index 9916558ffb49a..0000000000000
Binary files a/public/elements/dropdown_filter/header.png and /dev/null differ
diff --git a/public/elements/dropdown_filter/index.js b/public/elements/dropdown_filter/index.js
index ca7864d1b7431..991e03b79ca52 100644
--- a/public/elements/dropdown_filter/index.js
+++ b/public/elements/dropdown_filter/index.js
@@ -1,10 +1,8 @@
-import header from './header.png';
-
 export const dropdownFilter = () => ({
   name: 'dropdown_filter',
   displayName: 'Dropdown Filter',
   help: 'A dropdown from which you can select values for an "exactly" filter',
-  image: header,
+  image: 'arrowDown',
   height: 50,
   expression: `demodata
 | dropdownControl valueColumn=project filterColumn=project`,
diff --git a/public/elements/element.js b/public/elements/element.js
index 409cefe1336e5..d66219b29f2da 100644
--- a/public/elements/element.js
+++ b/public/elements/element.js
@@ -1,5 +1,3 @@
-import defaultHeader from './default_header.png';
-
 export function Element(config) {
   // This must match the name of the function that is used to create the `type: render` object
   this.name = config.name;
@@ -8,7 +6,7 @@ export function Element(config) {
   this.displayName = config.displayName || this.name;
 
   // An image to use in the element type selector
-  this.image = config.image || defaultHeader;
+  this.image = config.image || 'starEmpty';
 
   // A sentence or few about what this element does
   this.help = config.help;
diff --git a/public/elements/horiz_bar_chart/header.png b/public/elements/horiz_bar_chart/header.png
deleted file mode 100644
index 9b6ee47d88698..0000000000000
Binary files a/public/elements/horiz_bar_chart/header.png and /dev/null differ
diff --git a/public/elements/horiz_bar_chart/horiz_bar_chart.js b/public/elements/horiz_bar_chart/horiz_bar_chart.js
index f4b082a6272f2..b272c33800826 100644
--- a/public/elements/horiz_bar_chart/horiz_bar_chart.js
+++ b/public/elements/horiz_bar_chart/horiz_bar_chart.js
@@ -1,10 +1,7 @@
-import header from './header.png';
-
 export const horizontalBarChart = () => ({
   name: 'horizontalBarChart',
   displayName: 'Horizontal Bar Chart',
   help: 'A customizable horizontal bar chart',
-  image: header,
   expression: `filters
 | demodata
 | pointseries x="size(cost)" y="project" color="project"
diff --git a/public/elements/image/header.png b/public/elements/image/header.png
deleted file mode 100644
index 7f29fc64c36b9..0000000000000
Binary files a/public/elements/image/header.png and /dev/null differ
diff --git a/public/elements/image/image.js b/public/elements/image/image.js
index e86d4cc9f2526..102b036075ece 100644
--- a/public/elements/image/image.js
+++ b/public/elements/image/image.js
@@ -1,10 +1,8 @@
-import header from './header.png';
-
 export const image = () => ({
   name: 'image',
   displayName: 'Image',
   help: 'A static image.',
-  image: header,
+  image: 'bullseye',
   expression: `image mode="contain"
 | render`,
 });
diff --git a/public/elements/line_chart/header.png b/public/elements/line_chart/header.png
deleted file mode 100644
index eea133ee3680b..0000000000000
Binary files a/public/elements/line_chart/header.png and /dev/null differ
diff --git a/public/elements/line_chart/line_chart.js b/public/elements/line_chart/line_chart.js
index 6e8867b3ddef5..1f22ba2657da5 100644
--- a/public/elements/line_chart/line_chart.js
+++ b/public/elements/line_chart/line_chart.js
@@ -1,10 +1,7 @@
-import header from './header.png';
-
 export const lineChart = () => ({
   name: 'lineChart',
   displayName: 'Line Chart',
   help: 'A customizable line chart',
-  image: header,
   expression: `filters
 | demodata
 | pointseries x="time" y="mean(price)"
diff --git a/public/elements/markdown/header.png b/public/elements/markdown/header.png
deleted file mode 100644
index a8b8550f5baea..0000000000000
Binary files a/public/elements/markdown/header.png and /dev/null differ
diff --git a/public/elements/markdown/markdown.js b/public/elements/markdown/markdown.js
index 06426581ec4c4..99be0e86d370e 100644
--- a/public/elements/markdown/markdown.js
+++ b/public/elements/markdown/markdown.js
@@ -1,10 +1,8 @@
-import header from './header.png';
-
 export const markdown = () => ({
   name: 'markdown',
   displayName: 'Markdown',
   help: 'Markup from Markdown',
-  image: header,
+  image: 'editorAlignLeft',
   expression: `filters
 | demodata
 | markdown "### Welcome to the Markdown Element.
diff --git a/public/elements/pie/header.png b/public/elements/pie/header.png
deleted file mode 100644
index deecd1067427c..0000000000000
Binary files a/public/elements/pie/header.png and /dev/null differ
diff --git a/public/elements/pie/pie.js b/public/elements/pie/pie.js
index ae89b3a100830..dd2c81529ef40 100644
--- a/public/elements/pie/pie.js
+++ b/public/elements/pie/pie.js
@@ -1,12 +1,10 @@
-import header from './header.png';
-
 export const pie = () => ({
   name: 'pie',
   displayName: 'Pie chart',
   width: 300,
   height: 300,
   help: 'A customizable element for making pie charts from your data',
-  image: header,
+  image: 'clock',
   expression: `filters
 | demodata
 | pointseries color="state" size="max(price)"
diff --git a/public/elements/plot/header.png b/public/elements/plot/header.png
deleted file mode 100644
index d48c789ae5a92..0000000000000
Binary files a/public/elements/plot/header.png and /dev/null differ
diff --git a/public/elements/plot/plot.js b/public/elements/plot/plot.js
index dfc6ff6259d39..d17274bcbc7a0 100644
--- a/public/elements/plot/plot.js
+++ b/public/elements/plot/plot.js
@@ -1,10 +1,8 @@
-import header from './header.png';
-
 export const plot = () => ({
   name: 'plot',
   displayName: 'Coordinate plot',
   help: 'A customizable XY plot for making line, bar or dot charts from your data',
-  image: header,
+  image: 'stats',
   expression: `filters
 | demodata
 | pointseries x="time" y="sum(price)" color="state"
diff --git a/public/elements/repeatImage/header.png b/public/elements/repeatImage/header.png
deleted file mode 100644
index 9843c9a6d02c0..0000000000000
Binary files a/public/elements/repeatImage/header.png and /dev/null differ
diff --git a/public/elements/repeatImage/index.js b/public/elements/repeatImage/index.js
index c0b745d267815..964073576b582 100644
--- a/public/elements/repeatImage/index.js
+++ b/public/elements/repeatImage/index.js
@@ -1,10 +1,7 @@
-import header from './header.png';
-
 export const repeatImage = () => ({
   name: 'repeatImage',
   displayName: 'Image Repeat',
   help: 'Repeats an image N times',
-  image: header,
   expression: `demodata
 | math "mean(cost)"
 | repeatImage image=null
diff --git a/public/elements/revealImage/header.png b/public/elements/revealImage/header.png
deleted file mode 100644
index 8dc33b5a7259e..0000000000000
Binary files a/public/elements/revealImage/header.png and /dev/null differ
diff --git a/public/elements/revealImage/index.js b/public/elements/revealImage/index.js
index 73475d58b90a1..394b9aa5d57ed 100644
--- a/public/elements/revealImage/index.js
+++ b/public/elements/revealImage/index.js
@@ -1,10 +1,7 @@
-import header from './header.png';
-
 export const revealImage = () => ({
   name: 'revealImage',
   displayName: 'Image Reveal',
   help: 'Reveals a percentage of an image',
-  image: header,
   expression: `demodata
 | math "sum(min(cost) / max(cost))"
 | revealImage origin=bottom image=null
diff --git a/public/elements/shape/header.png b/public/elements/shape/header.png
deleted file mode 100644
index 3212d47591c07..0000000000000
Binary files a/public/elements/shape/header.png and /dev/null differ
diff --git a/public/elements/shape/shape.js b/public/elements/shape/shape.js
index de5d04c8d8674..f2732bfbcd4e2 100644
--- a/public/elements/shape/shape.js
+++ b/public/elements/shape/shape.js
@@ -1,12 +1,9 @@
-import header from './header.png';
-
 export const shape = () => ({
   name: 'shape',
   displayName: 'Shape',
   help: 'A customizable shape',
   width: 200,
   height: 200,
-  image: header,
   expression:
     'shape "square" fill="#4cbce4" border="rgba(255,255,255,0)" borderWidth=0 maintainAspect=true | render',
 });
diff --git a/public/elements/table/header.png b/public/elements/table/header.png
deleted file mode 100644
index a883faa693c1f..0000000000000
Binary files a/public/elements/table/header.png and /dev/null differ
diff --git a/public/elements/table/table.js b/public/elements/table/table.js
index b17cd41e738de..147193f2ff706 100644
--- a/public/elements/table/table.js
+++ b/public/elements/table/table.js
@@ -1,10 +1,8 @@
-import header from './header.png';
-
 export const table = () => ({
   name: 'table',
   displayName: 'Data Table',
   help: 'A scrollable grid for displaying data in a tabular format',
-  image: header,
+  image: 'editorTable',
   expression: `filters
 | demodata
 | table
diff --git a/public/elements/tilted_pie/header.png b/public/elements/tilted_pie/header.png
deleted file mode 100644
index b3329f991158c..0000000000000
Binary files a/public/elements/tilted_pie/header.png and /dev/null differ
diff --git a/public/elements/tilted_pie/tilted_pie.js b/public/elements/tilted_pie/tilted_pie.js
index a2b7d451d4151..2f8fa1feed26a 100644
--- a/public/elements/tilted_pie/tilted_pie.js
+++ b/public/elements/tilted_pie/tilted_pie.js
@@ -1,12 +1,9 @@
-import header from './header.png';
-
 export const tiltedPie = () => ({
   name: 'tiltedPie',
   displayName: 'Tilted Pie Chart',
   width: 500,
   height: 250,
   help: 'A customizable tilted pie chart',
-  image: header,
   expression: `filters
 | demodata
 | pointseries color="project" size="max(price)"
diff --git a/public/elements/time_filter/header.png b/public/elements/time_filter/header.png
deleted file mode 100644
index 2fbfabd61a41b..0000000000000
Binary files a/public/elements/time_filter/header.png and /dev/null differ
diff --git a/public/elements/time_filter/time_filter.js b/public/elements/time_filter/time_filter.js
index 1d8eb5f06ff4e..1ba1c3febf9a1 100644
--- a/public/elements/time_filter/time_filter.js
+++ b/public/elements/time_filter/time_filter.js
@@ -1,10 +1,8 @@
-import header from './header.png';
-
 export const timeFilter = () => ({
   name: 'time_filter',
   displayName: 'Time Filter',
   help: 'Set a time window',
-  image: header,
+  image: 'clock',
   height: 50,
   expression: `timefilterControl compact=true column=@timestamp
 | render as=time_filter`,
diff --git a/public/elements/vert_bar_chart/header.png b/public/elements/vert_bar_chart/header.png
deleted file mode 100644
index 90505dd0dc77d..0000000000000
Binary files a/public/elements/vert_bar_chart/header.png and /dev/null differ
diff --git a/public/elements/vert_bar_chart/vert_bar_chart.js b/public/elements/vert_bar_chart/vert_bar_chart.js
index c4b561d25de76..f3c091a0870eb 100644
--- a/public/elements/vert_bar_chart/vert_bar_chart.js
+++ b/public/elements/vert_bar_chart/vert_bar_chart.js
@@ -1,10 +1,7 @@
-import header from './header.png';
-
 export const verticalBarChart = () => ({
   name: 'verticalBarChart',
   displayName: 'Vertical Bar Chart',
   help: 'A customizable vertical bar chart',
-  image: header,
   expression: `filters
 | demodata
 | pointseries x="project" y="size(cost)" color="project"
diff --git a/public/expression_types/arg.js b/public/expression_types/arg.js
index 987b29cc870ae..e6d02ec676deb 100644
--- a/public/expression_types/arg.js
+++ b/public/expression_types/arg.js
@@ -24,7 +24,7 @@ export class Arg {
     // properties that can be passed in
     const defaultProps = {
       displayName: props.name,
-      help: argType.help || `Argument: ${props.name}`,
+      help: argType.help,
       multi: false,
       required: false,
       types: [],
diff --git a/public/expression_types/arg_types/axis_config/axis_config.scss b/public/expression_types/arg_types/axis_config/axis_config.scss
deleted file mode 100644
index 0d32b119aec9f..0000000000000
--- a/public/expression_types/arg_types/axis_config/axis_config.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.canvas__argtype--axis_config--disabled {
-  color: $euiColorMediumShade;
-  font-size: $euiFontSizeS;
-}
diff --git a/public/expression_types/arg_types/axis_config/extended_template.js b/public/expression_types/arg_types/axis_config/extended_template.js
index 1c3a88f3ce929..cd26003859bd3 100644
--- a/public/expression_types/arg_types/axis_config/extended_template.js
+++ b/public/expression_types/arg_types/axis_config/extended_template.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 import { set } from 'object-path-immutable';
@@ -45,10 +45,7 @@ export class ExtendedTemplate extends React.PureComponent {
   render() {
     const isDisabled = typeof this.props.argValue === 'boolean' && this.props.argValue === false;
 
-    if (isDisabled)
-      return (
-        <EuiText className="canvas__argtype--axis_config--disabled">The axis is disabled</EuiText>
-      );
+    if (isDisabled) return <EuiText color="subdued">The axis is disabled</EuiText>;
 
     const positions = {
       xaxis: ['bottom', 'top'],
@@ -60,15 +57,15 @@ export class ExtendedTemplate extends React.PureComponent {
     const options = positions[argName].map(val => ({ value: val, text: val }));
 
     return (
-      <div>
-        <EuiFormRow label="Position">
+      <Fragment>
+        <EuiFormRow label="Position" compressed>
           <EuiSelect
             defaultValue={position}
             options={options}
             onChange={this.setArgValue('position')}
           />
         </EuiFormRow>
-      </div>
+      </Fragment>
     );
   }
 }
diff --git a/public/expression_types/arg_types/container_style/appearance_form.js b/public/expression_types/arg_types/container_style/appearance_form.js
index 98f9779e974e3..76ea962996793 100644
--- a/public/expression_types/arg_types/container_style/appearance_form.js
+++ b/public/expression_types/arg_types/container_style/appearance_form.js
@@ -23,12 +23,12 @@ export const AppearanceForm = ({ padding, opacity, onChange }) => {
   return (
     <EuiFlexGroup gutterSize="s">
       <EuiFlexItem>
-        <EuiFormRow label="Padding">
+        <EuiFormRow label="Padding" compressed>
           <EuiFieldNumber value={Number(paddingVal)} onChange={namedChange('padding')} />
         </EuiFormRow>
       </EuiFlexItem>
       <EuiFlexItem>
-        <EuiFormRow label="Opacity">
+        <EuiFormRow label="Opacity" compressed>
           <EuiSelect defaultValue={opacity} options={opacities} onChange={namedChange('opacity')} />
         </EuiFormRow>
       </EuiFlexItem>
diff --git a/public/expression_types/arg_types/container_style/border_form.js b/public/expression_types/arg_types/container_style/border_form.js
index 889251dbcdea6..b4034c602adf1 100644
--- a/public/expression_types/arg_types/container_style/border_form.js
+++ b/public/expression_types/arg_types/container_style/border_form.js
@@ -32,13 +32,13 @@ export const BorderForm = ({ value, radius, onChange, colors }) => {
   return (
     <EuiFlexGroup gutterSize="s">
       <EuiFlexItem grow={2}>
-        <EuiFormRow label="Width">
+        <EuiFormRow label="Width" compressed>
           <EuiFieldNumber value={Number(borderWidthVal)} onChange={namedChange('borderWidth')} />
         </EuiFormRow>
       </EuiFlexItem>
 
       <EuiFlexItem grow={3}>
-        <EuiFormRow label="Style">
+        <EuiFormRow label="Style" compressed>
           <EuiSelect
             defaultValue={borderStyle}
             options={options}
@@ -48,7 +48,7 @@ export const BorderForm = ({ value, radius, onChange, colors }) => {
       </EuiFlexItem>
 
       <EuiFlexItem grow={2}>
-        <EuiFormRow label="Radius">
+        <EuiFormRow label="Radius" compressed>
           <EuiFieldNumber value={Number(radiusVal)} onChange={namedChange('borderRadius')} />
         </EuiFormRow>
       </EuiFlexItem>
diff --git a/public/expression_types/arg_types/container_style/extended_template.js b/public/expression_types/arg_types/container_style/extended_template.js
index e5435056699e6..4c21ba76ddeeb 100644
--- a/public/expression_types/arg_types/container_style/extended_template.js
+++ b/public/expression_types/arg_types/container_style/extended_template.js
@@ -1,12 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiSpacer } from '@elastic/eui';
+import { EuiSpacer, EuiTitle } from '@elastic/eui';
 import { BorderForm } from './border_form';
 import { AppearanceForm } from './appearance_form';
 
 export const ExtendedTemplate = ({ getArgValue, setArgValue, workpad }) => (
   <div>
-    <label>Appearance</label>
+    <EuiTitle size="xxxs" textTransform="uppercase">
+      <h6>Appearance</h6>
+    </EuiTitle>
+    <EuiSpacer size="xs" />
     <EuiSpacer size="xs" />
     <AppearanceForm
       padding={getArgValue('padding')}
@@ -17,7 +20,9 @@ export const ExtendedTemplate = ({ getArgValue, setArgValue, workpad }) => (
 
     <EuiSpacer size="m" />
 
-    <label>Border</label>
+    <EuiTitle size="xxxs" textTransform="uppercase">
+      <h6>Border</h6>
+    </EuiTitle>
     <EuiSpacer size="xs" />
     <BorderForm
       value={getArgValue('border', '')}
diff --git a/public/expression_types/arg_types/datacolumn/datacolumn.js b/public/expression_types/arg_types/datacolumn/datacolumn.js
index ce53214c6c8bc..657ee2e34108e 100644
--- a/public/expression_types/arg_types/datacolumn/datacolumn.js
+++ b/public/expression_types/arg_types/datacolumn/datacolumn.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { compose, withPropsOnChange, withHandlers } from 'recompose';
 import PropTypes from 'prop-types';
 import { EuiSelect, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
@@ -12,86 +12,93 @@ import { getFormObject } from './get_form_object';
 const maybeQuoteValue = val => (val.match(/\s/) ? `'${val}'` : val);
 
 // TODO: Garbage, we could make a much nicer math form that can handle way more.
-const DatacolumnArgInput = ({
-  onValueChange,
-  columns,
-  mathValue,
-  setMathFunction,
-  renderError,
-  argId,
-  typeInstance,
-}) => {
-  const allowedTypes = typeInstance.options.allowedTypes || false;
-  const onlyShowMathFunctions = typeInstance.options.onlyMath || false;
-
-  if (mathValue.error) {
-    renderError();
-    return null;
-  }
-  const inputRefs = {};
-  const valueNotSet = val => !val || val.length === 0;
-  const updateFunctionValue = () => {
-    // if setting size, auto-select the first column if no column is already set
-    if (inputRefs.fn.value === 'size') {
-      const col = inputRefs.column.value || (columns[0] && columns[0].name);
-      if (col) return onValueChange(`${inputRefs.fn.value}(${maybeQuoteValue(col)})`);
-    }
+class DatacolumnArgInput extends Component {
+  static propTypes = {
+    columns: PropTypes.array.isRequired,
+    onValueChange: PropTypes.func.isRequired,
+    mathValue: PropTypes.object.isRequired,
+    setMathFunction: PropTypes.func.isRequired,
+    typeInstance: PropTypes.object.isRequired,
+    renderError: PropTypes.func.isRequired,
+    argId: PropTypes.string.isRequired,
+  };
 
-    // inputRefs.column is the column selection, if there is no value, do nothing
-    if (valueNotSet(inputRefs.column.value)) {
-      return setMathFunction(inputRefs.fn.value);
-    }
+  inputRefs = {};
+
+  render() {
+    const {
+      onValueChange,
+      columns,
+      mathValue,
+      setMathFunction,
+      renderError,
+      argId,
+      typeInstance,
+    } = this.props;
 
-    // inputRefs.fn is the math function to use, if it's not set, just use the value input
-    if (valueNotSet(inputRefs.fn.value)) {
-      return onValueChange(inputRefs.column.value);
+    if (mathValue.error) {
+      renderError();
+      return null;
     }
 
-    // inputRefs.fn has a value, so use it as a math.js expression
-    onValueChange(`${inputRefs.fn.value}(${maybeQuoteValue(inputRefs.column.value)})`);
-  };
+    const allowedTypes = typeInstance.options.allowedTypes || false;
+    const onlyShowMathFunctions = typeInstance.options.onlyMath || false;
+    const valueNotSet = val => !val || val.length === 0;
 
-  const column = columns.map(col => col.name).find(colName => colName === mathValue.column) || '';
-
-  const options = [{ value: '', text: 'select column', disabled: true }];
-
-  sortBy(columns, 'name').forEach(column => {
-    if (allowedTypes && !allowedTypes.includes(column.type)) return;
-    options.push({ value: column.name, text: column.name });
-  });
-
-  return (
-    <EuiFlexGroup gutterSize="s" className="canvas__argtype--datacolumn" id={argId}>
-      <EuiFlexItem grow={false}>
-        <SimpleMathFunction
-          id={argId}
-          value={mathValue.fn}
-          inputRef={ref => (inputRefs.fn = ref)}
-          onlymath={onlyShowMathFunctions}
-          onChange={updateFunctionValue}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiSelect
-          options={options}
-          defaultValue={column}
-          inputRef={ref => (inputRefs.column = ref)}
-          onChange={updateFunctionValue}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-};
+    const updateFunctionValue = () => {
+      // if setting size, auto-select the first column if no column is already set
+      if (this.inputRefs.fn.value === 'size') {
+        const col = this.inputRefs.column.value || (columns[0] && columns[0].name);
+        if (col) return onValueChange(`${this.inputRefs.fn.value}(${maybeQuoteValue(col)})`);
+      }
 
-DatacolumnArgInput.propTypes = {
-  columns: PropTypes.array.isRequired,
-  onValueChange: PropTypes.func.isRequired,
-  mathValue: PropTypes.object.isRequired,
-  setMathFunction: PropTypes.func.isRequired,
-  typeInstance: PropTypes.object.isRequired,
-  renderError: PropTypes.func.isRequired,
-  argId: PropTypes.string.isRequired,
-};
+      // this.inputRefs.column is the column selection, if there is no value, do nothing
+      if (valueNotSet(this.inputRefs.column.value)) {
+        return setMathFunction(this.inputRefs.fn.value);
+      }
+
+      // this.inputRefs.fn is the math function to use, if it's not set, just use the value input
+      if (valueNotSet(this.inputRefs.fn.value)) {
+        return onValueChange(this.inputRefs.column.value);
+      }
+
+      // this.inputRefs.fn has a value, so use it as a math.js expression
+      onValueChange(`${this.inputRefs.fn.value}(${maybeQuoteValue(this.inputRefs.column.value)})`);
+    };
+
+    const column = columns.map(col => col.name).find(colName => colName === mathValue.column) || '';
+
+    const options = [{ value: '', text: 'select column', disabled: true }];
+
+    sortBy(columns, 'name').forEach(column => {
+      if (allowedTypes && !allowedTypes.includes(column.type)) return;
+      options.push({ value: column.name, text: column.name });
+    });
+
+    return (
+      <EuiFlexGroup gutterSize="s" id={argId}>
+        <EuiFlexItem grow={false}>
+          <SimpleMathFunction
+            id={argId}
+            value={mathValue.fn}
+            inputRef={ref => (this.inputRefs.fn = ref)}
+            onlymath={onlyShowMathFunctions}
+            onChange={updateFunctionValue}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiSelect
+            compressed
+            options={options}
+            defaultValue={column}
+            inputRef={ref => (this.inputRefs.column = ref)}
+            onChange={updateFunctionValue}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+}
 
 const EnhancedDatacolumnArgInput = compose(
   withPropsOnChange(['argValue', 'columns'], ({ argValue, columns }) => ({
diff --git a/public/expression_types/arg_types/datacolumn/simple_math_function.js b/public/expression_types/arg_types/datacolumn/simple_math_function.js
index eac288f0a7978..ce92f50ff8a63 100644
--- a/public/expression_types/arg_types/datacolumn/simple_math_function.js
+++ b/public/expression_types/arg_types/datacolumn/simple_math_function.js
@@ -18,6 +18,7 @@ export const SimpleMathFunction = ({ onChange, value, inputRef, onlymath }) => {
 
   return (
     <EuiSelect
+      compressed
       options={options}
       inputRef={inputRef}
       defaultValue={value || ''}
diff --git a/public/expression_types/arg_types/font.js b/public/expression_types/arg_types/font.js
new file mode 100644
index 0000000000000..9e44aee6724db
--- /dev/null
+++ b/public/expression_types/arg_types/font.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { get, mapValues, set } from 'lodash';
+import { templateFromReactComponent } from '../../lib/template_from_react_component';
+import { TextStylePicker } from '../../components/text_style_picker';
+
+export const FontArgInput = props => {
+  const { onValueChange, argValue, workpad } = props;
+  const chain = get(argValue, 'chain.0', {});
+  const chainArgs = get(chain, 'arguments', {});
+
+  // TODO: Validate input
+
+  const spec = mapValues(chainArgs, '[0]');
+
+  function handleChange(newSpec) {
+    const newValue = set(argValue, ['chain', 0, 'arguments'], mapValues(newSpec, v => [v]));
+    return onValueChange(newValue);
+  }
+
+  return (
+    <TextStylePicker
+      family={spec.family}
+      color={spec.color}
+      size={spec.size}
+      align={spec.align}
+      weight={spec.weight}
+      underline={spec.underline || false}
+      italic={spec.italic || false}
+      onChange={handleChange}
+      colors={workpad.colors}
+    />
+  );
+};
+
+FontArgInput.propTypes = {
+  onValueChange: PropTypes.func.isRequired,
+  argValue: PropTypes.any.isRequired,
+  typeInstance: PropTypes.object,
+  workpad: PropTypes.shape({
+    colors: PropTypes.array.isRequired,
+  }).isRequired,
+};
+
+FontArgInput.displayName = 'FontArgInput';
+
+export const font = () => ({
+  name: 'font',
+  displayName: 'Text Settings',
+  help: 'Set the font, size and color',
+  template: templateFromReactComponent(FontArgInput),
+  default:
+    '{font size=12 family="\'Open Sans\', Helvetica, Arial, sans-serif" color="#000000" align=left}',
+});
diff --git a/public/expression_types/arg_types/font/extended_template.js b/public/expression_types/arg_types/font/extended_template.js
deleted file mode 100644
index 913a3ed31dc18..0000000000000
--- a/public/expression_types/arg_types/font/extended_template.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { get, mapValues, set } from 'lodash';
-import { TextStylePicker } from '../../../components/text_style_picker';
-
-export const ExtendedTemplate = props => {
-  const { onValueChange, argValue, workpad } = props;
-  const chain = get(argValue, 'chain.0', {});
-  const chainArgs = get(chain, 'arguments', {});
-
-  // TODO: Validate input
-
-  const spec = mapValues(chainArgs, '[0]');
-
-  function handleChange(newSpec) {
-    const newValue = set(argValue, ['chain', 0, 'arguments'], mapValues(newSpec, v => [v]));
-    return onValueChange(newValue);
-  }
-
-  return (
-    <div>
-      <TextStylePicker
-        family={spec.family}
-        color={spec.color}
-        size={spec.size}
-        align={spec.align}
-        weight={spec.weight}
-        underline={spec.underline || false}
-        italic={spec.italic || false}
-        onChange={handleChange}
-        colors={workpad.colors}
-      />
-    </div>
-  );
-};
-
-ExtendedTemplate.propTypes = {
-  onValueChange: PropTypes.func.isRequired,
-  argValue: PropTypes.any.isRequired,
-  typeInstance: PropTypes.object,
-  renderError: PropTypes.func,
-  workpad: PropTypes.shape({
-    colors: PropTypes.array.isRequired,
-  }).isRequired,
-};
-
-ExtendedTemplate.displayName = 'FontArgExtendedInput';
diff --git a/public/expression_types/arg_types/font/font.js b/public/expression_types/arg_types/font/font.js
deleted file mode 100644
index c5538d39de91d..0000000000000
--- a/public/expression_types/arg_types/font/font.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { templateFromReactComponent } from '../../../lib/template_from_react_component';
-import { ExtendedTemplate } from './extended_template';
-
-export const font = () => ({
-  name: 'font',
-  displayName: 'Text Settings',
-  help: 'Set the font, size and color',
-  template: templateFromReactComponent(ExtendedTemplate),
-  default:
-    '{font size=12 family="\'Open Sans\', Helvetica, Arial, sans-serif" color="#000000" align=left}',
-});
diff --git a/public/expression_types/arg_types/font/font.scss b/public/expression_types/arg_types/font/font.scss
deleted file mode 100644
index 1de9760842a94..0000000000000
--- a/public/expression_types/arg_types/font/font.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.canvas__argtype--font {
-  display: flex;
-
-  & > div {
-    flex: 1;
-    margin-right: $euiSizeXS;
-  }
-}
diff --git a/public/expression_types/arg_types/font/index.js b/public/expression_types/arg_types/font/index.js
deleted file mode 100644
index 145b7bfc6faed..0000000000000
--- a/public/expression_types/arg_types/font/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { font } from './font';
diff --git a/public/expression_types/arg_types/font/simple_template.js b/public/expression_types/arg_types/font/simple_template.js
deleted file mode 100644
index 6aa18edef39af..0000000000000
--- a/public/expression_types/arg_types/font/simple_template.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-//import { get } from 'lodash';
-
-export const SimpleTemplate = (/*props*/) => {
-  // const { argValue, onValueChange, labels } = props;
-
-  return <div className="canvas__argtype--font">Oh look, free beer</div>;
-};
-
-SimpleTemplate.displayName = 'FontArgSimpleInput';
-
-SimpleTemplate.propTypes = {
-  onValueChange: PropTypes.func.isRequired,
-  argValue: PropTypes.any.isRequired,
-  renderError: PropTypes.func,
-  labels: PropTypes.array,
-};
diff --git a/public/expression_types/arg_types/image_upload/image_upload.js b/public/expression_types/arg_types/image_upload/image_upload.js
index 143e581b7a2c8..a79dfff558f75 100644
--- a/public/expression_types/arg_types/image_upload/image_upload.js
+++ b/public/expression_types/arg_types/image_upload/image_upload.js
@@ -1,10 +1,9 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiImage,
-  EuiPanel,
   EuiSpacer,
   EuiSelect,
   EuiButton,
@@ -95,7 +94,12 @@ class ImageUpload extends React.Component {
     const urlTypeSrc = urlType === 'src';
 
     const selectUrlType = (
-      <EuiSelect options={this.urlTypeOptions} value={urlType} onChange={this.changeUrlType} />
+      <EuiSelect
+        compressed
+        options={this.urlTypeOptions}
+        value={urlType}
+        onChange={this.changeUrlType}
+      />
     );
 
     let uploadImage = null;
@@ -108,54 +112,45 @@ class ImageUpload extends React.Component {
     }
 
     const pasteImageUrl = urlTypeSrc ? (
-      <Fragment>
-        <EuiFlexGroup>
-          <EuiFlexItem grow={10}>
-            <EuiFieldText
-              defaultValue={this.state.url}
-              inputRef={ref => (this.inputRefs.srcUrlText = ref)}
-              placeholder="Image URL"
-              aria-label="Image URL"
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiSpacer size="xs" />
-        <EuiFlexGroup>
-          <EuiFlexItem grow={false}>
-            <EuiButton size="s" onClick={this.setSrcUrl}>
-              Set
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </Fragment>
+      <form onSubmit={this.setSrcUrl} className="eui-textRight">
+        <EuiFieldText
+          compressed
+          defaultValue={this.state.url}
+          inputRef={ref => (this.inputRefs.srcUrlText = ref)}
+          placeholder="Image URL"
+          aria-label="Image URL"
+        />
+        <EuiButton type="submit" size="s" onClick={this.setSrcUrl}>
+          Set
+        </EuiButton>
+      </form>
     ) : null;
 
     const shouldPreview =
       (urlTypeSrc && isValidHttpUrl(url)) || (urlTypeInline && isValidDataUrl(url));
 
     return (
-      <EuiPanel paddingSize="s">
+      <div>
         {selectUrlType}
         <EuiSpacer size="s" />
-        <EuiFlexGroup alignItems="center" gutterSize="s" className="canvas__argtype--image">
+        <EuiFlexGroup alignItems="center" gutterSize="s" className="canvasArgImage">
           <EuiFlexItem grow={8}>
             {uploadImage}
             {pasteImageUrl}
           </EuiFlexItem>
           {shouldPreview ? (
-            <EuiFlexItem grow={3} className="canvas__argtype--image--preview">
+            <EuiFlexItem grow={3} className="canvasArgImage--preview">
               <EuiImage
                 size="s"
                 hasShadow
-                allowFullScreen
                 alt="Image Preview"
                 url={this.state.url}
-                className="canvas__checkered"
+                className="canvasCheckered"
               />
             </EuiFlexItem>
           ) : null}
         </EuiFlexGroup>
-      </EuiPanel>
+      </div>
     );
   }
 }
diff --git a/public/expression_types/arg_types/image_upload/image_upload.scss b/public/expression_types/arg_types/image_upload/image_upload.scss
index d73f49838dde2..a32d1b8d14166 100644
--- a/public/expression_types/arg_types/image_upload/image_upload.scss
+++ b/public/expression_types/arg_types/image_upload/image_upload.scss
@@ -1,5 +1,5 @@
-.canvas__argtype--image {
-  .canvas__argtype--image--preview {
+.canvasArgImage {
+  .canvasArgImage--preview {
     max-height: 100px;
     overflow: hidden;
     border: $euiBorderThin;
diff --git a/public/expression_types/arg_types/number.js b/public/expression_types/arg_types/number.js
index 26b1ca0b9fa23..38fb309b505be 100644
--- a/public/expression_types/arg_types/number.js
+++ b/public/expression_types/arg_types/number.js
@@ -15,6 +15,7 @@ const NumberArgInput = ({ updateValue, value, confirm, commit, argId }) => (
   <EuiFlexGroup gutterSize="s">
     <EuiFlexItem>
       <EuiFieldNumber
+        compressed
         id={argId}
         value={Number(value)}
         onChange={confirm ? updateValue : ev => commit(Number(ev.target.value))}
@@ -22,7 +23,9 @@ const NumberArgInput = ({ updateValue, value, confirm, commit, argId }) => (
     </EuiFlexItem>
     {confirm && (
       <EuiFlexItem grow={false}>
-        <EuiButton onClick={() => commit(Number(value))}>{confirm}</EuiButton>
+        <EuiButton size="s" onClick={() => commit(Number(value))}>
+          {confirm}
+        </EuiButton>
       </EuiFlexItem>
     )}
   </EuiFlexGroup>
diff --git a/public/expression_types/arg_types/palette.js b/public/expression_types/arg_types/palette.js
index dc2d8d9337c7a..80844de38a757 100644
--- a/public/expression_types/arg_types/palette.js
+++ b/public/expression_types/arg_types/palette.js
@@ -60,7 +60,7 @@ PaletteArgInput.propTypes = {
 export const palette = () => ({
   name: 'palette',
   displayName: 'Palette',
-  help: 'Color palette selector',
+  help: 'Choose a color palette',
   default:
     '{palette #882E72 #B178A6 #D6C1DE #1965B0 #5289C7 #7BAFDE #4EB265 #90C987 #CAE0AB #F7EE55 #F6C141 #F1932D #E8601C #DC050C}',
   simpleTemplate: templateFromReactComponent(PaletteArgInput),
diff --git a/public/expression_types/arg_types/select.js b/public/expression_types/arg_types/select.js
index ad603cc497d3b..04e0adc8ca89c 100644
--- a/public/expression_types/arg_types/select.js
+++ b/public/expression_types/arg_types/select.js
@@ -12,7 +12,15 @@ const SelectArgInput = ({ typeInstance, onValueChange, argValue, argId }) => {
     return onValueChange(value);
   };
 
-  return <EuiSelect id={argId} defaultValue={argValue} options={choices} onChange={handleChange} />;
+  return (
+    <EuiSelect
+      compressed
+      id={argId}
+      defaultValue={argValue}
+      options={choices}
+      onChange={handleChange}
+    />
+  );
 };
 
 SelectArgInput.propTypes = {
diff --git a/public/expression_types/arg_types/series_style/extended_template.js b/public/expression_types/arg_types/series_style/extended_template.js
index 883c535ae71f1..c592b6f2f77e2 100644
--- a/public/expression_types/arg_types/series_style/extended_template.js
+++ b/public/expression_types/arg_types/series_style/extended_template.js
@@ -37,7 +37,7 @@ export const ExtendedTemplate = props => {
   return (
     <div>
       {name !== 'defaultStyle' && (
-        <EuiFormRow label="Series Identifier">
+        <EuiFormRow label="Series Identifier" compressed>
           <EuiSelect
             defaultValue={selectedSeries}
             options={labelOptions}
@@ -49,7 +49,7 @@ export const ExtendedTemplate = props => {
         <EuiFlexGroup gutterSize="s">
           {fields.includes('lines') && (
             <EuiFlexItem>
-              <EuiFormRow label="Line">
+              <EuiFormRow label="Line" compressed>
                 <EuiSelect
                   defaultValue={get(chainArgs, 'lines.0', 0)}
                   options={values}
@@ -60,7 +60,7 @@ export const ExtendedTemplate = props => {
           )}
           {fields.includes('bars') && (
             <EuiFlexItem>
-              <EuiFormRow label="Bar">
+              <EuiFormRow label="Bar" compressed>
                 <EuiSelect
                   defaultValue={get(chainArgs, 'bars.0', 0)}
                   options={values}
@@ -71,7 +71,7 @@ export const ExtendedTemplate = props => {
           )}
           {fields.includes('points') && (
             <EuiFlexItem>
-              <EuiFormRow label="Point">
+              <EuiFormRow label="Point" compressed>
                 <EuiSelect
                   defaultValue={get(chainArgs, 'points.0', 0)}
                   options={values}
diff --git a/public/expression_types/arg_types/series_style/simple_template.js b/public/expression_types/arg_types/series_style/simple_template.js
index 23bdc10b7eafb..17ff753969616 100644
--- a/public/expression_types/arg_types/series_style/simple_template.js
+++ b/public/expression_types/arg_types/series_style/simple_template.js
@@ -23,11 +23,7 @@ export const SimpleTemplate = props => {
   const handlePlain = (argName, val) => handleChange(argName, { target: { value: val } });
 
   return (
-    <EuiFlexGroup
-      gutterSize="none"
-      alignItems="center"
-      className="canvas__argtype--seriesStyle--color-picker"
-    >
+    <EuiFlexGroup gutterSize="none" alignItems="center" className="canvasArgSeries__colorPicker">
       {!color || color.length === 0 ? (
         <Fragment>
           <EuiFlexItem grow={false}>
@@ -69,7 +65,7 @@ export const SimpleTemplate = props => {
             <TooltipIcon
               placement="left"
               icon="warning"
-              text="Data has no series to style, add a color dimension"
+              content="Data has no series to style, add a color dimension"
             />
           </EuiFlexItem>
         )}
diff --git a/public/expression_types/arg_types/string.js b/public/expression_types/arg_types/string.js
index 33befa484fee1..a77b4d011a3ff 100644
--- a/public/expression_types/arg_types/string.js
+++ b/public/expression_types/arg_types/string.js
@@ -10,6 +10,7 @@ const StringArgInput = ({ updateValue, value, confirm, commit, argId }) => (
   <EuiFlexGroup gutterSize="s">
     <EuiFlexItem>
       <EuiFieldText
+        compressed
         id={argId}
         value={value}
         onChange={confirm ? updateValue : ev => commit(ev.target.value)}
@@ -17,7 +18,9 @@ const StringArgInput = ({ updateValue, value, confirm, commit, argId }) => (
     </EuiFlexItem>
     {confirm && (
       <EuiFlexItem grow={false}>
-        <EuiButton onClick={() => commit(value)}>{confirm}</EuiButton>
+        <EuiButton size="s" onClick={() => commit(value)}>
+          {confirm}
+        </EuiButton>
       </EuiFlexItem>
     )}
   </EuiFlexGroup>
diff --git a/public/expression_types/arg_types/textarea.js b/public/expression_types/arg_types/textarea.js
index 47929b5dadac4..279fc613d1829 100644
--- a/public/expression_types/arg_types/textarea.js
+++ b/public/expression_types/arg_types/textarea.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { compose, withProps } from 'recompose';
 import { get } from 'lodash';
-import { EuiForm, EuiTextArea, EuiButton } from '@elastic/eui';
+import { EuiForm, EuiTextArea, EuiSpacer, EuiButton } from '@elastic/eui';
 import { createStatefulPropHoc } from '../../components/enhance/stateful_prop';
 import { templateFromReactComponent } from '../../lib/template_from_react_component';
 
@@ -14,14 +14,18 @@ const TextAreaArgInput = ({ updateValue, value, confirm, commit, renderError, ar
   return (
     <EuiForm>
       <EuiTextArea
+        className="canvasTextArea--code"
         id={argId}
-        rows={5}
+        rows={10}
         value={value}
+        resize="none"
         onChange={confirm ? updateValue : ev => commit(ev.target.value)}
       />
+      <EuiSpacer size="s" />
       <EuiButton size="s" onClick={() => commit(value)}>
         {confirm}
       </EuiButton>
+      <EuiSpacer size="xs" />
     </EuiForm>
   );
 };
diff --git a/public/expression_types/datasources/demodata/header.png b/public/expression_types/datasources/demodata/header.png
deleted file mode 100644
index a7b90c8f62e39..0000000000000
Binary files a/public/expression_types/datasources/demodata/header.png and /dev/null differ
diff --git a/public/expression_types/datasources/demodata/index.js b/public/expression_types/datasources/demodata/index.js
index 74ecf31c2282b..33c39c6491de4 100644
--- a/public/expression_types/datasources/demodata/index.js
+++ b/public/expression_types/datasources/demodata/index.js
@@ -1,23 +1,24 @@
 import React from 'react';
+import { EuiText } from '@elastic/eui';
 import { templateFromReactComponent } from '../../../lib/template_from_react_component';
-import header from './header.png';
 
 const DemodataDatasource = () => (
-  <div>
-    <h3>The demodata source</h3>
+  <EuiText>
+    <h3>You are using demo data</h3>
     <p>
       This data source is connected to every Canvas element by default. Its purpose is to give you
-      lightweight data to use in getting to know an element. The demo data set contains 4 strings, 3
-      numbers and a date. Feel free to experiment and, when you're ready, click the
-      <i>Change Datasource</i> link below to connect to your own data.
+      some playground data to get started. The demo set contains 4 strings, 3 numbers and a date.
+      Feel free to experiment and, when you're ready, click the <strong>Change Datasource</strong>{' '}
+      link below to connect to your own data.
     </p>
-  </div>
+  </EuiText>
 );
 
 export const demodata = () => ({
   name: 'demodata',
   displayName: 'Demo Data',
   help: 'Mock data set with with usernames, prices, projects, countries and phases.',
-  image: header,
+  // Replace this with a better icon when we have time.
+  image: 'logoElasticStack',
   template: templateFromReactComponent(DemodataDatasource),
 });
diff --git a/public/expression_types/datasources/esdocs/esdocs.scss b/public/expression_types/datasources/esdocs/esdocs.scss
deleted file mode 100644
index 6afd17acf223e..0000000000000
--- a/public/expression_types/datasources/esdocs/esdocs.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.canvas__esdocs--row {
-  display: flex;
-  margin-bottom: $euiSize;
-
-  .canvas__esdocs--index {
-    margin-right: $euiSize;
-    width: ($euiSizeXXL + $euiSizeS) * 3;
-  }
-
-  .canvas__esdocs--sort-field {
-    width: ($euiSizeXXL + $euiSizeS) * 3;
-  }
-
-  .canvas__esdocs--sort-dir {
-    width: ($euiSizeXL * 2);
-  }
-
-  .canvas__esdocs--query {
-    flex-grow: 1;
-    margin-right: $euiSize;
-  }
-}
diff --git a/public/expression_types/datasources/esdocs/header.png b/public/expression_types/datasources/esdocs/header.png
deleted file mode 100644
index d828a3db6efa7..0000000000000
Binary files a/public/expression_types/datasources/esdocs/header.png and /dev/null differ
diff --git a/public/expression_types/datasources/esdocs/index.js b/public/expression_types/datasources/esdocs/index.js
index bddce7bd66a43..813f842a0865f 100644
--- a/public/expression_types/datasources/esdocs/index.js
+++ b/public/expression_types/datasources/esdocs/index.js
@@ -1,20 +1,11 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiFieldText,
-  EuiSelect,
-  EuiSpacer,
-} from '@elastic/eui';
+import { EuiFormRow, EuiSelect, EuiFieldText, EuiCallOut, EuiSpacer } from '@elastic/eui';
 import { getSimpleArg, setSimpleArg } from '../../../lib/arg_helpers';
 import { ESFieldsSelect } from '../../../components/es_fields_select';
 import { ESFieldSelect } from '../../../components/es_field_select';
 import { ESIndexSelect } from '../../../components/es_index_select';
-import { TooltipIcon } from '../../../components/tooltip_icon';
 import { templateFromReactComponent } from '../../../lib/template_from_react_component';
-import header from './header.png';
 
 const EsdocsDatasource = ({ args, updateArgs }) => {
   const setArg = (name, value) => {
@@ -35,104 +26,63 @@ const EsdocsDatasource = ({ args, updateArgs }) => {
     return commas.split(',').map(str => str.trim());
   };
 
-  const getSort = () => {
+  const getSortBy = () => {
     const commas = getSimpleArg('sort', args)[0] || '_score,desc';
     return commas.split(',').map(str => str.trim());
   };
 
   const fields = getFields();
-  const sort = getSort();
+  const [sortField, sortOrder] = getSortBy();
   const index = getSimpleArg('index', args)[0];
   const [query] = getQuery();
 
-  return (
-    <Fragment>
-      <p>
-        The Elasticsearch Docs datasource is used to pull documents directly from Elasticsearch
-        without the use of aggregations. It is best used with low volume datasets and in situations
-        where you need to view raw documents or plot exact, non-aggregated values on a chart.
-      </p>
-
-      <EuiFlexGroup gutterSize="s" alignItems="flexEnd" className="canvas__esdocs--row">
-        <EuiFlexItem grow={false}>
-          <EuiFormRow
-            label={
-              <Fragment>
-                Index &nbsp;
-                <TooltipIcon
-                  text="The index pattern to query. Time filters will apply to the timefield from this pattern."
-                  placement="right"
-                />
-              </Fragment>
-            }
-          >
-            <ESIndexSelect value={index} onChange={index => setArg('index', index)} />
-          </EuiFormRow>
-        </EuiFlexItem>
+  const sortOptions = [{ value: 'asc', text: 'Ascending' }, { value: 'desc', text: 'Descending' }];
 
-        <EuiFlexItem>
-          <EuiFormRow
-            label={
-              <Fragment>
-                Query &nbsp;
-                <TooltipIcon text="Lucene Query String syntax" placement="right" />
-              </Fragment>
-            }
-            fullWidth
-          >
-            <EuiFieldText fullWidth value={query} onChange={e => setArg('query', e.target.value)} />
-          </EuiFormRow>
-        </EuiFlexItem>
-
-        <EuiFlexItem grow={false}>
-          <EuiFormRow
-            label={
-              <Fragment>
-                Sort &nbsp;
-                <TooltipIcon text="Document sort order, field and direction" placement="right" />
-              </Fragment>
-            }
-          >
-            <ESFieldSelect
-              index={index}
-              value={sort[0]}
-              onChange={field => setArg('sort', [field, sort[1]].join(', '))}
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
+  return (
+    <div>
+      <EuiCallOut size="s" title="Be careful" color="warning">
+        <p>
+          The Elasticsearch Docs datasource is used to pull documents directly from Elasticsearch
+          without the use of aggregations. It is best used with low volume datasets and in
+          situations where you need to view raw documents or plot exact, non-aggregated values on a
+          chart.
+        </p>
+      </EuiCallOut>
 
-        <EuiFlexItem grow={false}>
-          <EuiFormRow hasEmptyLabelSpace>
-            <EuiSelect
-              defaultValue={sort[1]}
-              options={['asc', 'desc'].map(value => ({ value, text: value }))}
-              onChange={e => setArg('sort', [sort[0], e.target.value].join(', '))}
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      <EuiSpacer size="m" />
 
-      <EuiSpacer size="s" />
+      <EuiFormRow label="Index Pattern">
+        <ESIndexSelect value={index} onChange={index => setArg('index', index)} />
+      </EuiFormRow>
 
+      <EuiFormRow label="Query" helpText="Lucene query string syntax" compressed>
+        <EuiFieldText value={query} onChange={e => setArg('query', e.target.value)} />
+      </EuiFormRow>
+      <EuiFormRow label="Sort Field" helpText="Document sort order, field, and direction">
+        <ESFieldSelect
+          index={index}
+          value={sortField}
+          onChange={field => setArg('sort', [field, sortOrder].join(', '))}
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label="Sort Order"
+        helpText="Document sort order, field, and direction"
+        compressed
+      >
+        <EuiSelect
+          value={sortOrder}
+          onChange={e => setArg('sort', [sortField, e.target.value].join(', '))}
+          options={sortOptions}
+        />
+      </EuiFormRow>
       <EuiFormRow
-        label={
-          <Fragment>
-            Fields &nbsp;
-            {fields.length <= 10 ? (
-              <TooltipIcon
-                text="The fields to extract. Kibana scripted fields are not currently available"
-                placement="right"
-              />
-            ) : (
-              <TooltipIcon
-                icon="warning"
-                text="This datasource performs best with 10 or fewer fields"
-                placement="right"
-              />
-            )}
-          </Fragment>
+        label="fields"
+        helpText={
+          fields.length <= 10
+            ? 'The fields to extract. Kibana scripted fields are not currently available'
+            : 'This datasource performs best with 10 or fewer fields'
         }
-        fullWidth
       >
         <ESFieldsSelect
           index={index}
@@ -140,7 +90,7 @@ const EsdocsDatasource = ({ args, updateArgs }) => {
           selected={fields}
         />
       </EuiFormRow>
-    </Fragment>
+    </div>
   );
 };
 
@@ -153,6 +103,6 @@ export const esdocs = () => ({
   name: 'esdocs',
   displayName: 'Elasticsearch Raw Documents',
   help: 'Pull back raw documents from elasticsearch',
-  image: header,
+  image: 'logoElasticsearch',
   template: templateFromReactComponent(EsdocsDatasource),
 });
diff --git a/public/expression_types/datasources/essql/header.png b/public/expression_types/datasources/essql/header.png
deleted file mode 100644
index a6eed672a937d..0000000000000
Binary files a/public/expression_types/datasources/essql/header.png and /dev/null differ
diff --git a/public/expression_types/datasources/essql/index.js b/public/expression_types/datasources/essql/index.js
index ca7255bfe7d20..7901e7005309d 100644
--- a/public/expression_types/datasources/essql/index.js
+++ b/public/expression_types/datasources/essql/index.js
@@ -1,10 +1,8 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { EuiFormRow, EuiTextArea } from '@elastic/eui';
 import { getSimpleArg, setSimpleArg } from 'plugins/canvas/lib/arg_helpers';
-import { TooltipIcon } from 'plugins/canvas/components/tooltip_icon';
 import { templateFromReactComponent } from '../../../lib/template_from_react_component';
-import header from './header.png';
 
 const EssqlDatasource = ({ args, updateArgs }) => {
   const setArg = (name, value) => {
@@ -28,17 +26,9 @@ const EssqlDatasource = ({ args, updateArgs }) => {
   };
 
   return (
-    <EuiFormRow
-      fullWidth
-      label={
-        <Fragment>
-          Query &nbsp;
-          <TooltipIcon text="Elasticsearch SQL" placement="right" />
-        </Fragment>
-      }
-    >
+    <EuiFormRow label="Elasticsearch SQL query">
       <EuiTextArea
-        fullWidth
+        className="canvasTextArea--code"
         value={getQuery()}
         onChange={e => setArg(getArgName(), e.target.value)}
       />
@@ -55,6 +45,7 @@ export const essql = () => ({
   name: 'essql',
   displayName: 'Elasticsearch SQL',
   help: 'Use Elasticsearch SQL to get a datatable',
-  image: header,
+  // Replace this with a SQL logo when we have one in EUI
+  image: 'logoElasticsearch',
   template: templateFromReactComponent(EssqlDatasource),
 });
diff --git a/public/expression_types/datasources/timelion/header.png b/public/expression_types/datasources/timelion/header.png
deleted file mode 100644
index a690e23108bc3..0000000000000
Binary files a/public/expression_types/datasources/timelion/header.png and /dev/null differ
diff --git a/public/expression_types/datasources/timelion/index.js b/public/expression_types/datasources/timelion/index.js
index 4c3938dbf1fbe..25dae4fb1107f 100644
--- a/public/expression_types/datasources/timelion/index.js
+++ b/public/expression_types/datasources/timelion/index.js
@@ -1,10 +1,16 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiFieldText, EuiCode } from '@elastic/eui';
+import {
+  EuiFormRow,
+  EuiFieldText,
+  EuiCallOut,
+  EuiSpacer,
+  EuiCode,
+  EuiText,
+  EuiTextArea,
+} from '@elastic/eui';
 import { getSimpleArg, setSimpleArg } from '../../../lib/arg_helpers';
-import { TooltipIcon } from '../../../components/tooltip_icon';
 import { templateFromReactComponent } from '../../../lib/template_from_react_component';
-import header from './header.png';
 
 const TimelionDatasource = ({ args, updateArgs }) => {
   const setArg = (name, value) => {
@@ -27,60 +33,46 @@ const TimelionDatasource = ({ args, updateArgs }) => {
 
   return (
     <div>
-      <p>
-        Canvas integrates with Kibana's Timelion application to allow you to use Timelion queries to
-        pull back timeseries data in a tabular format that can be used with Canvas elements.
-      </p>
+      <EuiText size="xs">
+        <h3>Timelion</h3>
+        <p>
+          Canvas integrates with Kibana's Timelion application to allow you to use Timelion queries
+          to pull back timeseries data in a tabular format that can be used with Canvas elements.
+        </p>
+      </EuiText>
 
-      <EuiFlexGroup gutterSize="s">
-        <EuiFlexItem>
-          <EuiFormRow
-            fullWidth
-            label={
-              <Fragment>
-                Query &nbsp;
-                <TooltipIcon text="Lucene Query String syntax" placement="right" />
-              </Fragment>
-            }
-            helpText={
-              <small>
-                <strong>Tip 1:</strong> Timelion requires a time range, you should add a time filter
-                element to your page somewhere, or use the code editor to pass in a time filter.<br />
-                <strong>Tip 2:</strong> Some Timelion functions, such as <EuiCode>.color()</EuiCode>,
-                don't translate to a Canvas data table. Anything todo with data manipulation should
-                work grand.
-              </small>
-            }
-          >
-            <EuiFieldText
-              fullWidth
-              value={getQuery()}
-              onChange={e => setArg('query', e.target.value)}
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
-        {
-          // TODO: Time timelion interval picker should be a drop down
-        }
-        <EuiFlexItem grow={false}>
-          <EuiFormRow
-            label={
-              <Fragment>
-                Interval &nbsp;
-                <TooltipIcon
-                  text="Elasticsearch date math, eg 1w, 5d, 10s, or auto"
-                  placement="right"
-                />
-              </Fragment>
-            }
-          >
-            <EuiFieldText
-              value={getInterval()}
-              onChange={e => setArg('interval', e.target.value)}
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      <EuiSpacer />
+
+      <EuiFormRow label="Query" helpText="Lucene Query String syntax">
+        <EuiTextArea
+          className="canvasTextArea--code"
+          value={getQuery()}
+          onChange={e => setArg('query', e.target.value)}
+        />
+      </EuiFormRow>
+      {
+        // TODO: Time timelion interval picker should be a drop down
+      }
+      <EuiFormRow
+        label="Interval"
+        helpText="Accepts Elasticsearch date math: 1w, 5d, 10s, or auto"
+        compressed
+      >
+        <EuiFieldText value={getInterval()} onChange={e => setArg('interval', e.target.value)} />
+      </EuiFormRow>
+
+      <EuiCallOut color="warning" title="Some tips" size="s">
+        <ul>
+          <li>
+            Timelion requires a time range, you should add a time filter element to your page
+            somewhere, or use the code editor to pass in a time filter.
+          </li>
+          <li>
+            Some Timelion functions, such as <EuiCode>.color()</EuiCode>, don't translate to a
+            Canvas data table. Anything todo with data manipulation should work grand.
+          </li>
+        </ul>
+      </EuiCallOut>
     </div>
   );
 };
@@ -94,6 +86,6 @@ export const timelion = () => ({
   name: 'timelion',
   displayName: 'Timelion',
   help: 'Use timelion syntax to retrieve a timeseries',
-  image: header,
+  image: 'timelionApp',
   template: templateFromReactComponent(TimelionDatasource),
 });
diff --git a/public/expression_types/views/render.js b/public/expression_types/views/render.js
index e000719f99f6b..1a6d270d1847a 100644
--- a/public/expression_types/views/render.js
+++ b/public/expression_types/views/render.js
@@ -1,27 +1,27 @@
 export const render = () => ({
   name: 'render',
-  displayName: 'Element Style',
+  displayName: 'Element style',
   help: 'Setting for the container around your element',
   modelArgs: [],
   requiresContext: false,
   args: [
     {
       name: 'containerStyle',
-      displayName: 'Container Style',
+      displayName: 'Container',
       help: 'Tweak the appearance of the element container',
       argType: 'containerStyle',
       default: '{containerStyle}',
     },
     {
       name: 'css',
-      displayName: 'Custom CSS',
+      displayName: 'CSS',
       help: 'A CSS stylesheet scoped to your element',
       argType: 'textarea',
-      default: `".canvas__element {
+      default: `".canvasRenderEl {
 
 }"`,
       options: {
-        confirm: 'Apply Stylesheet',
+        confirm: 'Apply stylesheet',
       },
     },
   ],
diff --git a/public/lib/fullscreen.js b/public/lib/fullscreen.js
index 90a55869372e4..38c13608b4e78 100644
--- a/public/lib/fullscreen.js
+++ b/public/lib/fullscreen.js
@@ -1,4 +1,4 @@
-export const fullscreenClass = 'canvas-fullscreen';
+export const fullscreenClass = 'canvas-isFullscreen';
 
 export function setFullscreen(fullscreen, doc = document) {
   const enabled = Boolean(fullscreen);
diff --git a/public/render_functions/advanced_filter/component/advanced_filter.js b/public/render_functions/advanced_filter/component/advanced_filter.js
index 80547456a2a48..12dc8b864a49c 100644
--- a/public/render_functions/advanced_filter/component/advanced_filter.js
+++ b/public/render_functions/advanced_filter/component/advanced_filter.js
@@ -8,10 +8,10 @@ export const AdvancedFilter = ({ value, onChange, commit }) => (
       e.preventDefault();
       commit(value);
     }}
-    className="canvas__element__advanced_filter"
+    className="canvasAdvancedFilter"
   >
     <FormControl
-      className="canvas__element__advanced_filter--input"
+      className="canvasAdvancedFilter__input"
       type="text"
       placeholder="Enter text"
       value={value}
diff --git a/public/render_functions/advanced_filter/component/advanced_filter.scss b/public/render_functions/advanced_filter/component/advanced_filter.scss
index d3f69bc10dae6..140a052bbdf54 100644
--- a/public/render_functions/advanced_filter/component/advanced_filter.scss
+++ b/public/render_functions/advanced_filter/component/advanced_filter.scss
@@ -1,7 +1,7 @@
-.canvas__element__advanced_filter {
+.canvasAdvancedFilter {
   display: flex;
 
-  .canvas__element__advanced_filter--input {
+  .canvasAdvancedFilter__input {
     width: 100%;
     margin-right: $euiSizeS;
   }
diff --git a/public/render_functions/debug.js b/public/render_functions/debug.js
index 8ac7ee8f3ac9e..ab90525455331 100644
--- a/public/render_functions/debug.js
+++ b/public/render_functions/debug.js
@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom';
 import React from 'react';
+import { EuiCode } from '@elastic/eui';
 
 export const debug = () => ({
   name: 'debug',
@@ -7,14 +8,20 @@ export const debug = () => ({
   help: 'Render debug output as formatted JSON',
   reuseDomNode: true,
   render(domNode, config, handlers) {
-    ReactDOM.render(
-      <div style={{ overflow: 'auto', height: '100%' }}>
-        <pre>{JSON.stringify(config, null, ' ')}</pre>
-      </div>,
-      domNode,
-      () => handlers.done()
+    const renderDebug = () => (
+      <EuiCode>
+        <pre style={{ overflow: 'auto', height: domNode.offsetHeight, width: domNode.offsetWidth }}>
+          {JSON.stringify(config, null, 2)}
+        </pre>
+      </EuiCode>
     );
 
+    ReactDOM.render(renderDebug(), domNode, () => handlers.done());
+
+    handlers.onResize(() => {
+      ReactDOM.render(renderDebug(), domNode, () => handlers.done());
+    });
+
     handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
   },
 });
diff --git a/public/render_functions/dropdown_filter/component/dropdown_filter.js b/public/render_functions/dropdown_filter/component/dropdown_filter.js
index 810b800cc6598..ce21bc0da34ac 100644
--- a/public/render_functions/dropdown_filter/component/dropdown_filter.js
+++ b/public/render_functions/dropdown_filter/component/dropdown_filter.js
@@ -9,10 +9,10 @@ export const DropdownFilter = ({ value, onChange, commit, choices }) => {
         e.preventDefault();
         commit(value);
       }}
-      className="canvas__element__dropdown_filter"
+      className="canvasDropdownFilter"
     >
       <FormControl
-        className="canvas__element__dropdown_filter--input"
+        className="canvasDropdownFilter--input"
         componentClass="select"
         placeholder="select"
         value={value}
diff --git a/public/render_functions/dropdown_filter/component/dropdown_filter.scss b/public/render_functions/dropdown_filter/component/dropdown_filter.scss
index 64374041e4c89..a28c207aa3b18 100644
--- a/public/render_functions/dropdown_filter/component/dropdown_filter.scss
+++ b/public/render_functions/dropdown_filter/component/dropdown_filter.scss
@@ -1,7 +1,7 @@
-.canvas__element__dropdown_filter {
+.canvasDropdownFilter {
   display: flex;
 
-  .canvas__element__dropdown_filter--input {
+  .canvasDropdownFilter--input {
     width: 100%;
     margin-right: $euiSizeS;
   }
diff --git a/public/render_functions/error/error.scss b/public/render_functions/error/error.scss
index ab9d7a67dc25c..21b9453605551 100644
--- a/public/render_functions/error/error.scss
+++ b/public/render_functions/error/error.scss
@@ -1,4 +1,4 @@
-.canvas_error-render--debug-payload {
+.canvasErrorDebug {
   max-height: 260px;
   overflow-y: scroll;
-}
\ No newline at end of file
+}
diff --git a/public/render_functions/error/show_debugging.js b/public/render_functions/error/show_debugging.js
index 7adae41d5ce09..70739b177a9a9 100644
--- a/public/render_functions/error/show_debugging.js
+++ b/public/render_functions/error/show_debugging.js
@@ -1,20 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withState } from 'recompose';
-import { Button, Well } from 'react-bootstrap';
+import { EuiCode, EuiButtonEmpty } from '@elastic/eui';
 
 const ShowDebuggingComponent = ({ payload, expanded, setExpanded }) =>
   process.env.NODE_ENV === 'production' ? null : (
     <div>
-      <Button bsStyle="link" onClick={() => setExpanded(!expanded)}>
-        {expanded && <span className="fa fa-caret-down" />}
-        {!expanded && <span className="fa fa-caret-right" />}
-        &nbsp;See Details
-      </Button>
+      <EuiButtonEmpty
+        iconType={expanded ? 'arrowDown' : 'arrowRight'}
+        onClick={() => setExpanded(!expanded)}
+      >
+        See Details
+      </EuiButtonEmpty>
       {expanded && (
-        <Well className="canvas_error-render--debug-payload">
+        <EuiCode className="canvasErrorDebug">
           <pre>{JSON.stringify(payload, null, 2)}</pre>
-        </Well>
+        </EuiCode>
       )}
     </div>
   );
diff --git a/public/render_functions/markdown/markdown.js b/public/render_functions/markdown/markdown.js
index d073101c1d91a..237b51a91124d 100644
--- a/public/render_functions/markdown/markdown.js
+++ b/public/render_functions/markdown/markdown.js
@@ -15,11 +15,7 @@ export const markdown = () => ({
 
     /* eslint-disable react/no-danger */
     ReactDOM.render(
-      <div
-        className="canvas__element__markdown"
-        style={fontStyle}
-        dangerouslySetInnerHTML={html}
-      />,
+      <div className="canvasMarkdown" style={fontStyle} dangerouslySetInnerHTML={html} />,
       domNode,
       () => handlers.done()
     );
diff --git a/public/render_functions/markdown/markdown.scss b/public/render_functions/markdown/markdown.scss
index 3fa22eaeb6d3b..9cf541045f603 100644
--- a/public/render_functions/markdown/markdown.scss
+++ b/public/render_functions/markdown/markdown.scss
@@ -1,4 +1,7 @@
-.canvas .canvas__element__markdown {
+.canvas .canvasMarkdown {
+  // This line should be moved to element args
+  line-height: 1.5;
+
   h1 {
     font-size: 2.5em;
   }
@@ -15,6 +18,17 @@
     font-size: 1.25em;
   }
 
+  ul {
+    list-style: disc;
+    li {
+      list-style: disc;
+    }
+  }
+
+  ol {
+    list-style: decimal;
+  }
+
   h1,
   h2,
   h3,
@@ -22,7 +36,6 @@
   h5,
   h6 {
     margin-bottom: 0.5em;
-    line-height: 1.1;
     font-weight: inherit;
   }
 
diff --git a/public/render_functions/plot/plot.js b/public/render_functions/plot/plot.js
index 047369f39157f..58e5619eb60f2 100644
--- a/public/render_functions/plot/plot.js
+++ b/public/render_functions/plot/plot.js
@@ -16,12 +16,10 @@ const render = (domNode, config, handlers) => {
     try {
       if (!plot) {
         plot = $.plot($(domNode), config.data, config.options);
-        $('.legendLabel, .flot-tick-label, .valueLabel', domNode).css(config.font.spec);
       } else {
         plot.resize();
         plot.setupGrid();
         plot.draw();
-        $('.legendLabel, .flot-tick-label, .valueLabel', domNode).css(config.font.spec);
       }
     } catch (e) {
       // Nope
diff --git a/public/render_functions/plot/plot.scss b/public/render_functions/plot/plot.scss
index 57e66004f1f03..c1150824d728c 100644
--- a/public/render_functions/plot/plot.scss
+++ b/public/render_functions/plot/plot.scss
@@ -1,3 +1,4 @@
+// I assume these are flot specific selector names and should not be renamed
 .legendLabel {
   color: $euiTextColor;
 }
diff --git a/public/render_functions/reveal_image/index.js b/public/render_functions/reveal_image/index.js
index 54b91677cb9a3..9349e734349e0 100644
--- a/public/render_functions/reveal_image/index.js
+++ b/public/render_functions/reveal_image/index.js
@@ -18,6 +18,8 @@ export const revealImage = () => ({
       setSize();
       finish();
     };
+
+    img.className = 'revealImage__image';
     img.style.clipPath = getClipPath(config.percent, config.origin);
     img.style['-webkit-clip-path'] = getClipPath(config.percent, config.origin);
     img.src = isValid(config.image) ? config.image : elasticOutline;
diff --git a/public/render_functions/reveal_image/reveal_image.scss b/public/render_functions/reveal_image/reveal_image.scss
index bc3a5f8415ea1..f020b0a63996e 100644
--- a/public/render_functions/reveal_image/reveal_image.scss
+++ b/public/render_functions/reveal_image/reveal_image.scss
@@ -10,4 +10,13 @@
     background-size: contain;
     background-repeat: no-repeat;
   }
+
+  // disables selection and dragging
+  .revealImage__image {
+    -khtml-user-select: none;
+    -o-user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+  }
 }
diff --git a/public/render_functions/time_filter/components/datetime_calendar/datetime_calendar.js b/public/render_functions/time_filter/components/datetime_calendar/datetime_calendar.js
index 8519dfcd78796..3d152d7b78e58 100644
--- a/public/render_functions/time_filter/components/datetime_calendar/datetime_calendar.js
+++ b/public/render_functions/time_filter/components/datetime_calendar/datetime_calendar.js
@@ -6,7 +6,7 @@ import dateMath from '@elastic/datemath';
 import { DatetimeInput } from '../datetime_input';
 
 export const DatetimeCalendar = ({ value, onSelect }) => (
-  <div className="canvas__datetime-calendar">
+  <div className="canvasDateTimeCal">
     <DatetimeInput moment={dateMath.parse(value)} setMoment={onSelect} />
     <Datetime value={value} input={false} onChange={onSelect} />
   </div>
diff --git a/public/render_functions/time_filter/components/datetime_calendar/datetime_calendar.scss b/public/render_functions/time_filter/components/datetime_calendar/datetime_calendar.scss
index 60d20b782e5f9..fee0bf40fc9e5 100644
--- a/public/render_functions/time_filter/components/datetime_calendar/datetime_calendar.scss
+++ b/public/render_functions/time_filter/components/datetime_calendar/datetime_calendar.scss
@@ -1,4 +1,4 @@
-.canvas__datetime-calendar {
+.canvasDateTimeCal {
   tfoot {
     display: none;
   }
diff --git a/public/render_functions/time_filter/components/datetime_input/datetime_input.scss b/public/render_functions/time_filter/components/datetime_input/datetime_input.scss
deleted file mode 100644
index e09b349af6d4f..0000000000000
--- a/public/render_functions/time_filter/components/datetime_input/datetime_input.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.canvas__datetime-input {
-  text-align: center;
-}
diff --git a/public/render_functions/time_filter/components/datetime_range_absolute/datetime_range_absolute.js b/public/render_functions/time_filter/components/datetime_range_absolute/datetime_range_absolute.js
index 1a57978101b5c..b73a09c8abcf1 100644
--- a/public/render_functions/time_filter/components/datetime_range_absolute/datetime_range_absolute.js
+++ b/public/render_functions/time_filter/components/datetime_range_absolute/datetime_range_absolute.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { DatetimeCalendar } from '../datetime_calendar';
 
 export const DatetimeRangeAbsolute = ({ from, to, onSelect }) => (
-  <div className="canvas__datetime-range-absolute">
+  <div className="canvasDateTimeRangeAbsolute">
     <div>
       <DatetimeCalendar value={from} onSelect={val => onSelect(val, to)} />
     </div>
diff --git a/public/render_functions/time_filter/components/datetime_range_absolute/datetime_range_absolute.scss b/public/render_functions/time_filter/components/datetime_range_absolute/datetime_range_absolute.scss
index ee0c60cedad96..d74f558e8d48e 100644
--- a/public/render_functions/time_filter/components/datetime_range_absolute/datetime_range_absolute.scss
+++ b/public/render_functions/time_filter/components/datetime_range_absolute/datetime_range_absolute.scss
@@ -1,4 +1,4 @@
-.canvas__datetime-range-absolute {
+.canvasDateTimeRangeAbsolute {
   display: flex;
 
   > * {
diff --git a/public/render_functions/time_filter/components/time_picker/time_picker.js b/public/render_functions/time_filter/components/time_picker/time_picker.js
index fa02978916336..032c1378e9786 100644
--- a/public/render_functions/time_filter/components/time_picker/time_picker.js
+++ b/public/render_functions/time_filter/components/time_picker/time_picker.js
@@ -24,7 +24,7 @@ export const TimePicker = ({ range, setRange, dirty, setDirty, onSelect }) => {
   }
 
   return (
-    <div className="canvas__time-picker">
+    <div className="canvasTimePicker">
       <DatetimeRangeAbsolute
         from={dateMath.parse(from)}
         to={dateMath.parse(to)}
@@ -40,7 +40,7 @@ export const TimePicker = ({ range, setRange, dirty, setDirty, onSelect }) => {
         <Button
           bsStyle="success"
           disabled={!dirty}
-          className="canvas__time-picker--apply"
+          className="canvasTimePicker__apply"
           onClick={() => {
             setDirty(false);
             onSelect(range.from, range.to);
diff --git a/public/render_functions/time_filter/components/time_picker/time_picker.scss b/public/render_functions/time_filter/components/time_picker/time_picker.scss
index 51e8ffa35c7ce..5e6165d49b851 100644
--- a/public/render_functions/time_filter/components/time_picker/time_picker.scss
+++ b/public/render_functions/time_filter/components/time_picker/time_picker.scss
@@ -1,11 +1,11 @@
-.canvas__time-picker {
+.canvasTimePicker {
   display: flex;
 
   > div:not(:last-child) {
     margin-right: $euiSizeS;
   }
 
-  .canvas__time-picker--apply {
+  .canvasTimePicker__apply {
     margin-top: $euiSizeXS;
     width: 100%;
   }
diff --git a/public/style/hackery.scss b/public/style/hackery.scss
index d2f65bcf01416..aed0f1b2b7f24 100644
--- a/public/style/hackery.scss
+++ b/public/style/hackery.scss
@@ -4,38 +4,17 @@
 */
 
 // Give buttons some room to the right
-.btn-toolbar {
-  .btn {
-    margin-right: $euiSizeXS;
-  }
-}
-
-.btn-link,
-.btn-link:focus,
-.btn-link:hover {
-  background-color: transparent;
-  color: $euiColorPrimary;
-}
-
-.btn-link:focus,
-.btn-link:hover {
-  text-decoration: underline;
-}
-
-.text-warning {
-  color: $euiColorWarning;
+.euiAccordion__childWrapper {
+  overflow-x: hidden;
 }
 
-.text-danger {
-  color: $euiColorDanger;
-}
 
 .clickable {
   cursor: pointer;
 }
 
 .popover-content {
-  overflow: auto;
+  padding: $euiSize;
 }
 
 .form-control[type='checkbox'],
@@ -47,12 +26,13 @@ button:focus {
   border-bottom: 0px;
 }
 
-.muted {
-  color: $euiColorDarkShade;
-}
-
-.popover {
-  max-width: 2000px !important; // React-Bootstrap popovers are hardcoded to 276px;
+// Temp EUI issue.
+.canvasPalettePicker__swatchesPopover {
+  display: block;
+  
+  .euiPopover__anchor {
+    display: block;
+  }
 }
 
 // fix modal focus index, set to bootstrap values
@@ -80,7 +60,7 @@ html {
   font-size: $euiFontSize;
 }
 
-.canvas__argtype--seriesStyle--color-picker {
+.canvasArgSeries__colorPicker {
   label {
     margin: 0;
   }
@@ -92,13 +72,6 @@ html {
   min-width: 100px;
 }
 
-// this makes the eui file picker smaller and fit better next to the image preview in imageUpload
-.euiFilePicker {
-  .euiFilePicker__promptText {
-    font-size: 0.75rem;
-  }
-}
-
 // TODO: remove when bootstrap is removed
 // overrides code styles set by bootstrap
 code {
diff --git a/public/style/index.scss b/public/style/index.scss
index 57b3e25306b06..cbe79bf1e0456 100644
--- a/public/style/index.scss
+++ b/public/style/index.scss
@@ -25,21 +25,15 @@
 @import '../components/color_palette/color_palette';
 @import '../components/color_picker_mini/color_picker_mini';
 @import '../components/context_menu/context_menu';
-@import '../components/datasource/datasource_preview/datasource_preview';
+@import '../components/datasource/datasource';
 @import '../components/datatable/datatable';
-@import '../components/element_wrapper/element_wrapper';
-@import '../components/es_fields_select/es_fields_select';
-@import '../components/expression/expression';
+@import '../components/element_content/element_content';
 @import '../components/expression_input/suggestion';
-@import '../components/feedback_button/feedback_button';
 @import '../components/font_picker/font_picker';
 @import '../components/fullscreen/fullscreen';
 @import '../components/function_form/function_form';
 @import '../components/loading/loading';
-@import '../components/media_card/media_card';
 @import '../components/navbar/navbar';
-@import '../components/navbar_button/navbar_button';
-@import '../components/navbar_divider/navbar_divider';
 @import '../components/page_manager/page_manager';
 @import '../components/paginate_controls/paginate_controls';
 @import '../components/palette_picker/palette_picker';
@@ -52,19 +46,13 @@
 @import '../components/shape_preview/shape_preview';
 @import '../components/shape_picker_mini/shape_picker_mini';
 @import '../components/sidebar/sidebar';
-@import '../components/text_style_picker/text_style_picker';
-@import '../components/toolbar/toolbar';
 @import '../components/toolbar/tray/tray';
 @import '../components/workpad/workpad';
-@import '../components/workpad_header/workpad_header';
 @import '../components/workpad_loader/workpad_loader';
 @import '../components/workpad_page/workpad_page';
 
 // Canvas expressions
-@import '../expression_types/arg_types/axis_config/axis_config';
-@import '../expression_types/arg_types/font/font';
 @import '../expression_types/arg_types/image_upload/image_upload';
-@import '../expression_types/datasources/esdocs/esdocs';
 
 // Canvas render functions
 @import '../render_functions/advanced_filter/component/advanced_filter';
@@ -74,6 +62,5 @@
 @import '../render_functions/plot/plot';
 @import '../render_functions/reveal_image/reveal_image';
 @import '../render_functions/time_filter/components/datetime_calendar/datetime_calendar';
-@import '../render_functions/time_filter/components/datetime_input/datetime_input';
 @import '../render_functions/time_filter/components/datetime_range_absolute/datetime_range_absolute';
 @import '../render_functions/time_filter/components/time_picker/time_picker';
diff --git a/public/style/main.scss b/public/style/main.scss
index fcb8311392702..c020e0141bf33 100644
--- a/public/style/main.scss
+++ b/public/style/main.scss
@@ -1,22 +1,34 @@
-.canvas {
-  &.canvas__container {
-    display: flex;
-    flex-grow: 1;
-  }
+.canvas.canvasContainer {
+  display: flex;
+  flex-grow: 1;
+}
 
-  .canvas__checkered {
-    background-image: linear-gradient(45deg, #ddd 25%, transparent 25%),
-      linear-gradient(-45deg, #ddd 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, #ddd 75%),
-      linear-gradient(-45deg, transparent 75%, #ddd 75%);
-    background-size: 8px 8px;
-  }
+.canvasCheckered {
+  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%),
+    linear-gradient(-45deg, #ddd 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #ddd 75%),
+    linear-gradient(-45deg, transparent 75%, #ddd 75%);
+  background-size: 8px 8px;
+}
 
-  .canvas__confirm_modal {
-    color: $euiColorFullShade;
-  }
+.canvasTextArea--code {
+  @include euiScrollBar;
+  font-size: $euiFontSize;
+  font-family: monospace;
+  width: 100%;
+  max-width: 100%;
+}
+
+.canvasLoading {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translateY(-50%);
+  transform: translateX(-50%);
+  text-align: center;
 }
 
+// Todo: replace this with EuiToast
 body .window-error {
   position: absolute;
   bottom: 10px;