diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/view.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/view.tsx
index 82f6216062ec61..c9947f24569d7f 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/view.tsx
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/view.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiBadge, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiBadge, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
 import { Location } from 'history';
@@ -112,57 +112,59 @@ export function ErrorGroupDetailsView({ urlParams, location }: Props) {
 
             <EuiSpacer size="s" />
 
-            {showDetails && (
-              <Titles>
-                <EuiText>
-                  {logMessage && (
-                    <Fragment>
-                      <Label>
-                        {i18n.translate(
-                          'xpack.apm.errorGroupDetails.logMessageLabel',
-                          {
-                            defaultMessage: 'Log message'
-                          }
-                        )}
-                      </Label>
-                      <Message>{logMessage}</Message>
-                    </Fragment>
-                  )}
-                  <Label>
-                    {i18n.translate(
-                      'xpack.apm.errorGroupDetails.exceptionMessageLabel',
-                      {
-                        defaultMessage: 'Exception message'
-                      }
+            <EuiPanel>
+              {showDetails && (
+                <Titles>
+                  <EuiText>
+                    {logMessage && (
+                      <Fragment>
+                        <Label>
+                          {i18n.translate(
+                            'xpack.apm.errorGroupDetails.logMessageLabel',
+                            {
+                              defaultMessage: 'Log message'
+                            }
+                          )}
+                        </Label>
+                        <Message>{logMessage}</Message>
+                      </Fragment>
                     )}
-                  </Label>
-                  <Message>{excMessage || NOT_AVAILABLE_LABEL}</Message>
-                  <Label>
-                    {i18n.translate(
-                      'xpack.apm.errorGroupDetails.culpritLabel',
+                    <Label>
+                      {i18n.translate(
+                        'xpack.apm.errorGroupDetails.exceptionMessageLabel',
+                        {
+                          defaultMessage: 'Exception message'
+                        }
+                      )}
+                    </Label>
+                    <Message>{excMessage || NOT_AVAILABLE_LABEL}</Message>
+                    <Label>
+                      {i18n.translate(
+                        'xpack.apm.errorGroupDetails.culpritLabel',
+                        {
+                          defaultMessage: 'Culprit'
+                        }
+                      )}
+                    </Label>
+                    <Culprit>{culprit || NOT_AVAILABLE_LABEL}</Culprit>
+                  </EuiText>
+                </Titles>
+              )}
+              <ErrorDistributionRequest
+                urlParams={urlParams}
+                render={({ data }) => (
+                  <ErrorDistribution
+                    distribution={data}
+                    title={i18n.translate(
+                      'xpack.apm.errorGroupDetails.occurrencesChartLabel',
                       {
-                        defaultMessage: 'Culprit'
+                        defaultMessage: 'Occurrences'
                       }
                     )}
-                  </Label>
-                  <Culprit>{culprit || NOT_AVAILABLE_LABEL}</Culprit>
-                </EuiText>
-              </Titles>
-            )}
-            <ErrorDistributionRequest
-              urlParams={urlParams}
-              render={({ data }) => (
-                <ErrorDistribution
-                  distribution={data}
-                  title={i18n.translate(
-                    'xpack.apm.errorGroupDetails.occurrencesChartLabel',
-                    {
-                      defaultMessage: 'Occurrences'
-                    }
-                  )}
-                />
-              )}
-            />
+                  />
+                )}
+              />
+            </EuiPanel>
             {showDetails && (
               <DetailView
                 errorGroup={errorGroup}
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
index 5d75b208765e83..9e6c40a978741e 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
@@ -4,7 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiSpacer,
+  EuiTitle
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { Location } from 'history';
 import React from 'react';
@@ -27,35 +33,43 @@ const ErrorGroupOverview: React.SFC<ErrorGroupOverviewProps> = ({
     <React.Fragment>
       <EuiFlexGroup>
         <EuiFlexItem>
-          <ErrorDistributionRequest
-            urlParams={urlParams}
-            render={({ data }) => (
-              <ErrorDistribution
-                distribution={data}
-                title={i18n.translate(
-                  'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
-                  {
-                    defaultMessage: 'Error occurrences'
-                  }
-                )}
-              />
-            )}
-          />
+          <EuiPanel>
+            <ErrorDistributionRequest
+              urlParams={urlParams}
+              render={({ data }) => (
+                <ErrorDistribution
+                  distribution={data}
+                  title={i18n.translate(
+                    'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
+                    {
+                      defaultMessage: 'Error occurrences'
+                    }
+                  )}
+                />
+              )}
+            />
+          </EuiPanel>
         </EuiFlexItem>
       </EuiFlexGroup>
 
       <EuiSpacer size="l" />
 
-      <ErrorGroupOverviewRequest
-        urlParams={urlParams}
-        render={({ data }) => (
-          <ErrorGroupList
-            urlParams={urlParams}
-            items={data}
-            location={location}
-          />
-        )}
-      />
+      <EuiPanel>
+        <EuiTitle size="xs">
+          <h3>Errors</h3>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+        <ErrorGroupOverviewRequest
+          urlParams={urlParams}
+          render={({ data }) => (
+            <ErrorGroupList
+              urlParams={urlParams}
+              items={data}
+              location={location}
+            />
+          )}
+        />
+      </EuiPanel>
     </React.Fragment>
   );
 };
diff --git a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceMetrics.tsx b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceMetrics.tsx
index cc9b4f23951656..1ae81b44af12c1 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceMetrics.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceMetrics.tsx
@@ -8,6 +8,7 @@ import {
   EuiFlexGrid,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiPanel,
   EuiSpacer
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -42,28 +43,30 @@ export function ServiceMetrics({ urlParams, location }: ServiceMetricsProps) {
         )}
       />
 
-      <EuiSpacer size="xxl" />
+      <EuiSpacer size="l" />
 
       <EuiFlexGroup>
         <EuiFlexItem>
-          <ErrorDistributionRequest
-            urlParams={urlParams}
-            render={({ data }) => (
-              <ErrorDistribution
-                distribution={data}
-                title={i18n.translate(
-                  'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
-                  {
-                    defaultMessage: 'Error occurrences'
-                  }
-                )}
-              />
-            )}
-          />
+          <EuiPanel>
+            <ErrorDistributionRequest
+              urlParams={urlParams}
+              render={({ data }) => (
+                <ErrorDistribution
+                  distribution={data}
+                  title={i18n.translate(
+                    'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
+                    {
+                      defaultMessage: 'Error occurrences'
+                    }
+                  )}
+                />
+              )}
+            />
+          </EuiPanel>
         </EuiFlexItem>
       </EuiFlexGroup>
 
-      <EuiSpacer size="xxl" />
+      <EuiSpacer size="l" />
 
       <MetricsChartDataRequest
         urlParams={urlParams}
@@ -73,16 +76,20 @@ export function ServiceMetrics({ urlParams, location }: ServiceMetricsProps) {
               render={hoverXHandlers => (
                 <EuiFlexGrid columns={2}>
                   <EuiFlexItem>
-                    <CPUUsageChart
-                      data={data.cpu}
-                      hoverXHandlers={hoverXHandlers}
-                    />
+                    <EuiPanel>
+                      <CPUUsageChart
+                        data={data.cpu}
+                        hoverXHandlers={hoverXHandlers}
+                      />
+                    </EuiPanel>
                   </EuiFlexItem>
                   <EuiFlexItem>
-                    <MemoryUsageChart
-                      data={data.memory}
-                      hoverXHandlers={hoverXHandlers}
-                    />
+                    <EuiPanel>
+                      <MemoryUsageChart
+                        data={data.memory}
+                        hoverXHandlers={hoverXHandlers}
+                      />
+                    </EuiPanel>
                   </EuiFlexItem>
                 </EuiFlexGrid>
               )}
diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.js.snap b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.js.snap
index 2f417980a911a1..a08ba5312ba5c7 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.js.snap
+++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.js.snap
@@ -1,11 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Service Overview -> View should render when historical data is found 1`] = `
-<div>
+<EuiPanel
+  grow={true}
+  hasShadow={false}
+  paddingSize="m"
+>
   <ServiceListRequest
     render={[Function]}
   />
-</div>
+</EuiPanel>
 `;
 
 exports[`Service Overview -> View should render when historical data is found 2`] = `
@@ -18,11 +22,15 @@ Object {
 `;
 
 exports[`Service Overview -> View should render when historical data is not found 1`] = `
-<div>
+<EuiPanel
+  grow={true}
+  hasShadow={false}
+  paddingSize="m"
+>
   <ServiceListRequest
     render={[Function]}
   />
-</div>
+</EuiPanel>
 `;
 
 exports[`Service Overview -> View should render when historical data is not found 2`] = `
diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/view.tsx b/x-pack/plugins/apm/public/components/app/ServiceOverview/view.tsx
index 39b0a23f934b23..1c11b5deff8b42 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceOverview/view.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/view.tsx
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiPanel } from '@elastic/eui';
 import React, { Component } from 'react';
 import { RRRRenderResponse } from 'react-redux-request';
 import { IUrlParams } from 'x-pack/plugins/apm/public/store/urlParams';
@@ -42,7 +43,7 @@ export class ServiceOverview extends Component<Props, State> {
     // to make it easier to test -- mapStateToProps uses the RRR selector so the data
     // is the same either way
     return (
-      <div>
+      <EuiPanel>
         <ServiceListRequest
           urlParams={urlParams}
           render={() => (
@@ -56,7 +57,7 @@ export class ServiceOverview extends Component<Props, State> {
             />
           )}
         />
-      </div>
+      </EuiPanel>
     );
   }
 }
diff --git a/x-pack/plugins/apm/public/components/app/TraceOverview/view.tsx b/x-pack/plugins/apm/public/components/app/TraceOverview/view.tsx
index 34c82f02dca972..f852c720b32f68 100644
--- a/x-pack/plugins/apm/public/components/app/TraceOverview/view.tsx
+++ b/x-pack/plugins/apm/public/components/app/TraceOverview/view.tsx
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { RRRRenderResponse } from 'react-redux-request';
@@ -20,21 +21,23 @@ export function TraceOverview(props: Props) {
   const { urlParams } = props;
 
   return (
-    <TraceListRequest
-      urlParams={urlParams}
-      render={({ data, status }: RRRRenderResponse<TraceListAPIResponse>) => (
-        <TraceList
-          items={data}
-          isLoading={status === 'LOADING'}
-          noItemsMessage={
-            <EmptyMessage
-              heading={i18n.translate('xpack.apm.tracesTable.notFoundLabel', {
-                defaultMessage: 'No traces found for this query'
-              })}
-            />
-          }
-        />
-      )}
-    />
+    <EuiPanel>
+      <TraceListRequest
+        urlParams={urlParams}
+        render={({ data, status }: RRRRenderResponse<TraceListAPIResponse>) => (
+          <TraceList
+            items={data}
+            isLoading={status === 'LOADING'}
+            noItemsMessage={
+              <EmptyMessage
+                heading={i18n.translate('xpack.apm.tracesTable.notFoundLabel', {
+                  defaultMessage: 'No traces found for this query'
+                })}
+              />
+            }
+          />
+        )}
+      />
+    </EuiPanel>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/view.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/view.tsx
index 49ffa75047f4a5..93f149a64d1f5e 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/view.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/view.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { Location } from 'history';
 import React from 'react';
@@ -51,16 +51,18 @@ export function TransactionDetailsView({ urlParams, location }: Props) {
 
       <EuiSpacer />
 
-      <TransactionDistributionRequest
-        urlParams={urlParams}
-        render={({ data }) => (
-          <TransactionDistribution
-            distribution={data}
-            urlParams={urlParams}
-            location={location}
-          />
-        )}
-      />
+      <EuiPanel>
+        <TransactionDistributionRequest
+          urlParams={urlParams}
+          render={({ data }) => (
+            <TransactionDistribution
+              distribution={data}
+              urlParams={urlParams}
+              location={location}
+            />
+          )}
+        />
+      </EuiPanel>
 
       <EuiSpacer size="l" />
       <WaterfallRequest
diff --git a/x-pack/plugins/apm/public/components/app/TransactionOverview/__jest__/__snapshots__/TransactionOverview.test.js.snap b/x-pack/plugins/apm/public/components/app/TransactionOverview/__jest__/__snapshots__/TransactionOverview.test.js.snap
index 943d47f335b96d..d6a37bfaa2078e 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionOverview/__jest__/__snapshots__/TransactionOverview.test.js.snap
+++ b/x-pack/plugins/apm/public/components/app/TransactionOverview/__jest__/__snapshots__/TransactionOverview.test.js.snap
@@ -42,15 +42,32 @@ exports[`TransactionOverviewView should render with type filter controls 1`] = `
   <EuiSpacer
     size="l"
   />
-  <TransactionListRequest
-    render={[Function]}
-    urlParams={
-      Object {
-        "serviceName": "MyServiceName",
-        "transactionType": "test-type",
+  <EuiPanel
+    grow={true}
+    hasShadow={false}
+    paddingSize="m"
+  >
+    <EuiTitle
+      size="xs"
+      textTransform="none"
+    >
+      <h3>
+        Transactions
+      </h3>
+    </EuiTitle>
+    <EuiSpacer
+      size="s"
+    />
+    <TransactionListRequest
+      render={[Function]}
+      urlParams={
+        Object {
+          "serviceName": "MyServiceName",
+          "transactionType": "test-type",
+        }
       }
-    }
-  />
+    />
+  </EuiPanel>
 </Fragment>
 `;
 
@@ -68,14 +85,31 @@ exports[`TransactionOverviewView should render without type filter controls if t
   <EuiSpacer
     size="l"
   />
-  <TransactionListRequest
-    render={[Function]}
-    urlParams={
-      Object {
-        "serviceName": "MyServiceName",
-        "transactionType": "test-type",
+  <EuiPanel
+    grow={true}
+    hasShadow={false}
+    paddingSize="m"
+  >
+    <EuiTitle
+      size="xs"
+      textTransform="none"
+    >
+      <h3>
+        Transactions
+      </h3>
+    </EuiTitle>
+    <EuiSpacer
+      size="s"
+    />
+    <TransactionListRequest
+      render={[Function]}
+      urlParams={
+        Object {
+          "serviceName": "MyServiceName",
+          "transactionType": "test-type",
+        }
       }
-    }
-  />
+    />
+  </EuiPanel>
 </Fragment>
 `;
diff --git a/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx
index 8a5b071cb78370..eb462a9f917c6c 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx
@@ -4,7 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFormRow, EuiSelect, EuiSpacer } from '@elastic/eui';
+import {
+  EuiFormRow,
+  EuiPanel,
+  EuiSelect,
+  EuiSpacer,
+  EuiTitle
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
@@ -76,12 +82,18 @@ export class TransactionOverviewView extends React.Component<
 
         <EuiSpacer size="l" />
 
-        <TransactionListRequest
-          urlParams={urlParams}
-          render={({ data }) => (
-            <TransactionList items={data} serviceName={serviceName} />
-          )}
-        />
+        <EuiPanel>
+          <EuiTitle size="xs">
+            <h3>Transactions</h3>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <TransactionListRequest
+            urlParams={urlParams}
+            render={({ data }) => (
+              <TransactionList items={data} serviceName={serviceName} />
+            )}
+          />
+        </EuiPanel>
       </React.Fragment>
     );
   }
diff --git a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/view.tsx b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/view.tsx
index 2c2b0f279490c8..1c4d79ed1e990d 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/view.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/view.tsx
@@ -9,6 +9,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIconTip,
+  EuiPanel,
   EuiText,
   EuiTitle
 } from '@elastic/eui';
@@ -135,39 +136,43 @@ export class TransactionChartsView extends Component<TransactionChartProps> {
         render={hoverXHandlers => (
           <EuiFlexGrid columns={2}>
             <EuiFlexItem>
-              <ChartWrapper>
-                <EuiFlexGroup justifyContent="spaceBetween">
-                  <EuiFlexItem>
-                    <EuiTitle size="xs">
-                      <span>{responseTimeLabel(transactionType)}</span>
-                    </EuiTitle>
-                  </EuiFlexItem>
-                  {this.renderMLHeader()}
-                </EuiFlexGroup>
-                <CustomPlot
-                  noHits={noHits}
-                  series={responseTimeSeries}
-                  {...hoverXHandlers}
-                  tickFormatY={this.getResponseTimeTickFormatter}
-                  formatTooltipValue={this.getResponseTimeTooltipFormatter}
-                />
-              </ChartWrapper>
+              <EuiPanel>
+                <ChartWrapper>
+                  <EuiFlexGroup justifyContent="spaceBetween">
+                    <EuiFlexItem>
+                      <EuiTitle size="xs">
+                        <span>{responseTimeLabel(transactionType)}</span>
+                      </EuiTitle>
+                    </EuiFlexItem>
+                    {this.renderMLHeader()}
+                  </EuiFlexGroup>
+                  <CustomPlot
+                    noHits={noHits}
+                    series={responseTimeSeries}
+                    {...hoverXHandlers}
+                    tickFormatY={this.getResponseTimeTickFormatter}
+                    formatTooltipValue={this.getResponseTimeTooltipFormatter}
+                  />
+                </ChartWrapper>
+              </EuiPanel>
             </EuiFlexItem>
 
             <EuiFlexItem style={{ flexShrink: 1 }}>
-              <ChartWrapper>
-                <EuiTitle size="xs">
-                  <span>{tpmLabel(transactionType)}</span>
-                </EuiTitle>
-                <CustomPlot
-                  noHits={noHits}
-                  series={tpmSeries}
-                  {...hoverXHandlers}
-                  tickFormatY={this.getTPMFormatter}
-                  formatTooltipValue={this.getTPMTooltipFormatter}
-                  truncateLegends
-                />
-              </ChartWrapper>
+              <EuiPanel>
+                <ChartWrapper>
+                  <EuiTitle size="xs">
+                    <span>{tpmLabel(transactionType)}</span>
+                  </EuiTitle>
+                  <CustomPlot
+                    noHits={noHits}
+                    series={tpmSeries}
+                    {...hoverXHandlers}
+                    tickFormatY={this.getTPMFormatter}
+                    formatTooltipValue={this.getTPMTooltipFormatter}
+                    truncateLegends
+                  />
+                </ChartWrapper>
+              </EuiPanel>
             </EuiFlexItem>
           </EuiFlexGrid>
         )}
diff --git a/x-pack/plugins/apm/public/index.scss b/x-pack/plugins/apm/public/index.scss
index 58587758121e5b..2ad3995d05c032 100644
--- a/x-pack/plugins/apm/public/index.scss
+++ b/x-pack/plugins/apm/public/index.scss
@@ -11,6 +11,5 @@
 //   apmChart__legend-isLoading
 
 .apmReactRoot {
-  background-color: $euiColorEmptyShade;
   overflow-x: auto;
 }