diff --git a/public/components/datasource/datasource_preview/datasource_preview.js b/public/components/datasource/datasource_preview/datasource_preview.js
index 09b3ba2b26e49..0ec49c66cd9ef 100644
--- a/public/components/datasource/datasource_preview/datasource_preview.js
+++ b/public/components/datasource/datasource_preview/datasource_preview.js
@@ -6,27 +6,26 @@ import {
   EuiModalBody,
   EuiModalHeader,
   EuiModalHeaderTitle,
-  EuiSpacer,
   EuiPanel,
+  EuiText,
 } from '@elastic/eui';
 import { Datatable } from '../../datatable';
 
 export const DatasourcePreview = ({ show, done, datatable }) =>
   show ? (
     <EuiOverlayMask>
-      <EuiModal onClose={done} style={{ maxWidth: '1000px' }}>
+      <EuiModal onClose={done}>
         <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>
+        <EuiModalBody className="canvasDatasourcePreview">
+          <EuiText size="s" color="subdued">
+            <p>
+              Shown below are the first 10 rows of your datasource. Click <strong>Save</strong> in
+              the sidebar to use this data.
+            </p>
+          </EuiText>
+          <EuiPanel className="canvasDatasourcePreview__panel">
             <Datatable datatable={datatable} showHeader />
           </EuiPanel>
         </EuiModalBody>
diff --git a/public/components/datasource/datasource_preview/datasource_preview.scss b/public/components/datasource/datasource_preview/datasource_preview.scss
new file mode 100644
index 0000000000000..d26c2a9bb50ea
--- /dev/null
+++ b/public/components/datasource/datasource_preview/datasource_preview.scss
@@ -0,0 +1,9 @@
+.canvasDatasourcePreview {
+  max-width: 80vw;
+  max-height: 60vh;
+  height: 100%;
+
+  .canvasDatasourcePreview__panel {
+    height: calc(100% - #{$euiSize} * 3);
+  }
+}
diff --git a/public/components/datatable/datatable.js b/public/components/datatable/datatable.js
index 5b5af8a105afe..c5f117e64e2fe 100644
--- a/public/components/datatable/datatable.js
+++ b/public/components/datatable/datatable.js
@@ -1,26 +1,31 @@
 import React from 'react';
-import { Table } from 'react-bootstrap';
-import { EuiTextColor } from '@elastic/eui';
+import { EuiIcon, EuiPagination } from '@elastic/eui';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Paginate } from '../paginate';
-import { PaginateControls } from '../paginate_controls';
 
 const getIcon = type => {
   if (type === null) return;
 
+  let icon;
   switch (type) {
     case 'string':
-      return <strong>a</strong>;
+      icon = 'string';
+      break;
     case 'number':
-      return <strong>#</strong>;
+      icon = 'number';
+      break;
     case 'date':
-      return <i className="fa fa-calendar" />;
+      icon = 'calendar';
+      break;
     case 'boolean':
-      return <strong>t</strong>;
+      icon = 'invert';
+      break;
     default:
-      return <strong>?</strong>;
+      icon = 'questionInCircle';
   }
+
+  return <EuiIcon type={icon} color="subdued" />;
 };
 
 const getColumnName = col => (typeof col === 'string' ? col : col.name);
@@ -34,55 +39,38 @@ const getFormattedValue = (val, type) => {
 
 export const Datatable = ({ datatable, perPage, paginate, showHeader }) => (
   <Paginate rows={datatable.rows} perPage={perPage || 10}>
-    {({
-      rows,
-      nextPage,
-      prevPage,
-      setPage,
-      prevPageEnabled,
-      nextPageEnabled,
-      pageNumber,
-      totalPages,
-    }) => (
+    {({ rows, setPage, pageNumber, totalPages }) => (
       <div className="canvasDataTable">
-        <div style={{ flexGrow: 1 }}>
-          <Table condensed>
+        <div className="canvasDataTable__tableWrapper">
+          <table className="canvasDataTable__table">
             {!showHeader ? null : (
-              <thead>
-                <tr>
+              <thead className="canvasDataTable__thead">
+                <tr className="canvasDataTable__tr">
                   {datatable.columns.map(col => (
-                    <th key={`header-${getColumnName(col)}`}>
-                      {getColumnName(col)}{' '}
-                      <EuiTextColor color="subdued">{getIcon(getColumnType(col))}</EuiTextColor>
+                    <th key={`header-${getColumnName(col)}`} className="canvasDataTable__th">
+                      {getColumnName(col)}&nbsp;{getIcon(getColumnType(col))}
                     </th>
                   ))}
                 </tr>
               </thead>
             )}
-            <tbody>
+            <tbody className="canvasDataTable__tbody">
               {rows.map((row, i) => (
-                <tr key={i}>
+                <tr key={i} className="canvasDataTable__tr">
                   {datatable.columns.map(col => (
-                    <td key={`row-${i}-${getColumnName(col)}`}>
+                    <td key={`row-${i}-${getColumnName(col)}`} className="canvasDataTable__td">
                       {getFormattedValue(row[getColumnName(col)], getColumnType(col))}
                     </td>
                   ))}
                 </tr>
               ))}
             </tbody>
-          </Table>
+          </table>
         </div>
-
         {paginate && (
-          <PaginateControls
-            prevPage={prevPage}
-            prevPageEnabled={prevPageEnabled}
-            setPage={setPage}
-            pageNumber={pageNumber}
-            totalPages={totalPages}
-            nextPage={nextPage}
-            nextPageEnabled={nextPageEnabled}
-          />
+          <div className="canvasDataTable__footer">
+            <EuiPagination pageCount={totalPages} activePage={pageNumber} onPageClick={setPage} />
+          </div>
         )}
       </div>
     )}
diff --git a/public/components/datatable/datatable.scss b/public/components/datatable/datatable.scss
index 548bba21845b3..1a34d59c3291e 100644
--- a/public/components/datatable/datatable.scss
+++ b/public/components/datatable/datatable.scss
@@ -1,31 +1,46 @@
 .canvasDataTable {
+  width: 100%;
   height: 100%;
-  overflow: auto;
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
 
-  td, th {
-    border-top: 0px !important;
-    border-bottom: 0px !important;
-  }
+  .canvasDataTable__tableWrapper {
+    @include euiScrollBar;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
 
-  th {
-    white-space: nowrap;
+    // removes white square in the scrollbar corner
+    &::-webkit-scrollbar-corner {
+      background: transparent;
+    }
   }
 
-  // This is a bootstrap overwrite
-  .controls--perpage {
-    padding: $euiSizeXS $euiSize;
-    text-align: right;
+  .canvasDataTable__footer {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+  }
 
-    label {
-      color: $euiColorDarkestShade;
-      font-weight: bold;
+  .canvasDataTable__tbody {
+    .canvasDataTable__tr:hover {
+      background-color: transparentize($euiColorLightShade, 0.5);
     }
+  }
 
-    select {
-      width: 60px;
-      margin-left: $euiSizeS;
-    }
+  .canvasDataTable__table {
+    min-width: 100%;
+  }
+
+  .canvasDataTable__th,
+  .canvasDataTable__td {
+    text-align: left;
+    padding: $euiSizeS;
+  }
+
+  .canvasDataTable__th {
+    white-space: nowrap;
+    font-weight: bold;
   }
 }
diff --git a/public/components/paginate/index.js b/public/components/paginate/index.js
index 1bae4e54bca2f..7d1c216742a69 100644
--- a/public/components/paginate/index.js
+++ b/public/components/paginate/index.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { compose, withState, withProps, withHandlers } from 'recompose';
+import { compose, withState, withProps, withHandlers, lifecycle } from 'recompose';
 import { Paginate as Component } from './paginate';
 
 export const Paginate = compose(
@@ -9,16 +9,16 @@ export const Paginate = compose(
   })),
   withState('currentPage', 'setPage', ({ startPage, totalPages }) => {
     const maxPage = totalPages - 1;
-    if (startPage && startPage > maxPage) return maxPage;
-    if (startPage) return startPage;
+    if (startPage) return Math.min(startPage, maxPage);
     return 0;
   }),
   withProps(({ rows, totalPages, currentPage, perPage }) => {
+    const maxPage = totalPages - 1;
     const start = currentPage * perPage;
     const end = currentPage === 0 ? perPage : perPage * (currentPage + 1);
     return {
-      pageNumber: currentPage + 1,
-      nextPageEnabled: currentPage < totalPages - 1,
+      pageNumber: currentPage,
+      nextPageEnabled: currentPage < maxPage,
       prevPageEnabled: currentPage > 0,
       partialRows: rows.slice(start, end),
     };
@@ -28,6 +28,13 @@ export const Paginate = compose(
       nextPageEnabled && setPage(currentPage + 1),
     prevPage: ({ currentPage, prevPageEnabled, setPage }) => () =>
       prevPageEnabled && setPage(currentPage - 1),
+  }),
+  lifecycle({
+    componentDidUpdate(prevProps) {
+      if (prevProps.perPage !== this.props.perPage) {
+        this.props.setPage(0);
+      }
+    },
   })
 )(Component);
 
diff --git a/public/components/paginate/paginate.js b/public/components/paginate/paginate.js
index fa93955a956ae..d257415701393 100644
--- a/public/components/paginate/paginate.js
+++ b/public/components/paginate/paginate.js
@@ -8,7 +8,7 @@ export const Paginate = props => {
     totalPages: props.totalPages,
     nextPageEnabled: props.nextPageEnabled,
     prevPageEnabled: props.prevPageEnabled,
-    setPage: num => props.setPage(num - 1),
+    setPage: num => props.setPage(num),
     nextPage: props.nextPage,
     prevPage: props.prevPage,
   });
diff --git a/public/components/paginate_controls/index.js b/public/components/paginate_controls/index.js
deleted file mode 100644
index 472ec5f6a6243..0000000000000
--- a/public/components/paginate_controls/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { PaginateControls } from './paginate_controls';
diff --git a/public/components/paginate_controls/paginate_controls.js b/public/components/paginate_controls/paginate_controls.js
deleted file mode 100644
index 8b26fa874956e..0000000000000
--- a/public/components/paginate_controls/paginate_controls.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const showPages = ({ setPage, pageNumber, totalPages }) => {
-  const pages = [];
-
-  for (let i = 1; i <= totalPages; i++) {
-    if (i === pageNumber)
-      pages.push(
-        <span key={`pageNumber${i}`} className="canvasPaginate__number active">
-          {i}
-        </span>
-      );
-    else {
-      pages.push(
-        <button
-          key={`pageNumber${i}`}
-          className="btn btn-link canvasPaginate__number"
-          onClick={() => setPage(i)}
-        >
-          {i}
-        </button>
-      );
-    }
-  }
-
-  return pages;
-};
-
-export const PaginateControls = ({
-  prevPage,
-  prevPageEnabled,
-  setPage,
-  pageNumber,
-  totalPages,
-  nextPage,
-  nextPageEnabled,
-}) => (
-  <div className="canvasPaginate__controls">
-    {prevPageEnabled && (
-      <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 canvasPaginate__nav" onClick={nextPage}>
-        <i className="fa fa-angle-right" />
-      </button>
-    )}
-  </div>
-);
-
-PaginateControls.propTypes = {
-  pageNumber: PropTypes.number.isRequired,
-  totalPages: PropTypes.number.isRequired,
-  setPage: PropTypes.func.isRequired,
-  prevPage: PropTypes.func.isRequired,
-  nextPage: PropTypes.func.isRequired,
-  prevPageEnabled: PropTypes.bool.isRequired,
-  nextPageEnabled: PropTypes.bool.isRequired,
-};
diff --git a/public/components/paginate_controls/paginate_controls.scss b/public/components/paginate_controls/paginate_controls.scss
deleted file mode 100644
index 5d086df636307..0000000000000
--- a/public/components/paginate_controls/paginate_controls.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.canvasPaginate__controls {
-  overflow: hidden;
-  text-align: center;
-
-  .canvasPaginate__nav,
-  .canvasPaginate__number {
-    padding: ($euiSizeXS / 2);
-    vertical-align: middle;
-  }
-}
diff --git a/public/render_functions/advanced_filter/advanced_filter.js b/public/render_functions/advanced_filter/advanced_filter.js
index 53cef388622d6..80f703bf4f747 100644
--- a/public/render_functions/advanced_filter/advanced_filter.js
+++ b/public/render_functions/advanced_filter/advanced_filter.js
@@ -7,6 +7,7 @@ export const advancedFilter = () => ({
   displayName: 'Advanced Filter',
   help: 'Render a Canvas filter expression',
   reuseDomNode: true,
+  height: 50,
   render(domNode, config, handlers) {
     ReactDOM.render(
       <AdvancedFilter commit={handlers.setFilter} filter={handlers.getFilter()} />,
diff --git a/public/render_functions/advanced_filter/component/advanced_filter.js b/public/render_functions/advanced_filter/component/advanced_filter.js
index 12dc8b864a49c..bf55a37a1199c 100644
--- a/public/render_functions/advanced_filter/component/advanced_filter.js
+++ b/public/render_functions/advanced_filter/component/advanced_filter.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormControl, Button } from 'react-bootstrap';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 export const AdvancedFilter = ({ value, onChange, commit }) => (
   <form
@@ -10,14 +10,26 @@ export const AdvancedFilter = ({ value, onChange, commit }) => (
     }}
     className="canvasAdvancedFilter"
   >
-    <FormControl
-      className="canvasAdvancedFilter__input"
-      type="text"
-      placeholder="Enter text"
-      value={value}
-      onChange={e => onChange(e.target.value)}
-    />
-    <Button onClick={() => commit(value)}>Go</Button>
+    <EuiFlexGroup gutterSize="xs">
+      <EuiFlexItem>
+        <input
+          type="text"
+          className="canvasAdvancedFilter__input"
+          placeholder="Enter filter expression"
+          value={value}
+          onChange={e => onChange(e.target.value)}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <button
+          className="canvasAdvancedFilter__button"
+          type="submit"
+          onClick={() => commit(value)}
+        >
+          Apply
+        </button>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   </form>
 );
 
diff --git a/public/render_functions/advanced_filter/component/advanced_filter.scss b/public/render_functions/advanced_filter/component/advanced_filter.scss
index 140a052bbdf54..2a6950543730f 100644
--- a/public/render_functions/advanced_filter/component/advanced_filter.scss
+++ b/public/render_functions/advanced_filter/component/advanced_filter.scss
@@ -1,8 +1,32 @@
 .canvasAdvancedFilter {
-  display: flex;
+  width: 100%;
+  font-size: inherit;
 
   .canvasAdvancedFilter__input {
+    background-color: $euiColorEmptyShade;
     width: 100%;
-    margin-right: $euiSizeS;
+    padding: $euiSizeXS $euiSize;
+    border: $euiBorderThin;
+    border-radius: $euiBorderRadius;
+    font-size: inherit;
+    line-height: 19px;
+    font-family: monospace;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .canvasAdvancedFilter__button {
+    width: 100%;
+    padding: $euiSizeXS $euiSizeS;
+    border: $euiBorderThin;
+    border-radius: $euiBorderRadius;
+    background-color: $euiColorEmptyShade;
+    font-size: inherit;
+
+    &:hover {
+      background-color: $euiColorLightestShade;
+    }
   }
 }
diff --git a/public/render_functions/dropdown_filter/component/dropdown_filter.js b/public/render_functions/dropdown_filter/component/dropdown_filter.js
index ce21bc0da34ac..2493571f70f35 100644
--- a/public/render_functions/dropdown_filter/component/dropdown_filter.js
+++ b/public/render_functions/dropdown_filter/component/dropdown_filter.js
@@ -1,34 +1,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormControl } from 'react-bootstrap';
+import { EuiIcon } from '@elastic/eui';
 
 export const DropdownFilter = ({ value, onChange, commit, choices }) => {
+  const options = [{ value: '%%CANVAS_MATCH_ALL%%', text: '-- ANY --' }];
+
+  choices.forEach(value => options.push({ value: value, text: value }));
+
   return (
-    <form
-      onSubmit={e => {
-        e.preventDefault();
-        commit(value);
-      }}
-      className="canvasDropdownFilter"
-    >
-      <FormControl
-        className="canvasDropdownFilter--input"
-        componentClass="select"
-        placeholder="select"
+    <div className="canvasDropdownFilter">
+      <select
+        className="canvasDropdownFilter__select"
         value={value}
         onChange={e => {
           onChange(e.target.value);
           commit(e.target.value);
         }}
       >
-        <option value="%%CANVAS_MATCH_ALL%%">-- ANY --</option>
-        {choices.map(value => (
+        {options.map(({ value, text }) => (
           <option key={value} value={value}>
-            {value}
+            {text}
           </option>
         ))}
-      </FormControl>
-    </form>
+      </select>
+      <EuiIcon className="canvasDropdownFilter__icon" type="arrowDown" />
+    </div>
   );
 };
 
diff --git a/public/render_functions/dropdown_filter/component/dropdown_filter.scss b/public/render_functions/dropdown_filter/component/dropdown_filter.scss
index a28c207aa3b18..df37d700408e2 100644
--- a/public/render_functions/dropdown_filter/component/dropdown_filter.scss
+++ b/public/render_functions/dropdown_filter/component/dropdown_filter.scss
@@ -1,8 +1,31 @@
 .canvasDropdownFilter {
-  display: flex;
+  width: 100%;
+  font-size: inherit;
 
-  .canvasDropdownFilter--input {
+  .canvasDropdownFilter__select {
+    background-color: $euiColorEmptyShade;
     width: 100%;
-    margin-right: $euiSizeS;
+    padding: $euiSizeXS $euiSize;
+    border: $euiBorderThin;
+    border-radius: $euiBorderRadius;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    font-size: inherit;
+
+    &:after {
+      display: none;
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .canvasDropdownFilter__icon {
+    position: absolute;
+    right: $euiSizeS;
+    top: $euiSizeS;
+    pointer-events: none;
   }
 }
diff --git a/public/render_functions/dropdown_filter/index.js b/public/render_functions/dropdown_filter/index.js
index 0de863499e00b..d0a5cd0b14390 100644
--- a/public/render_functions/dropdown_filter/index.js
+++ b/public/render_functions/dropdown_filter/index.js
@@ -9,6 +9,7 @@ export const dropdownFilter = () => ({
   displayName: 'Dropdown Filter',
   help: 'A dropdown from which you can select values for an "exactly" filter',
   reuseDomNode: true,
+  height: 50,
   render(domNode, config, handlers) {
     let value = '%%CANVAS_MATCH_ALL%%';
     if (handlers.getFilter() !== '') {
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 3d152d7b78e58..d67e4cf7a79de 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
@@ -1,18 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Datetime from 'react-datetime';
-import 'react-datetime/css/react-datetime.css';
 import dateMath from '@elastic/datemath';
+import { EuiDatePicker } from '@elastic/eui';
 import { DatetimeInput } from '../datetime_input';
 
-export const DatetimeCalendar = ({ value, onSelect }) => (
+export const DatetimeCalendar = ({ value, onSelect, startDate, endDate }) => (
   <div className="canvasDateTimeCal">
     <DatetimeInput moment={dateMath.parse(value)} setMoment={onSelect} />
-    <Datetime value={value} input={false} onChange={onSelect} />
+    <EuiDatePicker
+      inline
+      showTimeSelect
+      shadow={false}
+      selected={dateMath.parse(value)}
+      onChange={onSelect}
+      shouldCloseOnSelect={false}
+      startDate={startDate}
+      endDate={endDate}
+    />
   </div>
 );
 
 DatetimeCalendar.propTypes = {
   value: PropTypes.object,
   onSelect: PropTypes.func, // Called with a moment
+  startDate: PropTypes.object, // a moment
+  endDate: PropTypes.object, // a moment
 };
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 fee0bf40fc9e5..6cdec9f3cee77 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,5 +1,5 @@
 .canvasDateTimeCal {
-  tfoot {
-    display: none;
-  }
+  display: inline-grid;
+  height: 100%;
+  border: $euiBorderThin;
 }
diff --git a/public/render_functions/time_filter/components/datetime_input/datetime_input.js b/public/render_functions/time_filter/components/datetime_input/datetime_input.js
index d146992a626e3..e0bf017fb7cd5 100644
--- a/public/render_functions/time_filter/components/datetime_input/datetime_input.js
+++ b/public/render_functions/time_filter/components/datetime_input/datetime_input.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormControl } from 'react-bootstrap';
+import { EuiFieldText } from '@elastic/eui';
 import moment from 'moment';
 
 export const DatetimeInput = ({ strValue, setStrValue, setMoment, valid, setValid }) => {
@@ -16,11 +16,11 @@ export const DatetimeInput = ({ strValue, setStrValue, setMoment, valid, setVali
   }
 
   return (
-    <FormControl
-      spellCheck={false}
+    <EuiFieldText
+      compressed
       value={strValue}
       onChange={check}
-      className={valid ? '' : 'has-error'}
+      isInvalid={!valid}
       style={{ textAlign: 'center' }}
     />
   );
diff --git a/public/render_functions/time_filter/components/datetime_quick_list/datetime_quick_list.js b/public/render_functions/time_filter/components/datetime_quick_list/datetime_quick_list.js
index 4d52134d9236d..ab1af27aedff1 100644
--- a/public/render_functions/time_filter/components/datetime_quick_list/datetime_quick_list.js
+++ b/public/render_functions/time_filter/components/datetime_quick_list/datetime_quick_list.js
@@ -1,20 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { EuiButton, EuiButtonEmpty } from '@elastic/eui';
 import 'react-datetime/css/react-datetime.css';
 
-export const DatetimeQuickList = ({ from, to, ranges, onSelect }) => (
-  <div>
-    <ul className="nav nav-pills nav-stacked">
-      {ranges.map((range, i) => (
-        <li
-          className={from === range.from && to === range.to ? 'active' : null}
-          key={i}
-          onClick={() => onSelect(range.from, range.to)}
-        >
-          <a>{range.display}</a>
-        </li>
-      ))}
-    </ul>
+export const DatetimeQuickList = ({ from, to, ranges, onSelect, children }) => (
+  <div style={{ display: 'grid', alignItems: 'center' }}>
+    {ranges.map(
+      (range, i) =>
+        from === range.from && to === range.to ? (
+          <EuiButton size="s" fill key={i} onClick={() => onSelect(range.from, range.to)}>
+            {range.display}
+          </EuiButton>
+        ) : (
+          <EuiButtonEmpty size="s" key={i} onClick={() => onSelect(range.from, range.to)}>
+            {range.display}
+          </EuiButtonEmpty>
+        )
+    )}
+    {children}
   </div>
 );
 
@@ -23,4 +26,5 @@ DatetimeQuickList.propTypes = {
   to: PropTypes.string,
   ranges: PropTypes.array,
   onSelect: PropTypes.func,
+  children: PropTypes.node,
 };
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 b73a09c8abcf1..f8fa0cf957c88 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
@@ -5,10 +5,20 @@ import { DatetimeCalendar } from '../datetime_calendar';
 export const DatetimeRangeAbsolute = ({ from, to, onSelect }) => (
   <div className="canvasDateTimeRangeAbsolute">
     <div>
-      <DatetimeCalendar value={from} onSelect={val => onSelect(val, to)} />
+      <DatetimeCalendar
+        value={from}
+        startDate={from}
+        endDate={to}
+        onSelect={val => onSelect(val, to)}
+      />
     </div>
     <div>
-      <DatetimeCalendar value={to} onSelect={val => onSelect(from, val)} />
+      <DatetimeCalendar
+        value={to}
+        startDate={from}
+        endDate={to}
+        onSelect={val => onSelect(from, val)}
+      />
     </div>
   </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 d74f558e8d48e..706bd90ad1edf 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,16 +1,7 @@
 .canvasDateTimeRangeAbsolute {
   display: flex;
 
-  > * {
-    border: $euiBorderThin;
-    border-radius: $euiBorderThin;
-  }
-
   > div:not(:last-child) {
     margin-right: $euiSizeS;
   }
-
-  .rdtPicker {
-    border: none;
-  }
 }
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 032c1378e9786..e1566eeacce19 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
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import dateMath from '@elastic/datemath';
-import { Button } from 'react-bootstrap';
+import { EuiButton } from '@elastic/eui';
 import moment from 'moment';
 import { DatetimeRangeAbsolute } from '../datetime_range_absolute';
 import { DatetimeQuickList } from '../datetime_quick_list';
@@ -30,15 +30,10 @@ export const TimePicker = ({ range, setRange, dirty, setDirty, onSelect }) => {
         to={dateMath.parse(to)}
         onSelect={absoluteSelect}
       />
-      <div>
-        <DatetimeQuickList
-          from={range.from}
-          to={range.to}
-          ranges={quickRanges}
-          onSelect={onSelect}
-        />
-        <Button
-          bsStyle="success"
+      <DatetimeQuickList from={range.from} to={range.to} ranges={quickRanges} onSelect={onSelect}>
+        <EuiButton
+          fill
+          size="s"
           disabled={!dirty}
           className="canvasTimePicker__apply"
           onClick={() => {
@@ -47,8 +42,8 @@ export const TimePicker = ({ range, setRange, dirty, setDirty, onSelect }) => {
           }}
         >
           Apply
-        </Button>
-      </div>
+        </EuiButton>
+      </DatetimeQuickList>
     </div>
   );
 };
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 5e6165d49b851..889db1fc8165d 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
@@ -4,9 +4,4 @@
   > div:not(:last-child) {
     margin-right: $euiSizeS;
   }
-
-  .canvasTimePicker__apply {
-    margin-top: $euiSizeXS;
-    width: 100%;
-  }
 }
diff --git a/public/render_functions/time_filter/components/time_picker_mini/time_picker_mini.js b/public/render_functions/time_filter/components/time_picker_mini/time_picker_mini.js
index 5bf5d27a5f078..38d20bf4e9c7b 100644
--- a/public/render_functions/time_filter/components/time_picker_mini/time_picker_mini.js
+++ b/public/render_functions/time_filter/components/time_picker_mini/time_picker_mini.js
@@ -1,24 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Popover, OverlayTrigger } from 'react-bootstrap';
+import { Popover } from '../../../../components/popover';
 import { PrettyDuration } from '../pretty_duration';
 import { TimePicker } from '../time_picker';
 
 export const TimePickerMini = ({ from, to, onSelect }) => {
-  const picker = (
-    <Popover id="timefilter-popover-trigger-click">
-      <div className="canvas">
-        <TimePicker from={from} to={to} onSelect={onSelect} />
-      </div>
-    </Popover>
+  const button = handleClick => (
+    <button className="canvasTimePickerMini__button" onClick={handleClick}>
+      <PrettyDuration from={from} to={to} />
+    </button>
   );
 
   return (
-    <OverlayTrigger rootClose overlay={picker} placement={'bottom'} trigger="click">
-      <Button style={{ width: '100%' }}>
-        <PrettyDuration from={from} to={to} />
-      </Button>
-    </OverlayTrigger>
+    <Popover id="timefilter-popover-trigger-click" className="canvasTimePickerMini" button={button}>
+      {() => <TimePicker from={from} to={to} onSelect={onSelect} />}
+    </Popover>
   );
 };
 
diff --git a/public/render_functions/time_filter/components/time_picker_mini/time_picker_mini.scss b/public/render_functions/time_filter/components/time_picker_mini/time_picker_mini.scss
new file mode 100644
index 0000000000000..557966537a030
--- /dev/null
+++ b/public/render_functions/time_filter/components/time_picker_mini/time_picker_mini.scss
@@ -0,0 +1,19 @@
+.canvasTimePickerMini {
+  width: 100%;
+
+  .canvasTimePickerMini__button {
+    width: 100%;
+    padding: $euiSizeXS;
+    border: $euiBorderThin;
+    border-radius: $euiBorderRadius;
+    background-color: $euiColorEmptyShade;
+
+    &:hover {
+      background-color: $euiColorLightestShade;
+    }
+  }
+
+  .euiPopover__anchor {
+    width: 100%;
+  }
+}
diff --git a/public/style/index.scss b/public/style/index.scss
index e682838a4f811..aa23a56d2d495 100644
--- a/public/style/index.scss
+++ b/public/style/index.scss
@@ -26,6 +26,7 @@
 @import '../components/color_picker_mini/color_picker_mini';
 @import '../components/context_menu/context_menu';
 @import '../components/datasource/datasource';
+@import '../components/datasource/datasource_preview/datasource_preview';
 @import '../components/datatable/datatable';
 @import '../components/element_content/element_content';
 @import '../components/expression_input/suggestion';
@@ -36,7 +37,6 @@
 @import '../components/loading/loading';
 @import '../components/navbar/navbar';
 @import '../components/page_manager/page_manager';
-@import '../components/paginate_controls/paginate_controls';
 @import '../components/palette_picker/palette_picker';
 @import '../components/palette_swatch/palette_swatch';
 @import '../components/positionable/positionable';
@@ -64,3 +64,4 @@
 @import '../render_functions/time_filter/components/datetime_calendar/datetime_calendar';
 @import '../render_functions/time_filter/components/datetime_range_absolute/datetime_range_absolute';
 @import '../render_functions/time_filter/components/time_picker/time_picker';
+@import '../render_functions/time_filter/components/time_picker_mini/time_picker_mini';