diff --git a/src/plugins/kibana_react/public/app_links/redirect_app_link.tsx b/src/plugins/kibana_react/public/app_links/redirect_app_link.tsx
index d9ea8be9f5cdd8..744a186a201cad 100644
--- a/src/plugins/kibana_react/public/app_links/redirect_app_link.tsx
+++ b/src/plugins/kibana_react/public/app_links/redirect_app_link.tsx
@@ -12,7 +12,7 @@ import useObservable from 'react-use/lib/useObservable';
 import { ApplicationStart } from 'src/core/public';
 import { createNavigateToUrlClickHandler } from './click_handler';
 
-interface RedirectCrossAppLinksProps {
+interface RedirectCrossAppLinksProps extends React.HTMLAttributes<HTMLDivElement> {
   application: ApplicationStart;
   className?: string;
   'data-test-subj'?: string;
diff --git a/x-pack/plugins/apm/public/application/index.tsx b/x-pack/plugins/apm/public/application/index.tsx
index d5d77eea8c9c0f..6924a8b9161b22 100644
--- a/x-pack/plugins/apm/public/application/index.tsx
+++ b/x-pack/plugins/apm/public/application/index.tsx
@@ -10,7 +10,11 @@ import ReactDOM from 'react-dom';
 import 'react-vis/dist/style.css';
 import type { ObservabilityRuleTypeRegistry } from '../../../observability/public';
 import { ConfigSchema } from '../';
-import { AppMountParameters, CoreStart } from '../../../../../src/core/public';
+import {
+  AppMountParameters,
+  CoreStart,
+  APP_WRAPPER_CLASS,
+} from '../../../../../src/core/public';
 import { ApmPluginSetupDeps, ApmPluginStartDeps } from '../plugin';
 import { createCallApmApi } from '../services/rest/createCallApmApi';
 import { createStaticIndexPattern } from '../services/rest/index_pattern';
@@ -58,6 +62,9 @@ export const renderApp = ({
     console.log('Error creating static index pattern', e);
   });
 
+  // add .kbnAppWrappers class to root element
+  element.classList.add(APP_WRAPPER_CLASS);
+
   ReactDOM.render(
     <ApmAppRoot
       apmPluginContextValue={apmPluginContextValue}
diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx
index 78f02c5a667016..e4a0ef3ef09f1b 100644
--- a/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiPanel } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useEffect } from 'react';
 import { toMountPoint } from '../../../../../../../src/plugins/kibana_react/public';
@@ -127,17 +127,15 @@ export function ServiceInventory() {
           </EuiFlexItem>
         )}
         <EuiFlexItem>
-          <EuiPanel hasShadow={false}>
-            <ServiceList
-              items={servicesData.items}
-              noItemsMessage={
-                <NoServicesMessage
-                  historicalDataFound={servicesData.hasHistoricalData}
-                  status={servicesStatus}
-                />
-              }
-            />
-          </EuiPanel>
+          <ServiceList
+            items={servicesData.items}
+            noItemsMessage={
+              <NoServicesMessage
+                historicalDataFound={servicesData.hasHistoricalData}
+                status={servicesStatus}
+              />
+            }
+          />
         </EuiFlexItem>
       </EuiFlexGroup>
     </>
diff --git a/x-pack/plugins/apm/public/components/app/service_map/index.tsx b/x-pack/plugins/apm/public/components/app/service_map/index.tsx
index 714228d58f9620..df8438c5c80a4a 100644
--- a/x-pack/plugins/apm/public/components/app/service_map/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_map/index.tsx
@@ -5,7 +5,12 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingSpinner,
+  EuiPanel,
+} from '@elastic/eui';
 import React, { PropsWithChildren, ReactNode } from 'react';
 import { isActivePlatinumLicense } from '../../../../common/license_check';
 import { useTrackPageview } from '../../../../../observability/public';
