diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx
index 3e18c9e680de22..f4ba46ca9e6d4c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx
@@ -109,6 +109,11 @@ export const EngineRouter: React.FC = () => {
           <Documents />
         </Route>
       )}
+      {canViewEngineSchema && (
+        <Route path={ENGINE_SCHEMA_PATH}>
+          <SchemaRouter />
+        </Route>
+      )}
       {canManageEngineSearchUi && (
         <Route path={ENGINE_SEARCH_UI_PATH}>
           <SearchUI />
@@ -116,11 +121,6 @@ export const EngineRouter: React.FC = () => {
       )}
       {/* TODO: Remove layout once page template migration is over */}
       <Layout navigation={<AppSearchNav />}>
-        {canViewEngineSchema && (
-          <Route path={ENGINE_SCHEMA_PATH}>
-            <SchemaRouter />
-          </Route>
-        )}
         {canManageEngineCurations && (
           <Route path={ENGINE_CURATIONS_PATH}>
             <CurationsRouter />
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/components/empty_state.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/components/empty_state.test.tsx
index ea658c741b8a0d..1b353f17855d2a 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/components/empty_state.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/components/empty_state.test.tsx
@@ -5,12 +5,16 @@
  * 2.0.
  */
 
+import { setMockValues } from '../../../../__mocks__/kea_logic';
+
 import React from 'react';
 
 import { shallow } from 'enzyme';
 
 import { EuiEmptyPrompt, EuiButton } from '@elastic/eui';
 
+import { SchemaAddFieldModal } from '../../../../shared/schema';
+
 import { EmptyState } from './';
 
 describe('EmptyState', () => {
@@ -24,4 +28,11 @@ describe('EmptyState', () => {
       expect.stringContaining('#indexing-documents-guide-schema')
     );
   });
+
+  it('renders a modal that lets a user add a new schema field', () => {
+    setMockValues({ isModalOpen: true });
+    const wrapper = shallow(<EmptyState />);
+
+    expect(wrapper.find(SchemaAddFieldModal)).toHaveLength(1);
+  });
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/components/empty_state.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/components/empty_state.tsx
index 6d7dd198d5eef6..ad9285c7b8fefb 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/components/empty_state.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/components/empty_state.tsx
@@ -7,14 +7,21 @@
 
 import React from 'react';
 
-import { EuiPanel, EuiEmptyPrompt, EuiButton } from '@elastic/eui';
+import { useValues, useActions } from 'kea';
+
+import { EuiEmptyPrompt, EuiButton } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
+import { SchemaAddFieldModal } from '../../../../shared/schema';
 import { DOCS_PREFIX } from '../../../routes';
+import { SchemaLogic } from '../schema_logic';
 
 export const EmptyState: React.FC = () => {
+  const { isModalOpen } = useValues(SchemaLogic);
+  const { addSchemaField, closeModal } = useActions(SchemaLogic);
+
   return (
-    <EuiPanel color="subdued">
+    <>
       <EuiEmptyPrompt
         iconType="database"
         title={
@@ -45,6 +52,9 @@ export const EmptyState: React.FC = () => {
           </EuiButton>
         }
       />
-    </EuiPanel>
+      {isModalOpen && (
+        <SchemaAddFieldModal addNewField={addSchemaField} closeAddFieldModal={closeModal} />
+      )}
+    </>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/reindex_job/reindex_job.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/reindex_job/reindex_job.test.tsx
index e76ab60005231d..4dd7a869ca27ef 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/reindex_job/reindex_job.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/reindex_job/reindex_job.test.tsx
@@ -14,15 +14,11 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { Loading } from '../../../../shared/loading';
 import { SchemaErrorsAccordion } from '../../../../shared/schema';
 
 import { ReindexJob } from './';
 
 describe('ReindexJob', () => {
-  const props = {
-    schemaBreadcrumb: ['Engines', 'some-engine', 'Schema'],
-  };
   const values = {
     dataLoading: false,
     fieldCoercionErrors: {},
@@ -43,27 +39,20 @@ describe('ReindexJob', () => {
   });
 
   it('renders', () => {
-    const wrapper = shallow(<ReindexJob {...props} />);
+    const wrapper = shallow(<ReindexJob />);
 
     expect(wrapper.find(SchemaErrorsAccordion)).toHaveLength(1);
     expect(wrapper.find(SchemaErrorsAccordion).prop('generateViewPath')).toHaveLength(1);
   });
 
   it('calls loadReindexJob on page load', () => {
-    shallow(<ReindexJob {...props} />);
+    shallow(<ReindexJob />);
 
     expect(actions.loadReindexJob).toHaveBeenCalledWith('abc1234567890');
   });
 
-  it('renders a loading state', () => {
-    setMockValues({ ...values, dataLoading: true });
-    const wrapper = shallow(<ReindexJob {...props} />);
-
-    expect(wrapper.find(Loading)).toHaveLength(1);
-  });
-
   it('renders schema errors with links to document pages', () => {
-    const wrapper = shallow(<ReindexJob {...props} />);
+    const wrapper = shallow(<ReindexJob />);
     const generateViewPath = wrapper
       .find(SchemaErrorsAccordion)
       .prop('generateViewPath') as Function;
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/reindex_job/reindex_job.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/reindex_job/reindex_job.tsx
index 576b4ae11603be..b0a8cbd25f8b04 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/reindex_job/reindex_job.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/reindex_job/reindex_job.tsx
@@ -10,25 +10,17 @@ import { useParams } from 'react-router-dom';
 
 import { useActions, useValues } from 'kea';
 
-import { EuiPageHeader, EuiPageContentBody } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { FlashMessages } from '../../../../shared/flash_messages';
-import { SetAppSearchChrome as SetPageChrome } from '../../../../shared/kibana_chrome';
-import { BreadcrumbTrail } from '../../../../shared/kibana_chrome/generate_breadcrumbs';
-import { Loading } from '../../../../shared/loading';
 import { SchemaErrorsAccordion } from '../../../../shared/schema';
-
 import { ENGINE_DOCUMENT_DETAIL_PATH } from '../../../routes';
-import { EngineLogic, generateEnginePath } from '../../engine';
+import { EngineLogic, generateEnginePath, getEngineBreadcrumbs } from '../../engine';
+import { AppSearchPageTemplate } from '../../layout';
+import { SCHEMA_TITLE } from '../constants';
 
 import { ReindexJobLogic } from './reindex_job_logic';
 
-interface Props {
-  schemaBreadcrumb: BreadcrumbTrail;
-}
-
-export const ReindexJob: React.FC<Props> = ({ schemaBreadcrumb }) => {
+export const ReindexJob: React.FC = () => {
   const { reindexJobId } = useParams() as { reindexJobId: string };
   const { loadReindexJob } = useActions(ReindexJobLogic);
   const { dataLoading, fieldCoercionErrors } = useValues(ReindexJobLogic);
@@ -40,34 +32,29 @@ export const ReindexJob: React.FC<Props> = ({ schemaBreadcrumb }) => {
     loadReindexJob(reindexJobId);
   }, [reindexJobId]);
 
-  if (dataLoading) return <Loading />;
-
   return (
-    <>
-      <SetPageChrome
-        trail={[
-          ...schemaBreadcrumb,
-          i18n.translate('xpack.enterpriseSearch.appSearch.engine.schema.reindexErrorsBreadcrumb', {
-            defaultMessage: 'Reindex errors',
-          }),
-        ]}
-      />
-      <EuiPageHeader
-        pageTitle={i18n.translate(
+    <AppSearchPageTemplate
+      pageChrome={getEngineBreadcrumbs([
+        SCHEMA_TITLE,
+        i18n.translate('xpack.enterpriseSearch.appSearch.engine.schema.reindexErrorsBreadcrumb', {
+          defaultMessage: 'Reindex errors',
+        }),
+      ])}
+      pageHeader={{
+        pageTitle: i18n.translate(
           'xpack.enterpriseSearch.appSearch.engine.schema.reindexJob.title',
           { defaultMessage: 'Schema change errors' }
-        )}
+        ),
+      }}
+      isLoading={dataLoading}
+    >
+      <SchemaErrorsAccordion
+        fieldCoercionErrors={fieldCoercionErrors}
+        schema={schema!}
+        generateViewPath={(documentId: string) =>
+          generateEnginePath(ENGINE_DOCUMENT_DETAIL_PATH, { documentId })
+        }
       />
-      <FlashMessages />
-      <EuiPageContentBody>
-        <SchemaErrorsAccordion
-          fieldCoercionErrors={fieldCoercionErrors}
-          schema={schema!}
-          generateViewPath={(documentId: string) =>
-            generateEnginePath(ENGINE_DOCUMENT_DETAIL_PATH, { documentId })
-          }
-        />
-      </EuiPageContentBody>
-    </>
+    </AppSearchPageTemplate>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_logic.test.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_logic.test.ts
index 7687296cf9f830..dcc5747b0d32f3 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_logic.test.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_logic.test.ts
@@ -140,13 +140,13 @@ describe('SchemaLogic', () => {
 
   describe('selectors', () => {
     describe('hasSchema', () => {
-      it('returns true when the schema obj has items', () => {
-        mountAndSetSchema({ schema: { test: SchemaType.Text } });
+      it('returns true when the cached server schema obj has items', () => {
+        mount({ cachedSchema: { test: SchemaType.Text } });
         expect(SchemaLogic.values.hasSchema).toEqual(true);
       });
 
-      it('returns false when the schema obj is empty', () => {
-        mountAndSetSchema({ schema: {} });
+      it('returns false when the cached server schema obj is empty', () => {
+        mount({ schema: {} });
         expect(SchemaLogic.values.hasSchema).toEqual(false);
       });
     });
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_logic.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_logic.ts
index 3215a46c8e2998..3dcafd6782afd7 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_logic.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_logic.ts
@@ -108,7 +108,10 @@ export const SchemaLogic = kea<MakeLogicType<SchemaValues, SchemaActions>>({
     ],
   },
   selectors: {
-    hasSchema: [(selectors) => [selectors.schema], (schema) => Object.keys(schema).length > 0],
+    hasSchema: [
+      (selectors) => [selectors.cachedSchema],
+      (cachedSchema) => Object.keys(cachedSchema).length > 0,
+    ],
     hasSchemaChanged: [
       (selectors) => [selectors.schema, selectors.cachedSchema],
       (schema, cachedSchema) => !isEqual(schema, cachedSchema),
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_router.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_router.tsx
index bfa346fee468bb..d358c489593c5a 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_router.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_router.tsx
@@ -10,27 +10,21 @@ import { Route, Switch } from 'react-router-dom';
 
 import { useValues } from 'kea';
 
-import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
 import { ENGINE_REINDEX_JOB_PATH } from '../../routes';
-import { EngineLogic, getEngineBreadcrumbs } from '../engine';
+import { EngineLogic } from '../engine';
 
-import { SCHEMA_TITLE } from './constants';
 import { ReindexJob } from './reindex_job';
 import { Schema, MetaEngineSchema } from './views';
 
 export const SchemaRouter: React.FC = () => {
   const { isMetaEngine } = useValues(EngineLogic);
-  const schemaBreadcrumb = getEngineBreadcrumbs([SCHEMA_TITLE]);
 
   return (
     <Switch>
       <Route path={ENGINE_REINDEX_JOB_PATH}>
-        <ReindexJob schemaBreadcrumb={schemaBreadcrumb} />
-      </Route>
-      <Route>
-        <SetPageChrome trail={schemaBreadcrumb} />
-        {isMetaEngine ? <MetaEngineSchema /> : <Schema />}
+        <ReindexJob />
       </Route>
+      <Route>{isMetaEngine ? <MetaEngineSchema /> : <Schema />}</Route>
     </Switch>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/views/meta_engine_schema.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/views/meta_engine_schema.test.tsx
index 1d677ad08db436..60a0513b774fdd 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/views/meta_engine_schema.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/views/meta_engine_schema.test.tsx
@@ -7,6 +7,7 @@
 
 import { setMockValues, setMockActions } from '../../../../__mocks__/kea_logic';
 import '../../../../__mocks__/shallow_useeffect.mock';
+import '../../../__mocks__/engine_logic.mock';
 
 import React from 'react';
 
@@ -14,8 +15,6 @@ import { shallow } from 'enzyme';
 
 import { EuiCallOut } from '@elastic/eui';
 
-import { Loading } from '../../../../shared/loading';
-
 import { MetaEnginesSchemaTable, MetaEnginesConflictsTable } from '../components';
 
 import { MetaEngineSchema } from './';
@@ -46,13 +45,6 @@ describe('MetaEngineSchema', () => {
     expect(actions.loadSchema).toHaveBeenCalled();
   });
 
-  it('renders a loading state', () => {
-    setMockValues({ ...values, dataLoading: true });
-    const wrapper = shallow(<MetaEngineSchema />);
-
-    expect(wrapper.find(Loading)).toHaveLength(1);
-  });
-
   it('renders an inactive fields callout & table when source engines have schema conflicts', () => {
     setMockValues({ ...values, hasConflicts: true, conflictingFieldsCount: 5 });
     const wrapper = shallow(<MetaEngineSchema />);
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/views/meta_engine_schema.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/views/meta_engine_schema.tsx
index 4c0235cf81129b..2eb8bac00a040d 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/views/meta_engine_schema.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/views/meta_engine_schema.tsx
@@ -9,14 +9,15 @@ import React, { useEffect } from 'react';
 
 import { useValues, useActions } from 'kea';
 
-import { EuiPageHeader, EuiPageContentBody, EuiCallOut, EuiSpacer } from '@elastic/eui';
+import { EuiCallOut, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { FlashMessages } from '../../../../shared/flash_messages';
-import { Loading } from '../../../../shared/loading';
 import { DataPanel } from '../../data_panel';
+import { getEngineBreadcrumbs } from '../../engine';
+import { AppSearchPageTemplate } from '../../layout';
 
 import { MetaEnginesSchemaTable, MetaEnginesConflictsTable } from '../components';
+import { SCHEMA_TITLE } from '../constants';
 import { MetaEngineSchemaLogic } from '../schema_meta_engine_logic';
 
 export const MetaEngineSchema: React.FC = () => {
@@ -27,90 +28,88 @@ export const MetaEngineSchema: React.FC = () => {
     loadSchema();
   }, []);
 
-  if (dataLoading) return <Loading />;
-
   return (
-    <>
-      <EuiPageHeader
-        pageTitle={i18n.translate(
+    <AppSearchPageTemplate
+      pageChrome={getEngineBreadcrumbs([SCHEMA_TITLE])}
+      pageHeader={{
+        pageTitle: i18n.translate(
           'xpack.enterpriseSearch.appSearch.engine.schema.metaEngine.title',
           { defaultMessage: 'Meta engine schema' }
-        )}
-        description={i18n.translate(
+        ),
+        description: i18n.translate(
           'xpack.enterpriseSearch.appSearch.engine.schema.metaEngine.description',
           { defaultMessage: 'Active and inactive fields, by engine.' }
-        )}
-      />
-      <FlashMessages />
-      <EuiPageContentBody>
-        {hasConflicts && (
-          <>
-            <EuiCallOut
-              iconType="alert"
-              color="warning"
-              title={i18n.translate(
-                'xpack.enterpriseSearch.appSearch.engine.schema.metaEngine.conflictsCalloutTitle',
+        ),
+      }}
+      isLoading={dataLoading}
+    >
+      {hasConflicts && (
+        <>
+          <EuiCallOut
+            iconType="alert"
+            color="warning"
+            title={i18n.translate(
+              'xpack.enterpriseSearch.appSearch.engine.schema.metaEngine.conflictsCalloutTitle',
+              {
+                defaultMessage:
+                  '{conflictingFieldsCount, plural, one {# field is} other {# fields are}} not searchable',
+                values: { conflictingFieldsCount },
+              }
+            )}
+          >
+            <p>
+              {i18n.translate(
+                'xpack.enterpriseSearch.appSearch.engine.schema.metaEngine.conflictsCalloutDescription',
                 {
                   defaultMessage:
-                    '{conflictingFieldsCount, plural, one {# field is} other {# fields are}} not searchable',
-                  values: { conflictingFieldsCount },
+                    'The field(s) have an inconsistent field-type across the source engines that make up this meta engine. Apply a consistent field-type from the source engines to make these fields searchable.',
                 }
               )}
-            >
-              <p>
-                {i18n.translate(
-                  'xpack.enterpriseSearch.appSearch.engine.schema.metaEngine.conflictsCalloutDescription',
-                  {
-                    defaultMessage:
-                      'The field(s) have an inconsistent field-type across the source engines that make up this meta engine. Apply a consistent field-type from the source engines to make these fields searchable.',
-                  }
-                )}
-              </p>
-            </EuiCallOut>
-            <EuiSpacer />
-          </>
+            </p>
+          </EuiCallOut>
+          <EuiSpacer />
+        </>
+      )}
+      <DataPanel
+        hasBorder
+        title={
+          <h2>
+            {i18n.translate(
+              'xpack.enterpriseSearch.appSearch.engine.schema.metaEngine.activeFieldsTitle',
+              { defaultMessage: 'Active fields' }
+            )}
+          </h2>
+        }
+        subtitle={i18n.translate(
+          'xpack.enterpriseSearch.appSearch.engine.schema.metaEngine.activeFieldsDescription',
+          { defaultMessage: 'Fields which belong to one or more engine.' }
         )}
+      >
+        <MetaEnginesSchemaTable />
+      </DataPanel>
+      <EuiSpacer />
+      {hasConflicts && (
         <DataPanel
           hasBorder
           title={
             <h2>
               {i18n.translate(
-                'xpack.enterpriseSearch.appSearch.engine.schema.metaEngine.activeFieldsTitle',
-                { defaultMessage: 'Active fields' }
+                'xpack.enterpriseSearch.appSearch.engine.schema.metaEngine.inactiveFieldsTitle',
+                { defaultMessage: 'Inactive fields' }
               )}
             </h2>
           }
           subtitle={i18n.translate(
-            'xpack.enterpriseSearch.appSearch.engine.schema.metaEngine.activeFieldsDescription',
-            { defaultMessage: 'Fields which belong to one or more engine.' }
+            'xpack.enterpriseSearch.appSearch.engine.schema.metaEngine.inactiveFieldsDescription',
+            {
+              defaultMessage:
+                'These fields have type conflicts. To activate these fields, change types in the source engines to match.',
+            }
           )}
         >
-          <MetaEnginesSchemaTable />
+          <MetaEnginesConflictsTable />
         </DataPanel>
-        <EuiSpacer />
-        {hasConflicts && (
-          <DataPanel
-            hasBorder
-            title={
-              <h2>
-                {i18n.translate(
-                  'xpack.enterpriseSearch.appSearch.engine.schema.metaEngine.inactiveFieldsTitle',
-                  { defaultMessage: 'Inactive fields' }
-                )}
-              </h2>
-            }
-            subtitle={i18n.translate(
-              'xpack.enterpriseSearch.appSearch.engine.schema.metaEngine.inactiveFieldsDescription',
-              {
-                defaultMessage:
-                  'These fields have type conflicts. To activate these fields, change types in the source engines to match.',
-              }
-            )}
-          >
-            <MetaEnginesConflictsTable />
-          </DataPanel>
-        )}
-      </EuiPageContentBody>
-    </>
+      )}
+    </AppSearchPageTemplate>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/views/schema.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/views/schema.test.tsx
index 91ec8eda55fc36..cae16d70592faf 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/views/schema.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/views/schema.test.tsx
@@ -7,17 +7,18 @@
 
 import { setMockValues, setMockActions } from '../../../../__mocks__/kea_logic';
 import '../../../../__mocks__/shallow_useeffect.mock';
+import '../../../__mocks__/engine_logic.mock';
 
 import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiPageHeader, EuiButton } from '@elastic/eui';
+import { EuiButton } from '@elastic/eui';
 
-import { Loading } from '../../../../shared/loading';
 import { SchemaAddFieldModal } from '../../../../shared/schema';
+import { getPageHeaderActions } from '../../../../test_helpers';
 
-import { SchemaCallouts, SchemaTable, EmptyState } from '../components';
+import { SchemaCallouts, SchemaTable } from '../components';
 
 import { Schema } from './';
 
@@ -56,27 +57,8 @@ describe('Schema', () => {
     expect(actions.loadSchema).toHaveBeenCalled();
   });
 
-  it('renders a loading state', () => {
-    setMockValues({ ...values, dataLoading: true });
-    const wrapper = shallow(<Schema />);
-
-    expect(wrapper.find(Loading)).toHaveLength(1);
-  });
-
-  it('renders an empty state', () => {
-    setMockValues({ ...values, hasSchema: false });
-    const wrapper = shallow(<Schema />);
-
-    expect(wrapper.find(EmptyState)).toHaveLength(1);
-  });
-
   describe('page action buttons', () => {
-    const subject = () =>
-      shallow(<Schema />)
-        .find(EuiPageHeader)
-        .dive()
-        .children()
-        .dive();
+    const subject = () => getPageHeaderActions(shallow(<Schema />));
 
     it('renders', () => {
       const wrapper = subject();
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/views/schema.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/views/schema.tsx
index 7bc995b16468aa..d2a760e8accff3 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/views/schema.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/views/schema.tsx
@@ -9,14 +9,15 @@ import React, { useEffect } from 'react';
 
 import { useValues, useActions } from 'kea';
 
-import { EuiPageHeader, EuiButton, EuiPageContentBody } from '@elastic/eui';
+import { EuiButton } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { FlashMessages } from '../../../../shared/flash_messages';
-import { Loading } from '../../../../shared/loading';
 import { SchemaAddFieldModal } from '../../../../shared/schema';
+import { getEngineBreadcrumbs } from '../../engine';
+import { AppSearchPageTemplate } from '../../layout';
 
 import { SchemaCallouts, SchemaTable, EmptyState } from '../components';
+import { SCHEMA_TITLE } from '../constants';
 import { SchemaLogic } from '../schema_logic';
 
 export const Schema: React.FC = () => {
@@ -31,19 +32,18 @@ export const Schema: React.FC = () => {
     loadSchema();
   }, []);
 
-  if (dataLoading) return <Loading />;
-
   return (
-    <>
-      <EuiPageHeader
-        pageTitle={i18n.translate('xpack.enterpriseSearch.appSearch.engine.schema.pageTitle', {
+    <AppSearchPageTemplate
+      pageChrome={getEngineBreadcrumbs([SCHEMA_TITLE])}
+      pageHeader={{
+        pageTitle: i18n.translate('xpack.enterpriseSearch.appSearch.engine.schema.pageTitle', {
           defaultMessage: 'Manage engine schema',
-        })}
-        description={i18n.translate(
+        }),
+        description: i18n.translate(
           'xpack.enterpriseSearch.appSearch.engine.schema.pageDescription',
           { defaultMessage: 'Add new fields or change the types of existing ones.' }
-        )}
-        rightSideItems={[
+        ),
+        rightSideItems: [
           <EuiButton
             fill
             disabled={!hasSchemaChanged}
@@ -53,11 +53,12 @@ export const Schema: React.FC = () => {
           >
             {i18n.translate(
               'xpack.enterpriseSearch.appSearch.engine.schema.updateSchemaButtonLabel',
-              { defaultMessage: 'Update types' }
+              { defaultMessage: 'Save changes' }
             )}
           </EuiButton>,
           <EuiButton
             color="secondary"
+            iconType="plusInCircle"
             disabled={isUpdating}
             onClick={openModal}
             data-test-subj="addSchemaFieldModalButton"
@@ -67,16 +68,17 @@ export const Schema: React.FC = () => {
               { defaultMessage: 'Create a schema field' }
             )}
           </EuiButton>,
-        ]}
-      />
-      <FlashMessages />
-      <EuiPageContentBody>
-        <SchemaCallouts />
-        {hasSchema ? <SchemaTable /> : <EmptyState />}
-        {isModalOpen && (
-          <SchemaAddFieldModal addNewField={addSchemaField} closeAddFieldModal={closeModal} />
-        )}
-      </EuiPageContentBody>
-    </>
+        ],
+      }}
+      isLoading={dataLoading}
+      isEmptyState={!hasSchema}
+      emptyState={<EmptyState />}
+    >
+      <SchemaCallouts />
+      <SchemaTable />
+      {isModalOpen && (
+        <SchemaAddFieldModal addNewField={addSchemaField} closeAddFieldModal={closeModal} />
+      )}
+    </AppSearchPageTemplate>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/schema/add_field_modal/index.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/schema/add_field_modal/index.tsx
index 902417d02665e6..ba9da900c01456 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/schema/add_field_modal/index.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/schema/add_field_modal/index.tsx
@@ -10,6 +10,7 @@ import React, { ChangeEvent, FormEvent, useEffect, useState } from 'react';
 import {
   EuiButton,
   EuiButtonEmpty,
+  EuiCallOut,
   EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
@@ -83,8 +84,13 @@ export const SchemaAddFieldModal: React.FC<Props> = ({
         <EuiModalHeaderTitle>{ADD_FIELD_MODAL_TITLE}</EuiModalHeaderTitle>
       </EuiModalHeader>
       <EuiModalBody>
-        <p>{ADD_FIELD_MODAL_DESCRIPTION}</p>
-        <EuiSpacer />
+        <EuiCallOut
+          size="s"
+          color="warning"
+          iconType="iInCircle"
+          title={<p>{ADD_FIELD_MODAL_DESCRIPTION}</p>}
+        />
+        <EuiSpacer size="m" />
         <EuiForm component="form" id={FORM_ID} onSubmit={submitForm}>
           <EuiFlexGroup gutterSize="m">
             <EuiFlexItem>