diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/__mocks__/engine_logic.mock.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/__mocks__/engine_logic.mock.ts
index 23d638d5f25f3d..b38659b7a9a797 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/__mocks__/engine_logic.mock.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/__mocks__/engine_logic.mock.ts
@@ -6,7 +6,7 @@
  */
 
 import { EngineDetails } from '../components/engine/types';
-import { ENGINES_TITLE } from '../components/engines';
+import { ENGINES_TITLE } from '../components/engines/constants';
 import { generateEncodedPath } from '../utils/encode_path_params';
 
 export const mockEngineValues = {
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_creation/engine_creation.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_creation/engine_creation.tsx
index 250c941009ecb9..913aa4f0ec8452 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_creation/engine_creation.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_creation/engine_creation.tsx
@@ -16,15 +16,13 @@ import {
   EuiFlexItem,
   EuiFieldText,
   EuiSelect,
-  EuiPageHeader,
-  EuiPageContent,
+  EuiPanel,
   EuiSpacer,
   EuiTitle,
   EuiButton,
 } from '@elastic/eui';
 
-import { FlashMessages } from '../../../shared/flash_messages';
-import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
+import { AppSearchPageTemplate } from '../layout';
 
 import {
   ALLOWED_CHARS_NOTE,
@@ -44,77 +42,77 @@ export const EngineCreation: React.FC = () => {
   const { setLanguage, setRawName, submitEngine } = useActions(EngineCreationLogic);
 
   return (
-    <div data-test-subj="EngineCreation">
-      <SetPageChrome trail={[ENGINE_CREATION_TITLE]} />
-      <EuiPageHeader pageTitle={ENGINE_CREATION_TITLE} />
-      <FlashMessages />
-      <EuiPageContent hasBorder>
-        <EuiForm>
-          <form
-            data-test-subj="EngineCreationForm"
-            onSubmit={(e) => {
-              e.preventDefault();
-              submitEngine();
-            }}
-          >
-            <EuiTitle>
-              <h2>{ENGINE_CREATION_FORM_TITLE}</h2>
-            </EuiTitle>
-            <EuiSpacer />
-            <EuiFlexGroup>
-              <EuiFlexItem>
-                <EuiFormRow
-                  data-test-subj="EngineCreationNameFormRow"
-                  label={ENGINE_CREATION_FORM_ENGINE_NAME_LABEL}
-                  helpText={
-                    name.length > 0 && rawName !== name ? (
-                      <>
-                        {SANITIZED_NAME_NOTE} <strong>{name}</strong>
-                      </>
-                    ) : (
-                      ALLOWED_CHARS_NOTE
-                    )
-                  }
+    <AppSearchPageTemplate
+      pageChrome={[ENGINE_CREATION_TITLE]}
+      pageHeader={{ pageTitle: ENGINE_CREATION_TITLE }}
+      data-test-subj="EngineCreation"
+    >
+      <EuiPanel hasBorder>
+        <EuiForm
+          component="form"
+          data-test-subj="EngineCreationForm"
+          onSubmit={(e) => {
+            e.preventDefault();
+            submitEngine();
+          }}
+        >
+          <EuiTitle>
+            <h2>{ENGINE_CREATION_FORM_TITLE}</h2>
+          </EuiTitle>
+          <EuiSpacer />
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiFormRow
+                data-test-subj="EngineCreationNameFormRow"
+                label={ENGINE_CREATION_FORM_ENGINE_NAME_LABEL}
+                helpText={
+                  name.length > 0 && rawName !== name ? (
+                    <>
+                      {SANITIZED_NAME_NOTE} <strong>{name}</strong>
+                    </>
+                  ) : (
+                    ALLOWED_CHARS_NOTE
+                  )
+                }
+                fullWidth
+              >
+                <EuiFieldText
+                  name="engine-name"
+                  value={rawName}
+                  onChange={(event) => setRawName(event.currentTarget.value)}
+                  autoComplete="off"
                   fullWidth
-                >
-                  <EuiFieldText
-                    name="engine-name"
-                    value={rawName}
-                    onChange={(event) => setRawName(event.currentTarget.value)}
-                    autoComplete="off"
-                    fullWidth
-                    data-test-subj="EngineCreationNameInput"
-                    placeholder={ENGINE_CREATION_FORM_ENGINE_NAME_PLACEHOLDER}
-                    autoFocus
-                  />
-                </EuiFormRow>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiFormRow label={ENGINE_CREATION_FORM_ENGINE_LANGUAGE_LABEL}>
-                  <EuiSelect
-                    name="engine-language"
-                    value={language}
-                    options={SUPPORTED_LANGUAGES}
-                    data-test-subj="EngineCreationLanguageInput"
-                    onChange={(event) => setLanguage(event.currentTarget.value)}
-                  />
-                </EuiFormRow>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-            <EuiSpacer />
-            <EuiButton
-              disabled={name.length === 0}
-              isLoading={isLoading}
-              type="submit"
-              data-test-subj="NewEngineSubmitButton"
-              color="secondary"
-              fill
-            >
-              {ENGINE_CREATION_FORM_SUBMIT_BUTTON_LABEL}
-            </EuiButton>
-          </form>
+                  data-test-subj="EngineCreationNameInput"
+                  placeholder={ENGINE_CREATION_FORM_ENGINE_NAME_PLACEHOLDER}
+                  autoFocus
+                />
+              </EuiFormRow>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiFormRow label={ENGINE_CREATION_FORM_ENGINE_LANGUAGE_LABEL}>
+                <EuiSelect
+                  name="engine-language"
+                  value={language}
+                  options={SUPPORTED_LANGUAGES}
+                  data-test-subj="EngineCreationLanguageInput"
+                  onChange={(event) => setLanguage(event.currentTarget.value)}
+                />
+              </EuiFormRow>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer />
+          <EuiButton
+            disabled={name.length === 0}
+            isLoading={isLoading}
+            type="submit"
+            data-test-subj="NewEngineSubmitButton"
+            color="secondary"
+            fill
+          >
+            {ENGINE_CREATION_FORM_SUBMIT_BUTTON_LABEL}
+          </EuiButton>
         </EuiForm>
-      </EuiPageContent>
-    </div>
+      </EuiPanel>
+    </AppSearchPageTemplate>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/empty_state.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/empty_state.tsx
index e6a7c03d2aab48..df17d22d387d90 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/empty_state.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/empty_state.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 
 import { useValues, useActions } from 'kea';
 
-import { EuiPageContent, EuiEmptyPrompt, EuiSpacer } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { EuiButtonTo } from '../../../../shared/react_router_helpers';
@@ -20,86 +20,72 @@ import { ENGINE_CREATION_PATH } from '../../../routes';
 
 import { SampleEngineCreationCta } from '../../sample_engine_creation_cta/sample_engine_creation_cta';
 
-import { EnginesOverviewHeader } from './header';
-
 export const EmptyState: React.FC = () => {
   const {
     myRole: { canManageEngines },
   } = useValues(AppLogic);
   const { sendAppSearchTelemetry } = useActions(TelemetryLogic);
 
-  return (
-    <>
-      <EnginesOverviewHeader />
-      <EuiPageContent color="subdued">
-        {canManageEngines ? (
-          <EuiEmptyPrompt
-            data-test-subj="AdminEmptyEnginesPrompt"
-            iconType={EngineIcon}
-            title={
-              <h2>
-                {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.title', {
-                  defaultMessage: 'Create your first engine',
-                })}
-              </h2>
-            }
-            titleSize="l"
-            body={
-              <p>
-                {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.description1', {
-                  defaultMessage:
-                    'An App Search engine stores the documents for your search experience.',
-                })}
-              </p>
-            }
-            actions={
-              <>
-                <EuiButtonTo
-                  data-test-subj="EmptyStateCreateFirstEngineCta"
-                  fill
-                  to={ENGINE_CREATION_PATH}
-                  onClick={() =>
-                    sendAppSearchTelemetry({
-                      action: 'clicked',
-                      metric: 'create_first_engine_button',
-                    })
-                  }
-                >
-                  {i18n.translate(
-                    'xpack.enterpriseSearch.appSearch.emptyState.createFirstEngineCta',
-                    { defaultMessage: 'Create an engine' }
-                  )}
-                </EuiButtonTo>
-                <EuiSpacer size="xxl" />
-                <SampleEngineCreationCta />
-              </>
-            }
-          />
-        ) : (
-          <EuiEmptyPrompt
-            data-test-subj="NonAdminEmptyEnginesPrompt"
-            iconType={EngineIcon}
-            title={
-              <h2>
-                {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.nonAdmin.title', {
-                  defaultMessage: 'No engines available',
-                })}
-              </h2>
-            }
-            body={
-              <p>
-                {i18n.translate(
-                  'xpack.enterpriseSearch.appSearch.emptyState.nonAdmin.description',
-                  {
-                    defaultMessage:
-                      'Contact your App Search administrator to either create or grant you access to an engine.',
-                  }
-                )}
-              </p>
+  return canManageEngines ? (
+    <EuiEmptyPrompt
+      data-test-subj="AdminEmptyEnginesPrompt"
+      iconType={EngineIcon}
+      title={
+        <h2>
+          {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.title', {
+            defaultMessage: 'Create your first engine',
+          })}
+        </h2>
+      }
+      titleSize="l"
+      body={
+        <p>
+          {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.description1', {
+            defaultMessage: 'An App Search engine stores the documents for your search experience.',
+          })}
+        </p>
+      }
+      actions={
+        <>
+          <EuiButtonTo
+            data-test-subj="EmptyStateCreateFirstEngineCta"
+            fill
+            to={ENGINE_CREATION_PATH}
+            onClick={() =>
+              sendAppSearchTelemetry({
+                action: 'clicked',
+                metric: 'create_first_engine_button',
+              })
             }
-          />
-        )}
-      </EuiPageContent>
-    </>
+          >
+            {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.createFirstEngineCta', {
+              defaultMessage: 'Create an engine',
+            })}
+          </EuiButtonTo>
+          <EuiSpacer size="xxl" />
+          <SampleEngineCreationCta />
+        </>
+      }
+    />
+  ) : (
+    <EuiEmptyPrompt
+      data-test-subj="NonAdminEmptyEnginesPrompt"
+      iconType={EngineIcon}
+      title={
+        <h2>
+          {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.nonAdmin.title', {
+            defaultMessage: 'No engines available',
+          })}
+        </h2>
+      }
+      body={
+        <p>
+          {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.nonAdmin.description', {
+            defaultMessage:
+              'Contact your App Search administrator to either create or grant you access to an engine.',
+          })}
+        </p>
+      }
+    />
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/header.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/header.tsx
deleted file mode 100644
index bab67fd0e4bb50..00000000000000
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/header.tsx
+++ /dev/null
@@ -1,54 +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 { useActions } from 'kea';
-
-import { EuiPageHeader, EuiButton } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-
-import { getAppSearchUrl } from '../../../../shared/enterprise_search_url';
-import { SetAppSearchChrome as SetPageChrome } from '../../../../shared/kibana_chrome';
-import { TelemetryLogic } from '../../../../shared/telemetry';
-
-import { ENGINES_TITLE } from '../constants';
-
-export const EnginesOverviewHeader: React.FC = () => {
-  const { sendAppSearchTelemetry } = useActions(TelemetryLogic);
-
-  return (
-    <>
-      <SetPageChrome trail={[ENGINES_TITLE]} />
-      <EuiPageHeader
-        pageTitle={i18n.translate('xpack.enterpriseSearch.appSearch.enginesOverview.title', {
-          defaultMessage: 'Engines overview',
-        })}
-        rightSideItems={[
-          // eslint-disable-next-line @elastic/eui/href-or-on-click
-          <EuiButton
-            size="s"
-            iconType="popout"
-            href={getAppSearchUrl()}
-            target="_blank"
-            onClick={() =>
-              sendAppSearchTelemetry({
-                action: 'clicked',
-                metric: 'header_launch_button',
-              })
-            }
-            data-test-subj="launchButton"
-          >
-            {i18n.translate('xpack.enterpriseSearch.appSearch.productCta', {
-              defaultMessage: 'Launch App Search',
-            })}
-          </EuiButton>,
-        ]}
-      />
-    </>
-  );
-};
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/index.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/index.ts
index 234d3ba31f44bc..1d8e578e0edf20 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/index.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/index.ts
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-export { EnginesOverviewHeader } from './header';
-export { LoadingState } from './loading_state';
+export { LaunchAppSearchButton } from './launch_as_button';
 export { EmptyState } from './empty_state';
 export { EmptyMetaEnginesState } from './empty_meta_engines_state';
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/header.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/launch_as_button.test.tsx
similarity index 64%
rename from x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/header.test.tsx
rename to x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/launch_as_button.test.tsx
index 9b245a468b0838..93c91cc3830f4e 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/header.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/launch_as_button.test.tsx
@@ -12,23 +12,11 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiPageHeader } from '@elastic/eui';
-
-import { EnginesOverviewHeader } from './';
-
-describe('EnginesOverviewHeader', () => {
-  const wrapper = shallow(<EnginesOverviewHeader />)
-    .find(EuiPageHeader)
-    .dive()
-    .children()
-    .dive();
-
-  it('renders', () => {
-    expect(wrapper.find('h1').text()).toEqual('Engines overview');
-  });
+import { LaunchAppSearchButton } from './';
 
+describe('LaunchAppSearchButton', () => {
   it('renders a launch app search button that sends telemetry on click', () => {
-    const button = wrapper.find('[data-test-subj="launchButton"]');
+    const button = shallow(<LaunchAppSearchButton />);
 
     expect(button.prop('href')).toBe('http://localhost:3002/as');
     expect(button.prop('isDisabled')).toBeFalsy();
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/launch_as_button.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/launch_as_button.tsx
new file mode 100644
index 00000000000000..41102cb4fba2ec
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/launch_as_button.tsx
@@ -0,0 +1,41 @@
+/*
+ * 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 { useActions } from 'kea';
+
+import { EuiButton } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { getAppSearchUrl } from '../../../../shared/enterprise_search_url';
+import { TelemetryLogic } from '../../../../shared/telemetry';
+
+export const LaunchAppSearchButton: React.FC = () => {
+  const { sendAppSearchTelemetry } = useActions(TelemetryLogic);
+
+  return (
+    // eslint-disable-next-line @elastic/eui/href-or-on-click
+    <EuiButton
+      size="s"
+      iconType="popout"
+      href={getAppSearchUrl()}
+      target="_blank"
+      onClick={() =>
+        sendAppSearchTelemetry({
+          action: 'clicked',
+          metric: 'header_launch_button',
+        })
+      }
+      data-test-subj="launchButton"
+    >
+      {i18n.translate('xpack.enterpriseSearch.appSearch.productCta', {
+        defaultMessage: 'Launch App Search',
+      })}
+    </EuiButton>
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/loading_state.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/loading_state.test.tsx
deleted file mode 100644
index f7ccfea4bb4d46..00000000000000
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/loading_state.test.tsx
+++ /dev/null
@@ -1,22 +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 { shallow } from 'enzyme';
-
-import { EuiLoadingContent } from '@elastic/eui';
-
-import { LoadingState } from './';
-
-describe('LoadingState', () => {
-  it('renders', () => {
-    const wrapper = shallow(<LoadingState />);
-
-    expect(wrapper.find(EuiLoadingContent)).toHaveLength(2);
-  });
-});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/loading_state.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/loading_state.tsx
deleted file mode 100644
index 875c47378d1fb0..00000000000000
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/loading_state.tsx
+++ /dev/null
@@ -1,25 +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 { EuiPageContent, EuiSpacer, EuiLoadingContent } from '@elastic/eui';
-
-import { EnginesOverviewHeader } from './header';
-
-export const LoadingState: React.FC = () => {
-  return (
-    <>
-      <EnginesOverviewHeader />
-      <EuiPageContent hasBorder paddingSize="l">
-        <EuiLoadingContent lines={5} />
-        <EuiSpacer size="xxl" />
-        <EuiLoadingContent lines={4} />
-      </EuiPageContent>
-    </>
-  );
-};
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/constants.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/constants.ts
index 8d03e3d23ae237..d01e89e004d28d 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/constants.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/constants.ts
@@ -11,6 +11,11 @@ export const ENGINES_TITLE = i18n.translate('xpack.enterpriseSearch.appSearch.en
   defaultMessage: 'Engines',
 });
 
+export const ENGINES_OVERVIEW_TITLE = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.enginesOverview.title',
+  { defaultMessage: 'Engines overview' }
+);
+
 export const META_ENGINES_TITLE = i18n.translate(
   'xpack.enterpriseSearch.appSearch.metaEngines.title',
   { defaultMessage: 'Meta Engines' }
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/engines_overview.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/engines_overview.test.tsx
index 27fe65fe518ebc..8825c322fb8d5f 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/engines_overview.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/engines_overview.test.tsx
@@ -14,7 +14,6 @@ import { shallow, ShallowWrapper } from 'enzyme';
 
 import { rerender } from '../../../test_helpers';
 
-import { LoadingState, EmptyState } from './components';
 import { EnginesTable } from './components/tables/engines_table';
 import { MetaEnginesTable } from './components/tables/meta_engines_table';
 
@@ -61,135 +60,117 @@ describe('EnginesOverview', () => {
     setMockActions(actions);
   });
 
-  describe('non-happy-path states', () => {
-    it('isLoading', () => {
-      setMockValues({ ...values, dataLoading: true });
-      const wrapper = shallow(<EnginesOverview />);
+  const valuesWithEngines = {
+    ...values,
+    dataLoading: false,
+    engines: ['test-engine'],
+    enginesMeta: {
+      page: {
+        current: 1,
+        size: 10,
+        total_results: 100,
+      },
+    },
+  };
 
-      expect(wrapper.find(LoadingState)).toHaveLength(1);
-    });
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setMockValues(valuesWithEngines);
+  });
 
-    it('isEmpty', () => {
-      setMockValues({ ...values, engines: [] });
-      const wrapper = shallow(<EnginesOverview />);
+  it('renders and calls the engines API', () => {
+    const wrapper = shallow(<EnginesOverview />);
 
-      expect(wrapper.find(EmptyState)).toHaveLength(1);
-    });
+    expect(wrapper.find(EnginesTable)).toHaveLength(1);
+    expect(actions.loadEngines).toHaveBeenCalled();
   });
 
-  describe('happy-path states', () => {
-    const valuesWithEngines = {
-      ...values,
-      dataLoading: false,
-      engines: ['test-engine'],
-      enginesMeta: {
-        page: {
-          current: 1,
-          size: 10,
-          total_results: 100,
-        },
-      },
-    };
+  describe('when the user can manage/create engines', () => {
+    it('renders a create engine button which takes users to the create engine page', () => {
+      setMockValues({
+        ...valuesWithEngines,
+        myRole: { canManageEngines: true },
+      });
+      const wrapper = shallow(<EnginesOverview />);
 
-    beforeEach(() => {
-      jest.clearAllMocks();
-      setMockValues(valuesWithEngines);
+      expect(
+        wrapper.find('[data-test-subj="appSearchEnginesEngineCreationButton"]').prop('to')
+      ).toEqual('/engine_creation');
     });
+  });
 
-    it('renders and calls the engines API', () => {
+  describe('when the account has a platinum license', () => {
+    it('renders a 2nd meta engines table & makes a 2nd meta engines call', () => {
+      setMockValues({
+        ...valuesWithEngines,
+        hasPlatinumLicense: true,
+      });
       const wrapper = shallow(<EnginesOverview />);
 
-      expect(wrapper.find(EnginesTable)).toHaveLength(1);
-      expect(actions.loadEngines).toHaveBeenCalled();
+      expect(wrapper.find(MetaEnginesTable)).toHaveLength(1);
+      expect(actions.loadMetaEngines).toHaveBeenCalled();
     });
 
     describe('when the user can manage/create engines', () => {
-      it('renders a create engine button which takes users to the create engine page', () => {
+      it('renders a create engine button which takes users to the create meta engine page', () => {
         setMockValues({
           ...valuesWithEngines,
+          hasPlatinumLicense: true,
           myRole: { canManageEngines: true },
         });
         const wrapper = shallow(<EnginesOverview />);
 
         expect(
-          wrapper.find('[data-test-subj="appSearchEnginesEngineCreationButton"]').prop('to')
-        ).toEqual('/engine_creation');
+          wrapper.find('[data-test-subj="appSearchEnginesMetaEngineCreationButton"]').prop('to')
+        ).toEqual('/meta_engine_creation');
       });
     });
+  });
 
-    describe('when the account has a platinum license', () => {
-      it('renders a 2nd meta engines table & makes a 2nd meta engines call', () => {
-        setMockValues({
-          ...valuesWithEngines,
-          hasPlatinumLicense: true,
-        });
-        const wrapper = shallow(<EnginesOverview />);
+  describe('pagination', () => {
+    const getTablePagination = (wrapper: ShallowWrapper) =>
+      wrapper.find(EnginesTable).prop('pagination');
 
-        expect(wrapper.find(MetaEnginesTable)).toHaveLength(1);
-        expect(actions.loadMetaEngines).toHaveBeenCalled();
-      });
+    it('passes down page data from the API', () => {
+      const wrapper = shallow(<EnginesOverview />);
+      const pagination = getTablePagination(wrapper);
 
-      describe('when the user can manage/create engines', () => {
-        it('renders a create engine button which takes users to the create meta engine page', () => {
-          setMockValues({
-            ...valuesWithEngines,
-            hasPlatinumLicense: true,
-            myRole: { canManageEngines: true },
-          });
-          const wrapper = shallow(<EnginesOverview />);
-
-          expect(
-            wrapper.find('[data-test-subj="appSearchEnginesMetaEngineCreationButton"]').prop('to')
-          ).toEqual('/meta_engine_creation');
-        });
-      });
+      expect(pagination.totalItemCount).toEqual(100);
+      expect(pagination.pageIndex).toEqual(0);
     });
 
-    describe('pagination', () => {
-      const getTablePagination = (wrapper: ShallowWrapper) =>
-        wrapper.find(EnginesTable).prop('pagination');
-
-      it('passes down page data from the API', () => {
-        const wrapper = shallow(<EnginesOverview />);
-        const pagination = getTablePagination(wrapper);
+    it('re-polls the API on page change', () => {
+      const wrapper = shallow(<EnginesOverview />);
 
-        expect(pagination.totalItemCount).toEqual(100);
-        expect(pagination.pageIndex).toEqual(0);
+      setMockValues({
+        ...valuesWithEngines,
+        enginesMeta: {
+          page: {
+            ...valuesWithEngines.enginesMeta.page,
+            current: 51,
+          },
+        },
       });
+      rerender(wrapper);
 
-      it('re-polls the API on page change', () => {
-        const wrapper = shallow(<EnginesOverview />);
-
-        setMockValues({
-          ...valuesWithEngines,
-          enginesMeta: {
-            page: {
-              ...valuesWithEngines.enginesMeta.page,
-              current: 51,
-            },
-          },
-        });
-        rerender(wrapper);
+      expect(actions.loadEngines).toHaveBeenCalledTimes(2);
+      expect(getTablePagination(wrapper).pageIndex).toEqual(50);
+    });
 
-        expect(actions.loadEngines).toHaveBeenCalledTimes(2);
-        expect(getTablePagination(wrapper).pageIndex).toEqual(50);
+    it('calls onPagination handlers', () => {
+      setMockValues({
+        ...valuesWithEngines,
+        hasPlatinumLicense: true,
+        metaEngines: ['test-meta-engine'],
       });
+      const wrapper = shallow(<EnginesOverview />);
+      const pageEvent = { page: { index: 0 } };
 
-      it('calls onPagination handlers', () => {
-        setMockValues({
-          ...valuesWithEngines,
-          hasPlatinumLicense: true,
-          metaEngines: ['test-meta-engine'],
-        });
-        const wrapper = shallow(<EnginesOverview />);
-        const pageEvent = { page: { index: 0 } };
-
-        wrapper.find(EnginesTable).simulate('change', pageEvent);
-        expect(actions.onEnginesPagination).toHaveBeenCalledWith(1);
+      wrapper.find(EnginesTable).simulate('change', pageEvent);
+      expect(actions.onEnginesPagination).toHaveBeenCalledWith(1);
 
-        wrapper.find(MetaEnginesTable).simulate('change', pageEvent);
-        expect(actions.onMetaEnginesPagination).toHaveBeenCalledWith(1);
-      });
+      wrapper.find(MetaEnginesTable).simulate('change', pageEvent);
+      expect(actions.onMetaEnginesPagination).toHaveBeenCalledWith(1);
     });
   });
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/engines_overview.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/engines_overview.tsx
index 7001ecada999a9..44111a5ecbe66f 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/engines_overview.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/engines_overview.tsx
@@ -12,7 +12,7 @@ import { useValues, useActions } from 'kea';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPageContent,
+  EuiPanel,
   EuiPageContentHeader,
   EuiPageContentHeaderSection,
   EuiPageContentBody,
@@ -20,24 +20,19 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 
-import { FlashMessages } from '../../../shared/flash_messages';
 import { LicensingLogic } from '../../../shared/licensing';
 import { EuiButtonTo } from '../../../shared/react_router_helpers';
 import { convertMetaToPagination, handlePageChange } from '../../../shared/table_pagination';
-import { SendAppSearchTelemetry as SendTelemetry } from '../../../shared/telemetry';
 import { AppLogic } from '../../app_logic';
 import { EngineIcon, MetaEngineIcon } from '../../icons';
 import { ENGINE_CREATION_PATH, META_ENGINE_CREATION_PATH } from '../../routes';
+import { AppSearchPageTemplate } from '../layout';
 
-import {
-  EnginesOverviewHeader,
-  LoadingState,
-  EmptyState,
-  EmptyMetaEnginesState,
-} from './components';
+import { LaunchAppSearchButton, EmptyState, EmptyMetaEnginesState } from './components';
 import { EnginesTable } from './components/tables/engines_table';
 import { MetaEnginesTable } from './components/tables/meta_engines_table';
 import {
+  ENGINES_OVERVIEW_TITLE,
   CREATE_AN_ENGINE_BUTTON_LABEL,
   CREATE_A_META_ENGINE_BUTTON_LABEL,
   ENGINES_TITLE,
@@ -73,16 +68,19 @@ export const EnginesOverview: React.FC = () => {
     if (hasPlatinumLicense) loadMetaEngines();
   }, [hasPlatinumLicense, metaEnginesMeta.page.current]);
 
-  if (dataLoading) return <LoadingState />;
-  if (!engines.length) return <EmptyState />;
-
   return (
-    <>
-      <SendTelemetry action="viewed" metric="engines_overview" />
-
-      <EnginesOverviewHeader />
-      <EuiPageContent hasBorder>
-        <FlashMessages />
+    <AppSearchPageTemplate
+      pageViewTelemetry="engines_overview"
+      pageChrome={[ENGINES_TITLE]}
+      pageHeader={{
+        pageTitle: ENGINES_OVERVIEW_TITLE,
+        rightSideItems: [<LaunchAppSearchButton />],
+      }}
+      isLoading={dataLoading}
+      isEmptyState={!engines.length}
+      emptyState={<EmptyState />}
+    >
+      <EuiPanel hasBorder>
         <EuiPageContentHeader>
           <EuiPageContentHeaderSection>
             <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
@@ -168,7 +166,7 @@ export const EnginesOverview: React.FC = () => {
             </EuiPageContentBody>
           </>
         )}
-      </EuiPageContent>
-    </>
+      </EuiPanel>
+    </AppSearchPageTemplate>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/meta_engine_creation/meta_engine_creation.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/meta_engine_creation/meta_engine_creation.tsx
index 02a1768a7528ea..325e557acec0cd 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/meta_engine_creation/meta_engine_creation.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/meta_engine_creation/meta_engine_creation.tsx
@@ -18,16 +18,14 @@ import {
   EuiFormRow,
   EuiFlexItem,
   EuiFieldText,
-  EuiPageContent,
-  EuiPageHeader,
+  EuiPanel,
   EuiSpacer,
   EuiTitle,
   EuiButton,
 } from '@elastic/eui';
 
-import { FlashMessages } from '../../../shared/flash_messages';
-import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
 import { AppLogic } from '../../app_logic';
+import { AppSearchPageTemplate } from '../layout';
 
 import {
   ALLOWED_CHARS_NOTE,
@@ -74,20 +72,21 @@ export const MetaEngineCreation: React.FC = () => {
   }, []);
 
   return (
-    <div data-test-subj="MetaEngineCreation">
-      <SetPageChrome trail={[META_ENGINE_CREATION_TITLE]} />
-      <EuiPageHeader
-        pageTitle={META_ENGINE_CREATION_TITLE}
-        description={
+    <AppSearchPageTemplate
+      pageChrome={[META_ENGINE_CREATION_TITLE]}
+      pageHeader={{
+        pageTitle: META_ENGINE_CREATION_TITLE,
+        description: (
           <>
             {META_ENGINE_CREATION_FORM_META_ENGINE_DESCRIPTION}
             <br />
             {META_ENGINE_CREATION_FORM_DOCUMENTATION_DESCRIPTION}
           </>
-        }
-      />
-      <FlashMessages />
-      <EuiPageContent hasBorder>
+        ),
+      }}
+      data-test-subj="MetaEngineCreation"
+    >
+      <EuiPanel hasBorder>
         <EuiForm
           component="form"
           data-test-subj="MetaEngineCreationForm"
@@ -166,7 +165,7 @@ export const MetaEngineCreation: React.FC = () => {
             {META_ENGINE_CREATION_FORM_SUBMIT_BUTTON_LABEL}
           </EuiButton>
         </EuiForm>
-      </EuiPageContent>
-    </div>
+      </EuiPanel>
+    </AppSearchPageTemplate>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx
index caf0f805e8ca7e..b2cd3d7b54a1a9 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx
@@ -92,6 +92,22 @@ export const AppSearchConfigured: React.FC<Required<InitialAppData>> = (props) =
           <Library />
         </Route>
       )}
+      <Route exact path={ROOT_PATH}>
+        <Redirect to={ENGINES_PATH} />
+      </Route>
+      <Route exact path={ENGINES_PATH}>
+        <EnginesOverview />
+      </Route>
+      {canManageEngines && (
+        <Route exact path={ENGINE_CREATION_PATH}>
+          <EngineCreation />
+        </Route>
+      )}
+      {canManageMetaEngines && (
+        <Route exact path={META_ENGINE_CREATION_PATH}>
+          <MetaEngineCreation />
+        </Route>
+      )}
       {canViewRoleMappings && (
         <Route path={ROLE_MAPPINGS_PATH}>
           <RoleMappings />
@@ -100,12 +116,6 @@ export const AppSearchConfigured: React.FC<Required<InitialAppData>> = (props) =
       <Route>
         <Layout navigation={<AppSearchNav />} readOnlyMode={readOnlyMode}>
           <Switch>
-            <Route exact path={ROOT_PATH}>
-              <Redirect to={ENGINES_PATH} />
-            </Route>
-            <Route exact path={ENGINES_PATH}>
-              <EnginesOverview />
-            </Route>
             <Route path={ENGINE_PATH}>
               <EngineRouter />
             </Route>
@@ -115,16 +125,6 @@ export const AppSearchConfigured: React.FC<Required<InitialAppData>> = (props) =
             <Route exact path={CREDENTIALS_PATH}>
               <Credentials />
             </Route>
-            {canManageEngines && (
-              <Route exact path={ENGINE_CREATION_PATH}>
-                <EngineCreation />
-              </Route>
-            )}
-            {canManageMetaEngines && (
-              <Route exact path={META_ENGINE_CREATION_PATH}>
-                <MetaEngineCreation />
-              </Route>
-            )}
             <Route>
               <NotFound product={APP_SEARCH_PLUGIN} />
             </Route>