diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.test.tsx
index 286658c011002d..737908752911d9 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.test.tsx
@@ -12,7 +12,7 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiCopy, EuiLoadingContent, EuiPageContentBody } from '@elastic/eui';
+import { EuiCopy, EuiLoadingContent } from '@elastic/eui';
 
 import { DEFAULT_META } from '../../../shared/constants';
 import { externalUrl } from '../../../shared/enterprise_search_url';
@@ -20,6 +20,7 @@ import { externalUrl } from '../../../shared/enterprise_search_url';
 import { Credentials } from './credentials';
 
 import { CredentialsFlyout } from './credentials_flyout';
+import { CredentialsList } from './credentials_list';
 
 describe('Credentials', () => {
   // Kea mocks
@@ -42,7 +43,7 @@ describe('Credentials', () => {
 
   it('renders', () => {
     const wrapper = shallow(<Credentials />);
-    expect(wrapper.find(EuiPageContentBody)).toHaveLength(1);
+    expect(wrapper.find(CredentialsList)).toHaveLength(1);
   });
 
   it('fetches data on mount', () => {
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx
index 8918445982ea63..f81d8d64737dfb 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx
@@ -10,9 +10,7 @@ import React, { useEffect } from 'react';
 import { useActions, useValues } from 'kea';
 
 import {
-  EuiPageHeader,
   EuiTitle,
-  EuiPageContentBody,
   EuiPanel,
   EuiCopy,
   EuiButtonIcon,
@@ -25,8 +23,7 @@ import {
 import { i18n } from '@kbn/i18n';
 
 import { externalUrl } from '../../../shared/enterprise_search_url/external_url';
-import { FlashMessages } from '../../../shared/flash_messages';
-import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
+import { AppSearchPageTemplate } from '../layout';
 
 import { CREDENTIALS_TITLE } from './constants';
 import { CredentialsFlyout } from './credentials_flyout';
@@ -52,74 +49,72 @@ export const Credentials: React.FC = () => {
   }, []);
 
   return (
-    <>
-      <SetPageChrome trail={[CREDENTIALS_TITLE]} />
-      <EuiPageHeader pageTitle={CREDENTIALS_TITLE} />
-      <EuiPageContentBody>
-        {shouldShowCredentialsForm && <CredentialsFlyout />}
-        <EuiPanel hasBorder className="eui-textCenter">
-          <EuiTitle size="s">
+    <AppSearchPageTemplate
+      pageChrome={[CREDENTIALS_TITLE]}
+      pageHeader={{ pageTitle: CREDENTIALS_TITLE }}
+    >
+      {shouldShowCredentialsForm && <CredentialsFlyout />}
+      <EuiPanel color="subdued" className="eui-textCenter">
+        <EuiTitle size="s">
+          <h2>
+            {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.apiEndpoint', {
+              defaultMessage: 'Endpoint',
+            })}
+          </h2>
+        </EuiTitle>
+        <EuiCopy
+          textToCopy={externalUrl.enterpriseSearchUrl}
+          afterMessage={i18n.translate('xpack.enterpriseSearch.appSearch.credentials.copied', {
+            defaultMessage: 'Copied',
+          })}
+        >
+          {(copy) => (
+            <>
+              <EuiButtonIcon
+                onClick={copy}
+                iconType="copyClipboard"
+                aria-label={i18n.translate(
+                  'xpack.enterpriseSearch.appSearch.credentials.copyApiEndpoint',
+                  {
+                    defaultMessage: 'Copy API Endpoint to clipboard.',
+                  }
+                )}
+              />
+              {externalUrl.enterpriseSearchUrl}
+            </>
+          )}
+        </EuiCopy>
+      </EuiPanel>
+      <EuiSpacer size="xxl" />
+      <EuiPageContentHeader responsive={false}>
+        <EuiPageContentHeaderSection>
+          <EuiTitle size="m">
             <h2>
-              {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.apiEndpoint', {
-                defaultMessage: 'Endpoint',
+              {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.apiKeys', {
+                defaultMessage: 'API Keys',
               })}
             </h2>
           </EuiTitle>
-          <EuiCopy
-            textToCopy={externalUrl.enterpriseSearchUrl}
-            afterMessage={i18n.translate('xpack.enterpriseSearch.appSearch.credentials.copied', {
-              defaultMessage: 'Copied',
-            })}
-          >
-            {(copy) => (
-              <>
-                <EuiButtonIcon
-                  onClick={copy}
-                  iconType="copyClipboard"
-                  aria-label={i18n.translate(
-                    'xpack.enterpriseSearch.appSearch.credentials.copyApiEndpoint',
-                    {
-                      defaultMessage: 'Copy API Endpoint to clipboard.',
-                    }
-                  )}
-                />
-                {externalUrl.enterpriseSearchUrl}
-              </>
-            )}
-          </EuiCopy>
-        </EuiPanel>
-        <EuiSpacer size="xxl" />
-        <EuiPageContentHeader responsive={false}>
-          <EuiPageContentHeaderSection>
-            <EuiTitle size="m">
-              <h2>
-                {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.apiKeys', {
-                  defaultMessage: 'API Keys',
-                })}
-              </h2>
-            </EuiTitle>
-          </EuiPageContentHeaderSection>
-          <EuiPageContentHeaderSection>
-            {!dataLoading && (
-              <EuiButton
-                color="primary"
-                data-test-subj="CreateAPIKeyButton"
-                fill
-                onClick={() => showCredentialsForm()}
-              >
-                {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.createKey', {
-                  defaultMessage: 'Create a key',
-                })}
-              </EuiButton>
-            )}
-          </EuiPageContentHeaderSection>
-        </EuiPageContentHeader>
-        <EuiSpacer size="m" />
-        <FlashMessages />
-        <EuiPanel hasBorder>
-          {!!dataLoading ? <EuiLoadingContent lines={3} /> : <CredentialsList />}
-        </EuiPanel>
-      </EuiPageContentBody>
-    </>
+        </EuiPageContentHeaderSection>
+        <EuiPageContentHeaderSection>
+          {!dataLoading && (
+            <EuiButton
+              color="primary"
+              data-test-subj="CreateAPIKeyButton"
+              fill
+              onClick={() => showCredentialsForm()}
+            >
+              {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.createKey', {
+                defaultMessage: 'Create a key',
+              })}
+            </EuiButton>
+          )}
+        </EuiPageContentHeaderSection>
+      </EuiPageContentHeader>
+      <EuiSpacer size="m" />
+      <EuiPanel hasBorder>
+        {!!dataLoading ? <EuiLoadingContent lines={3} /> : <CredentialsList />}
+      </EuiPanel>
+    </AppSearchPageTemplate>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/log_retention_panel.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/log_retention_panel.tsx
index 76fdcdac58ad46..fb4b503c7e62c1 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/log_retention_panel.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/log_retention_panel.tsx
@@ -9,7 +9,15 @@ import React, { useEffect } from 'react';
 
 import { useActions, useValues } from 'kea';
 