@@ -97,6 +102,10 @@ export function ServiceMap({
 
   const { ref, height } = useRefDimensions();
 
+  // Temporary hack to work around bottom padding introduced by EuiPage
+  const PADDING_BOTTOM = 24;
+  const heightWithPadding = height - PADDING_BOTTOM;
+
   useTrackPageview({ app: 'apm', path: 'service_map' });
   useTrackPageview({ app: 'apm', path: 'service_map', delay: 15000 });
 
@@ -137,20 +146,25 @@ export function ServiceMap({
   return (
     <>
       <SearchBar showKueryBar={false} />
-
-      <div data-test-subj="ServiceMap" style={{ height }} ref={ref}>
-        <Cytoscape
-          elements={data.elements}
-          height={height}
-          serviceName={serviceName}
-          style={getCytoscapeDivStyle(theme, status)}
+      <EuiPanel paddingSize="none">
+        <div
+          data-test-subj="ServiceMap"
+          style={{ height: heightWithPadding }}
+          ref={ref}
         >
-          <Controls />
-          {serviceName && <EmptyBanner />}
-          {status === FETCH_STATUS.LOADING && <LoadingSpinner />}
-          <Popover focusedServiceName={serviceName} />
-        </Cytoscape>
-      </div>
+          <Cytoscape
+            elements={data.elements}
+            height={heightWithPadding}
+            serviceName={serviceName}
+            style={getCytoscapeDivStyle(theme, status)}
+          >
+            <Controls />
+            {serviceName && <EmptyBanner />}
+            {status === FETCH_STATUS.LOADING && <LoadingSpinner />}
+            <Popover focusedServiceName={serviceName} />
+          </Cytoscape>
+        </div>
+      </EuiPanel>
     </>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx b/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx
index 20b78b90e03781..5528bdaa40c417 100644
--- a/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx
@@ -39,13 +39,6 @@ const Truncate = euiStyled.span`
   ${truncate(px(unit * 12))}
 `;
 
-const MetadataFlexGroup = euiStyled(EuiFlexGroup)`
-  border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
-  margin-bottom: ${({ theme }) => theme.eui.paddingSizes.m};
-  padding: ${({ theme }) =>
-    `${theme.eui.paddingSizes.m} 0 0 ${theme.eui.paddingSizes.m}`};
-`;
-
 interface ServiceNodeMetricsProps {
   serviceName: string;
   serviceNodeName: string;
@@ -117,55 +110,60 @@ export function ServiceNodeMetrics({
           />
         </EuiCallOut>
       ) : (
-        <MetadataFlexGroup gutterSize="xl">
-          <EuiFlexItem grow={false}>
-            <EuiStat
-              titleSize="s"
-              description={i18n.translate(
-                'xpack.apm.serviceNodeMetrics.serviceName',
-                {
-                  defaultMessage: 'Service name',
+        <EuiPanel hasShadow={false}>
+          <EuiFlexGroup gutterSize="xl">
+            <EuiFlexItem grow={false}>
+              <EuiStat
+                titleSize="s"
+                description={i18n.translate(
+                  'xpack.apm.serviceNodeMetrics.serviceName',
+                  {
+                    defaultMessage: 'Service name',
+                  }
+                )}
+                title={
+                  <EuiToolTip content={serviceName}>
+                    <Truncate>{serviceName}</Truncate>
+                  </EuiToolTip>
+                }
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiStat
+                titleSize="s"
+                isLoading={isLoading}
+                description={i18n.translate(
+                  'xpack.apm.serviceNodeMetrics.host',
+                  {
+                    defaultMessage: 'Host',
+                  }
+                )}
+                title={
+                  <EuiToolTip content={host}>
+                    <Truncate>{host}</Truncate>
+                  </EuiToolTip>
                 }
-              )}
-              title={
-                <EuiToolTip content={serviceName}>
-                  <Truncate>{serviceName}</Truncate>
-                </EuiToolTip>
-              }
-            />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiStat
-              titleSize="s"
-              isLoading={isLoading}
-              description={i18n.translate('xpack.apm.serviceNodeMetrics.host', {
-                defaultMessage: 'Host',
-              })}
-              title={
-                <EuiToolTip content={host}>
-                  <Truncate>{host}</Truncate>
-                </EuiToolTip>
-              }
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiStat
-              titleSize="s"
-              isLoading={isLoading}
-              description={i18n.translate(
-                'xpack.apm.serviceNodeMetrics.containerId',
-                {
-                  defaultMessage: 'Container ID',
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiStat
+                titleSize="s"
+                isLoading={isLoading}
+                description={i18n.translate(
+                  'xpack.apm.serviceNodeMetrics.containerId',
+                  {
+                    defaultMessage: 'Container ID',
+                  }
+                )}
+                title={
+                  <EuiToolTip content={containerId}>
+                    <Truncate>{containerId}</Truncate>
+                  </EuiToolTip>
                 }
-              )}
-              title={
-                <EuiToolTip content={containerId}>
-                  <Truncate>{containerId}</Truncate>
-                </EuiToolTip>
-              }
-            />
-          </EuiFlexItem>
-        </MetadataFlexGroup>
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPanel>
       )}
 
       {agentName && (
diff --git a/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx b/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx
index 69e5ea5a78ea12..1a432f90f1e3a4 100644
--- a/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx
@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiPanel, EuiToolTip } from '@elastic/eui';
+import { EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
@@ -142,18 +142,16 @@ function ServiceNodeOverview({ serviceName }: ServiceNodeOverviewProps) {
   ];
 
   return (
-    <EuiPanel hasShadow={false}>
-      <ManagedTable
-        noItemsMessage={i18n.translate('xpack.apm.jvmsTable.noJvmsLabel', {
-          defaultMessage: 'No JVMs were found',
-        })}
-        items={items}
-        columns={columns}
-        initialPageSize={INITIAL_PAGE_SIZE}
-        initialSortField={INITIAL_SORT_FIELD}
-        initialSortDirection={INITIAL_SORT_DIRECTION}
-      />
-    </EuiPanel>
+    <ManagedTable
+      noItemsMessage={i18n.translate('xpack.apm.jvmsTable.noJvmsLabel', {
+        defaultMessage: 'No JVMs were found',
+      })}
+      items={items}
+      columns={columns}
+      initialPageSize={INITIAL_PAGE_SIZE}
+      initialSortField={INITIAL_SORT_FIELD}
+      initialSortDirection={INITIAL_SORT_DIRECTION}
+    />
   );
 }
 
diff --git a/x-pack/plugins/apm/public/components/app/trace_overview/index.tsx b/x-pack/plugins/apm/public/components/app/trace_overview/index.tsx
index 0938456193dc0d..bf60463255d64c 100644
--- a/x-pack/plugins/apm/public/components/app/trace_overview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/trace_overview/index.tsx
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { EuiPanel } from '@elastic/eui';
 import React from 'react';
 import { useTrackPageview } from '../../../../../observability/public';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
@@ -51,12 +50,10 @@ export function TraceOverview() {
     <>
       <SearchBar />
 
-      <EuiPanel hasShadow={false}>
-        <TraceList
-          items={data.items}
-          isLoading={status === FETCH_STATUS.LOADING}
-        />
-      </EuiPanel>
+      <TraceList
+        items={data.items}
+        isLoading={status === FETCH_STATUS.LOADING}
+      />
     </>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx b/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx
index af62f4f235af7f..09c25ee4557c56 100644
--- a/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx
+++ b/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx
@@ -14,17 +14,13 @@ import { toQuery } from '../shared/Links/url_helpers';
 import { ErrorGroupDetails } from '../app/ErrorGroupDetails';
 import { useApmPluginContext } from '../../context/apm_plugin/use_apm_plugin_context';
 import { ServiceNodeMetrics } from '../app/service_node_metrics';
-import { Settings } from '../app/Settings';
+import { SettingsTemplate } from './templates/settings_template';
 import { AgentConfigurations } from '../app/Settings/AgentConfigurations';
 import { AnomalyDetection } from '../app/Settings/anomaly_detection';
 import { ApmIndices } from '../app/Settings/ApmIndices';
 import { CustomizeUI } from '../app/Settings/CustomizeUI';
 import { TraceLink } from '../app/TraceLink';
 import { TransactionDetails } from '../app/transaction_details';
-import {
-  CreateAgentConfigurationRouteHandler,
-  EditAgentConfigurationRouteHandler,
-} from './route_handlers/agent_configuration';
 import { enableServiceOverview } from '../../../common/ui_settings_keys';
 import { redirectTo } from './redirect_to';
 import { ApmMainTemplate } from './templates/apm_main_template';
@@ -38,6 +34,8 @@ import { ServiceOverview } from '../app/service_overview';
 import { TransactionOverview } from '../app/transaction_overview';
 import { ServiceInventory } from '../app/service_inventory';
 import { TraceOverview } from '../app/trace_overview';
+import { useFetcher } from '../../hooks/use_fetcher';
+import { AgentConfigurationCreateEdit } from '../app/Settings/AgentConfigurations/AgentConfigurationCreateEdit';
 
 // These component function definitions are used below with the `component`
 // property of the route definitions.
@@ -222,9 +220,9 @@ function TransactionDetailsRouteView(
 function SettingsAgentConfigurationRouteView() {
   return (
     <ApmMainTemplate pageTitle="Settings">
-      <Settings>
+      <SettingsTemplate>
         <AgentConfigurations />
-      </Settings>
+      </SettingsTemplate>
     </ApmMainTemplate>
   );
 }
@@ -232,9 +230,9 @@ function SettingsAgentConfigurationRouteView() {
 function SettingsAnomalyDetectionRouteView() {
   return (
     <ApmMainTemplate pageTitle="Settings">
-      <Settings>
+      <SettingsTemplate>
         <AnomalyDetection />
-      </Settings>
+      </SettingsTemplate>
     </ApmMainTemplate>
   );
 }
@@ -242,9 +240,9 @@ function SettingsAnomalyDetectionRouteView() {
 function SettingsApmIndicesRouteView() {
   return (
     <ApmMainTemplate pageTitle="Settings">
-      <Settings>
+      <SettingsTemplate>
         <ApmIndices />
-      </Settings>
+      </SettingsTemplate>
     </ApmMainTemplate>
   );
 }
@@ -252,9 +250,57 @@ function SettingsApmIndicesRouteView() {
 function SettingsCustomizeUI() {
   return (
     <ApmMainTemplate pageTitle="Settings">
-      <Settings>
+      <SettingsTemplate>
         <CustomizeUI />
-      </Settings>
+      </SettingsTemplate>
+    </ApmMainTemplate>
+  );
+}
+
+export function EditAgentConfigurationRouteView(props: RouteComponentProps) {
+  const { search } = props.history.location;
+
+  // typescript complains because `pageStop` does not exist in `APMQueryParams`
+  // Going forward we should move away from globally declared query params and this is a first step
+  // @ts-expect-error
+  const { name, environment, pageStep } = toQuery(search);
+
+  const res = useFetcher(
+    (callApmApi) => {
+      return callApmApi({
+        endpoint: 'GET /api/apm/settings/agent-configuration/view',
+        params: { query: { name, environment } },
+      });
+    },
+    [name, environment]
+  );
+
+  return (
+    <ApmMainTemplate pageTitle="Settings">
+      <SettingsTemplate {...props}>
+        <AgentConfigurationCreateEdit
+          pageStep={pageStep || 'choose-settings-step'}
+          existingConfigResult={res}
+        />
+      </SettingsTemplate>
+    </ApmMainTemplate>
+  );
+}
+
+export function CreateAgentConfigurationRouteView(props: RouteComponentProps) {
+  const { search } = props.history.location;
+
+  // Ignoring here because we specifically DO NOT want to add the query params to the global route handler
+  // @ts-expect-error
+  const { pageStep } = toQuery(search);
+
+  return (
+    <ApmMainTemplate pageTitle="Settings">
+      <SettingsTemplate {...props}>
+        <AgentConfigurationCreateEdit
+          pageStep={pageStep || 'choose-service-step'}
+        />
+      </SettingsTemplate>
     </ApmMainTemplate>
   );
 }
@@ -339,14 +385,14 @@ export const apmRouteConfig: APMRouteDefinition[] = [
   {
     exact: true,
     path: '/settings/agent-configuration/create',
-    component: CreateAgentConfigurationRouteHandler,
+    component: CreateAgentConfigurationRouteView,
     breadcrumb: CreateAgentConfigurationTitle,
   },
   {
     exact: true,
     path: '/settings/agent-configuration/edit',
     breadcrumb: EditAgentConfigurationTitle,
-    component: EditAgentConfigurationRouteHandler,
+    component: EditAgentConfigurationRouteView,
   },
   {
     exact: true,
diff --git a/x-pack/plugins/apm/public/components/routing/app_root.tsx b/x-pack/plugins/apm/public/components/routing/app_root.tsx
index 9529a67210748f..2bb387ae315ff7 100644
--- a/x-pack/plugins/apm/public/components/routing/app_root.tsx
+++ b/x-pack/plugins/apm/public/components/routing/app_root.tsx
@@ -11,7 +11,7 @@ import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import React from 'react';
 import { Route, Router, Switch } from 'react-router-dom';
 import { DefaultTheme, ThemeProvider } from 'styled-components';
-import { euiStyled } from '../../../../../../src/plugins/kibana_react/common';
+import { APP_WRAPPER_CLASS } from '../../../../../../src/core/public';
 import {
   KibanaContextProvider,
   RedirectAppLinks,
@@ -32,10 +32,6 @@ import { useApmPluginContext } from '../../context/apm_plugin/use_apm_plugin_con
 import { AnomalyDetectionJobsContextProvider } from '../../context/anomaly_detection_jobs/anomaly_detection_jobs_context';
 import { apmRouteConfig } from './apm_route_config';
 
-const MainContainer = euiStyled.div`
-  height: 100%;
-`;
-
 export function ApmAppRoot({
   apmPluginContextValue,
   pluginsStart,
@@ -48,7 +44,12 @@ export function ApmAppRoot({
   const i18nCore = core.i18n;
 
   return (
-    <RedirectAppLinks application={core.application}>
+    <RedirectAppLinks
+      application={core.application}
+      className={APP_WRAPPER_CLASS}
+      data-test-subj="apmMainContainer"
+      role="main"
+    >
       <ApmPluginContext.Provider value={apmPluginContextValue}>
         <KibanaContextProvider services={{ ...core, ...pluginsStart }}>
           <i18nCore.Context>
@@ -57,19 +58,14 @@ export function ApmAppRoot({
                 <LicenseProvider>
                   <AnomalyDetectionJobsContextProvider>
                     <ApmThemeProvider>
-                      <MainContainer
-                        data-test-subj="apmMainContainer"
-                        role="main"
-                      >
-                        <MountApmHeaderActionMenu />
+                      <MountApmHeaderActionMenu />
 
-                        <Route component={ScrollToTopOnPathChange} />
-                        <Switch>
-                          {apmRouteConfig.map((route, i) => (
-                            <ApmRoute key={i} {...route} />
-                          ))}
-                        </Switch>
-                      </MainContainer>
+                      <Route component={ScrollToTopOnPathChange} />
+                      <Switch>
+                        {apmRouteConfig.map((route, i) => (
+                          <ApmRoute key={i} {...route} />
+                        ))}
+                      </Switch>
                     </ApmThemeProvider>
                   </AnomalyDetectionJobsContextProvider>
                 </LicenseProvider>
diff --git a/x-pack/plugins/apm/public/components/routing/route_handlers/agent_configuration.tsx b/x-pack/plugins/apm/public/components/routing/route_handlers/agent_configuration.tsx
deleted file mode 100644
index 8e0a08603bc76d..00000000000000
--- a/x-pack/plugins/apm/public/components/routing/route_handlers/agent_configuration.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
-import { useFetcher } from '../../../hooks/use_fetcher';
-import { toQuery } from '../../shared/Links/url_helpers';
-import { Settings } from '../../app/Settings';
-import { AgentConfigurationCreateEdit } from '../../app/Settings/AgentConfigurations/AgentConfigurationCreateEdit';
-
-type EditAgentConfigurationRouteHandler = RouteComponentProps<{}>;
-
-export function EditAgentConfigurationRouteHandler(
-  props: EditAgentConfigurationRouteHandler
-) {
-  const { search } = props.history.location;
-
-  // typescript complains because `pageStop` does not exist in `APMQueryParams`
-  // Going forward we should move away from globally declared query params and this is a first step
-  // @ts-expect-error
-  const { name, environment, pageStep } = toQuery(search);
-
-  const res = useFetcher(
-    (callApmApi) => {
-      return callApmApi({
-        endpoint: 'GET /api/apm/settings/agent-configuration/view',
-        params: { query: { name, environment } },
-      });
-    },
-    [name, environment]
-  );
-
-  return (
-    <Settings {...props}>
-      <AgentConfigurationCreateEdit
-        pageStep={pageStep || 'choose-settings-step'}
-        existingConfigResult={res}
-      />
-    </Settings>
-  );
-}
-
-type CreateAgentConfigurationRouteHandlerProps = RouteComponentProps<{}>;
-
-export function CreateAgentConfigurationRouteHandler(
-  props: CreateAgentConfigurationRouteHandlerProps
-) {
-  const { search } = props.history.location;
-
-  // Ignoring here because we specifically DO NOT want to add the query params to the global route handler
-  // @ts-expect-error
-  const { pageStep } = toQuery(search);
-
-  return (
-    <Settings {...props}>
-      <AgentConfigurationCreateEdit
-        pageStep={pageStep || 'choose-service-step'}
-      />
-    </Settings>
-  );
-}
diff --git a/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx b/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx
index 0473e88c23d12f..e917350f6024bf 100644
--- a/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx
+++ b/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { EuiPageHeaderProps, EuiPageTemplateProps } from '@elastic/eui';
 import React from 'react';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { ApmPluginStartDeps } from '../../../plugin';
@@ -21,11 +22,14 @@ import { EnvironmentFilter } from '../../shared/EnvironmentFilter';
  */
 export function ApmMainTemplate({
   pageTitle,
+  pageHeader,
   children,
+  ...pageTemplateProps
 }: {
-  pageTitle: React.ReactNode;
+  pageTitle?: React.ReactNode;
+  pageHeader?: EuiPageHeaderProps;
   children: React.ReactNode;
-}) {
+} & EuiPageTemplateProps) {
   const { services } = useKibana<ApmPluginStartDeps>();
   const ObservabilityPageTemplate =
     services.observability.navigation.PageTemplate;
@@ -35,7 +39,9 @@ export function ApmMainTemplate({
       pageHeader={{
         pageTitle,
         rightSideItems: [<EnvironmentFilter />],
+        ...pageHeader,
       }}
+      {...pageTemplateProps}
     >
       {children}
     </ObservabilityPageTemplate>
diff --git a/x-pack/plugins/apm/public/components/routing/templates/apm_service_template.tsx b/x-pack/plugins/apm/public/components/routing/templates/apm_service_template.tsx
index 526d9eb3551d0a..ab53052780ea9a 100644
--- a/x-pack/plugins/apm/public/components/routing/templates/apm_service_template.tsx
+++ b/x-pack/plugins/apm/public/components/routing/templates/apm_service_template.tsx
@@ -10,9 +10,8 @@ import { i18n } from '@kbn/i18n';
 import {
   EuiFlexGroup,
   EuiFlexItem,
+  EuiPageHeaderProps,
   EuiTitle,
-  EuiTabs,
-  EuiTab,
   EuiBetaBadge,
 } from '@elastic/eui';
 import { ApmMainTemplate } from './apm_main_template';
@@ -33,12 +32,10 @@ import { useUrlParams } from '../../../context/url_params_context/use_url_params
 import { Correlations } from '../../app/correlations';
 import { SearchBar } from '../../shared/search_bar';
 
-interface Tab {
-  key: TabKey;
-  href: string;
-  text: React.ReactNode;
+type Tab = NonNullable<EuiPageHeaderProps['tabs']>[0] & {
+  key: string;
   hidden?: boolean;
-}
+};
 
 type TabKey =
   | 'errors'
@@ -49,60 +46,63 @@ type TabKey =
   | 'profiling'
   | 'transactions';
 
-export function ApmServiceTemplate({
+interface Props {
+  children: React.ReactNode;
+  serviceName: string;
+  selectedTab: TabKey;
+  searchBarOptions?: React.ComponentProps<typeof SearchBar>;
+}
+
+export function ApmServiceTemplate(props: Props) {
+  return (
+    <ApmServiceContextProvider>
+      <Template {...props} />
+    </ApmServiceContextProvider>
+  );
+}
+
+function Template({
   children,
   serviceName,
   selectedTab,
   searchBarOptions,
-}: {
-  children: React.ReactNode;
-  serviceName: string;
-  selectedTab: TabKey;
-  searchBarOptions?: {
-    hidden?: boolean;
-    showTransactionTypeSelector?: boolean;
-    showTimeComparison?: boolean;
-  };
-}) {
+}: Props) {
+  const tabs = useTabs({ serviceName, selectedTab });
+
   return (
     <ApmMainTemplate
-      pageTitle={
-        <>
-          <EuiFlexGroup alignItems="center">
-            <EuiFlexItem grow={false}>
-              <EuiTitle size="l">
-                <h1>{serviceName}</h1>
-              </EuiTitle>
+      pageHeader={{
+        tabs,
+        pageTitle: (
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem>
+              <EuiFlexGroup alignItems="center">
+                <EuiFlexItem grow={false}>
+                  <EuiTitle size="l">
+                    <h1>{serviceName}</h1>
+                  </EuiTitle>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <ServiceIcons serviceName={serviceName} />
+                </EuiFlexItem>
+              </EuiFlexGroup>
             </EuiFlexItem>
+
             <EuiFlexItem grow={false}>
-              <ServiceIcons serviceName={serviceName} />
+              <Correlations />
             </EuiFlexItem>
           </EuiFlexGroup>
-        </>
-      }
+        ),
+      }}
     >
-      <ApmServiceContextProvider>
-        <EuiFlexGroup justifyContent="spaceBetween">
-          <EuiFlexItem>
-            <TabNavigation
-              serviceName={serviceName}
-              selectedTab={selectedTab}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <Correlations />
-          </EuiFlexItem>
-        </EuiFlexGroup>
+      <SearchBar {...searchBarOptions} />
 
-        <SearchBar {...searchBarOptions} />
-
-        {children}
-      </ApmServiceContextProvider>
+      {children}
     </ApmMainTemplate>
   );
 }
 
-function TabNavigation({
+function useTabs({
   serviceName,
   selectedTab,
 }: {
@@ -117,7 +117,7 @@ function TabNavigation({
     {
       key: 'overview',
       href: useServiceOverviewHref({ serviceName, transactionType }),
-      text: i18n.translate('xpack.apm.serviceDetails.overviewTabLabel', {
+      label: i18n.translate('xpack.apm.serviceDetails.overviewTabLabel', {
         defaultMessage: 'Overview',
       }),
       hidden: !core.uiSettings.get(enableServiceOverview),
@@ -129,21 +129,21 @@ function TabNavigation({
         latencyAggregationType: urlParams.latencyAggregationType,
         transactionType,
       }),
-      text: i18n.translate('xpack.apm.serviceDetails.transactionsTabLabel', {
+      label: i18n.translate('xpack.apm.serviceDetails.transactionsTabLabel', {
         defaultMessage: 'Transactions',
       }),
     },
     {
       key: 'errors',
       href: useErrorOverviewHref(serviceName),
-      text: i18n.translate('xpack.apm.serviceDetails.errorsTabLabel', {
+      label: i18n.translate('xpack.apm.serviceDetails.errorsTabLabel', {
         defaultMessage: 'Errors',
       }),
     },
     {
       key: 'nodes',
       href: useServiceNodeOverviewHref(serviceName),
-      text: i18n.translate('xpack.apm.serviceDetails.nodesTabLabel', {
+      label: i18n.translate('xpack.apm.serviceDetails.nodesTabLabel', {
         defaultMessage: 'JVMs',
       }),
       hidden: !isJavaAgentName(agentName),
@@ -151,7 +151,7 @@ function TabNavigation({
     {
       key: 'metrics',
       href: useMetricOverviewHref(serviceName),
-      text: i18n.translate('xpack.apm.serviceDetails.metricsTabLabel', {
+      label: i18n.translate('xpack.apm.serviceDetails.metricsTabLabel', {
         defaultMessage: 'Metrics',
       }),
       hidden:
@@ -160,7 +160,7 @@ function TabNavigation({
     {
       key: 'service-map',
       href: useServiceMapHref(serviceName),
-      text: i18n.translate('xpack.apm.home.serviceMapTabLabel', {
+      label: i18n.translate('xpack.apm.home.serviceMapTabLabel', {
         defaultMessage: 'Service Map',
       }),
     },
@@ -168,7 +168,7 @@ function TabNavigation({
       key: 'profiling',
       href: useServiceProfilingHref({ serviceName }),
       hidden: !config.profilingEnabled,
-      text: (
+      label: (
         <EuiFlexGroup direction="row" gutterSize="s">
           <EuiFlexItem>
             {i18n.translate('xpack.apm.serviceDetails.profilingTabLabel', {
@@ -197,20 +197,11 @@ function TabNavigation({
     },
   ];
 
-  return (
-    <EuiTabs display="condensed">
-      {tabs
-        .filter((t) => !t.hidden)
-        .map(({ href, key, text }) => (
-          <EuiTab
-            data-test-subj={`tab_${key}`}
-            href={href}
-            isSelected={key === selectedTab}
-            key={key}
-          >
-            {text}
-          </EuiTab>
-        ))}
-    </EuiTabs>
-  );
+  return tabs
+    .filter((t) => !t.hidden)
+    .map(({ href, key, label }) => ({
+      href,
+      label,
+      isSelected: key === selectedTab,
+    }));
 }
diff --git a/x-pack/plugins/apm/public/components/app/Settings/Settings.test.tsx b/x-pack/plugins/apm/public/components/routing/templates/settings_template.test.tsx
similarity index 89%
rename from x-pack/plugins/apm/public/components/app/Settings/Settings.test.tsx
rename to x-pack/plugins/apm/public/components/routing/templates/settings_template.test.tsx
index 807cfd9c02654f..36d54525d2537b 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/Settings.test.tsx
+++ b/x-pack/plugins/apm/public/components/routing/templates/settings_template.test.tsx
@@ -8,7 +8,7 @@
 import { render } from '@testing-library/react';
 import { MockApmPluginContextWrapper } from '../../../context/apm_plugin/mock_apm_plugin_context';
 import React, { ReactNode } from 'react';
-import { Settings } from './';
+import { SettingsTemplate } from './settings_template';
 import { createMemoryHistory } from 'history';
 import { MemoryRouter, RouteComponentProps } from 'react-router-dom';
 
@@ -29,9 +29,9 @@ describe('Settings', () => {
     } as unknown) as RouteComponentProps<{}>;
     expect(() =>
       render(
-        <Settings {...routerProps}>
+        <SettingsTemplate {...routerProps}>
           <div />
-        </Settings>,
+        </SettingsTemplate>,
         { wrapper: Wrapper }
       )
     ).not.toThrowError();
diff --git a/x-pack/plugins/apm/public/components/app/Settings/index.tsx b/x-pack/plugins/apm/public/components/routing/templates/settings_template.tsx
similarity index 96%
rename from x-pack/plugins/apm/public/components/app/Settings/index.tsx
rename to x-pack/plugins/apm/public/components/routing/templates/settings_template.tsx
index b4cba2afc2550d..66958c01a7fea1 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/index.tsx
+++ b/x-pack/plugins/apm/public/components/routing/templates/settings_template.tsx
@@ -12,7 +12,7 @@ import { useHistory } from 'react-router-dom';
 import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 import { getAPMHref } from '../../shared/Links/apm/APMLink';
 
-export function Settings({ children }: { children: ReactNode }) {
+export function SettingsTemplate({ children }: { children: ReactNode }) {
   const { core } = useApmPluginContext();
   const history = useHistory();
   const { basePath } = core.http;
@@ -30,7 +30,7 @@ export function Settings({ children }: { children: ReactNode }) {
   }
 
   return (
-    <EuiPage>
+    <EuiPage style={{ backgroundColor: 'white' }}>
       <EuiPageSideBar>
         <EuiSideNav
           toggleOpenOnMobile={() => toggleOpenOnMobile()}
diff --git a/x-pack/plugins/apm/public/components/shared/search_bar.tsx b/x-pack/plugins/apm/public/components/shared/search_bar.tsx
index 17497e1fb4b30a..74374e331ee8e4 100644
--- a/x-pack/plugins/apm/public/components/shared/search_bar.tsx
+++ b/x-pack/plugins/apm/public/components/shared/search_bar.tsx
@@ -135,7 +135,7 @@ export function SearchBar({
           </EuiFlexGroup>
         </EuiFlexItem>
       </EuiFlexGroup>
-      <EuiSpacer size="s" />
+      <EuiSpacer size="m" />
     </>
   );
 }