-import { EuiLink, EuiSpacer, EuiSwitch, EuiText, EuiTextColor, EuiTitle } from '@elastic/eui';
+import {
+  EuiPanel,
+  EuiLink,
+  EuiSpacer,
+  EuiSwitch,
+  EuiText,
+  EuiTextColor,
+  EuiTitle,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { DOCS_PREFIX } from '../../../routes';
@@ -30,7 +38,7 @@ export const LogRetentionPanel: React.FC = () => {
   }, []);
 
   return (
-    <div data-test-subj="LogRetentionPanel">
+    <EuiPanel hasBorder data-test-subj="LogRetentionPanel">
       <EuiTitle size="s">
         <h2>
           {i18n.translate('xpack.enterpriseSearch.appSearch.settings.logRetention.title', {
@@ -104,6 +112,6 @@ export const LogRetentionPanel: React.FC = () => {
           data-test-subj="LogRetentionPanelAPISwitch"
         />
       </EuiText>
-    </div>
+    </EuiPanel>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/settings.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/settings.test.tsx
index 41d446b8e36fcb..1ad12856a92e1c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/settings.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/settings.test.tsx
@@ -9,13 +9,13 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiPageContentBody } from '@elastic/eui';
+import { LogRetentionPanel } from './log_retention';
 
 import { Settings } from './settings';
 
 describe('Settings', () => {
   it('renders', () => {
     const wrapper = shallow(<Settings />);
-    expect(wrapper.find(EuiPageContentBody)).toHaveLength(1);
+    expect(wrapper.find(LogRetentionPanel)).toHaveLength(1);
   });
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/settings.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/settings.tsx
index 2d5dd08f81288a..ddbf046d75ec13 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/settings.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/settings.tsx
@@ -7,10 +7,7 @@
 
 import React from 'react';
 
-import { EuiPageHeader, EuiPageContent, EuiPageContentBody } from '@elastic/eui';
-
-import { FlashMessages } from '../../../shared/flash_messages';
-import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
+import { AppSearchPageTemplate } from '../layout';
 
 import { LogRetentionPanel, LogRetentionConfirmationModal } from './log_retention';
 
@@ -18,16 +15,9 @@ import { SETTINGS_TITLE } from './';
 
 export const Settings: React.FC = () => {
   return (
-    <>
-      <SetPageChrome trail={[SETTINGS_TITLE]} />
-      <EuiPageHeader pageTitle={SETTINGS_TITLE} />
-      <EuiPageContent hasBorder>
-        <EuiPageContentBody>
-          <FlashMessages />
-          <LogRetentionConfirmationModal />
-          <LogRetentionPanel />
-        </EuiPageContentBody>
-      </EuiPageContent>
-    </>
+    <AppSearchPageTemplate pageChrome={[SETTINGS_TITLE]} pageHeader={{ pageTitle: SETTINGS_TITLE }}>
+      <LogRetentionConfirmationModal />
+      <LogRetentionPanel />
+    </AppSearchPageTemplate>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/index.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/index.test.tsx
index 4d8ff80326715b..2402a6ecc64016 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/index.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/index.test.tsx
@@ -24,6 +24,7 @@ import { rerender } from '../test_helpers';
 jest.mock('./app_logic', () => ({ AppLogic: jest.fn() }));
 import { AppLogic } from './app_logic';
 
+import { Credentials } from './components/credentials';
 import { EngineRouter, EngineNav } from './components/engine';
 import { EngineCreation } from './components/engine_creation';
 import { EnginesOverview } from './components/engines';
@@ -31,6 +32,7 @@ import { ErrorConnecting } from './components/error_connecting';
 import { Library } from './components/library';
 import { MetaEngineCreation } from './components/meta_engine_creation';
 import { RoleMappings } from './components/role_mappings';
+import { Settings } from './components/settings';
 import { SetupGuide } from './components/setup_guide';
 
 import { AppSearch, AppSearchUnconfigured, AppSearchConfigured, AppSearchNav } from './';
@@ -103,52 +105,28 @@ describe('AppSearchConfigured', () => {
     expect(wrapper.find(Layout).first().prop('readOnlyMode')).toEqual(true);
   });
 
-  describe('ability checks', () => {
-    describe('canViewRoleMappings', () => {
-      it('renders RoleMappings when canViewRoleMappings is true', () => {
-        setMockValues({ myRole: { canViewRoleMappings: true } });
-        rerender(wrapper);
-        expect(wrapper.find(RoleMappings)).toHaveLength(1);
+  describe('routes with ability checks', () => {
+    const runRouteAbilityCheck = (routeAbility: string, View: React.FC) => {
+      describe(View.name, () => {
+        it(`renders ${View.name} when user ${routeAbility} is true`, () => {
+          setMockValues({ myRole: { [routeAbility]: true } });
+          rerender(wrapper);
+          expect(wrapper.find(View)).toHaveLength(1);
+        });
+
+        it(`does not render ${View.name} when user ${routeAbility} is false`, () => {
+          setMockValues({ myRole: { [routeAbility]: false } });
+          rerender(wrapper);
+          expect(wrapper.find(View)).toHaveLength(0);
+        });
       });
+    };
 
-      it('does not render RoleMappings when user canViewRoleMappings is false', () => {
-        setMockValues({ myRole: { canManageEngines: false } });
-        rerender(wrapper);
-        expect(wrapper.find(RoleMappings)).toHaveLength(0);
-      });
-    });
-
-    describe('canManageEngines', () => {
-      it('renders EngineCreation when user canManageEngines is true', () => {
-        setMockValues({ myRole: { canManageEngines: true } });
-        rerender(wrapper);
-
-        expect(wrapper.find(EngineCreation)).toHaveLength(1);
-      });
-
-      it('does not render EngineCreation when user canManageEngines is false', () => {
-        setMockValues({ myRole: { canManageEngines: false } });
-        rerender(wrapper);
-
-        expect(wrapper.find(EngineCreation)).toHaveLength(0);
-      });
-    });
-
-    describe('canManageMetaEngines', () => {
-      it('renders MetaEngineCreation when user canManageMetaEngines is true', () => {
-        setMockValues({ myRole: { canManageMetaEngines: true } });
-        rerender(wrapper);
-
-        expect(wrapper.find(MetaEngineCreation)).toHaveLength(1);
-      });
-
-      it('does not render MetaEngineCreation when user canManageMetaEngines is false', () => {
-        setMockValues({ myRole: { canManageMetaEngines: false } });
-        rerender(wrapper);
-
-        expect(wrapper.find(MetaEngineCreation)).toHaveLength(0);
-      });
-    });
+    runRouteAbilityCheck('canViewSettings', Settings);
+    runRouteAbilityCheck('canViewAccountCredentials', Credentials);
+    runRouteAbilityCheck('canViewRoleMappings', RoleMappings);
+    runRouteAbilityCheck('canManageEngines', EngineCreation);
+    runRouteAbilityCheck('canManageMetaEngines', MetaEngineCreation);
   });
 
   describe('library', () => {
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 d724371cf1dc6e..7b3b13aef05d67 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
@@ -76,7 +76,13 @@ export const AppSearchUnconfigured: React.FC = () => (
 
 export const AppSearchConfigured: React.FC<Required<InitialAppData>> = (props) => {
   const {
-    myRole: { canManageEngines, canManageMetaEngines, canViewRoleMappings },
+    myRole: {
+      canManageEngines,
+      canManageMetaEngines,
+      canViewSettings,
+      canViewAccountCredentials,
+      canViewRoleMappings,
+    },
   } = useValues(AppLogic(props));
   const { renderHeaderActions } = useValues(KibanaLogic);
   const { readOnlyMode } = useValues(HttpLogic);
@@ -111,6 +117,16 @@ export const AppSearchConfigured: React.FC<Required<InitialAppData>> = (props) =
           <MetaEngineCreation />
         </Route>
       )}
+      {canViewSettings && (
+        <Route exact path={SETTINGS_PATH}>
+          <Settings />
+        </Route>
+      )}
+      {canViewAccountCredentials && (
+        <Route exact path={CREDENTIALS_PATH}>
+          <Credentials />
+        </Route>
+      )}
       {canViewRoleMappings && (
         <Route path={ROLE_MAPPINGS_PATH}>
           <RoleMappings />
@@ -119,12 +135,6 @@ export const AppSearchConfigured: React.FC<Required<InitialAppData>> = (props) =
       <Route>
         <Layout navigation={<AppSearchNav />} readOnlyMode={readOnlyMode}>
           <Switch>
-            <Route exact path={SETTINGS_PATH}>
-              <Settings />
-            </Route>
-            <Route exact path={CREDENTIALS_PATH}>
-              <Credentials />
-            </Route>
             <Route>
               <NotFound product={APP_SEARCH_PLUGIN} />
             </Route>