diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.test.tsx
index 90da5b3163ecfc..dcca51fb775137 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.test.tsx
@@ -9,6 +9,9 @@ jest.mock('../../../shared/layout', () => ({
   ...jest.requireActual('../../../shared/layout'),
   generateNavLink: jest.fn(({ to }) => ({ href: to })),
 }));
+jest.mock('../../views/settings/components/settings_sub_nav', () => ({
+  useSettingsSubNav: () => [],
+}));
 
 import React from 'react';
 
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx
index 8e7b13a6218214..509ab4c8b22404 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx
@@ -19,6 +19,7 @@ import {
   GROUPS_PATH,
   ORG_SETTINGS_PATH,
 } from '../../routes';
+import { useSettingsSubNav } from '../../views/settings/components/settings_sub_nav';
 
 export const useWorkplaceSearchNav = () => {
   const navItems: Array<EuiSideNavItemType<unknown>> = [
@@ -53,7 +54,7 @@ export const useWorkplaceSearchNav = () => {
       id: 'settings',
       name: NAV.SETTINGS,
       ...generateNavLink({ to: ORG_SETTINGS_PATH }),
-      items: [], // TODO: Settings subnav
+      items: useSettingsSubNav(),
     },
   ];
 
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.tsx
index 6961f45bae757a..1048161993a128 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.tsx
@@ -46,7 +46,6 @@ import { Overview } from './views/overview';
 import { RoleMappings } from './views/role_mappings';
 import { Security } from './views/security';
 import { SettingsRouter } from './views/settings';
-import { SettingsSubNav } from './views/settings/components/settings_sub_nav';
 import { SetupGuide } from './views/setup_guide';
 
 export const WorkplaceSearch: React.FC<InitialAppData> = (props) => {
@@ -141,13 +140,7 @@ export const WorkplaceSearchConfigured: React.FC<InitialAppData> = (props) => {
         <Security />
       </Route>
       <Route path={ORG_SETTINGS_PATH}>
-        <Layout
-          navigation={<WorkplaceSearchNav settingsSubNav={<SettingsSubNav />} />}
-          restrictWidth
-          readOnlyMode={readOnlyMode}
-        >
-          <SettingsRouter />
-        </Layout>
+        <SettingsRouter />
       </Route>
       <Route>
         <Layout navigation={<WorkplaceSearchNav />} restrictWidth readOnlyMode={readOnlyMode}>
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/connectors.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/connectors.test.tsx
index e95dd60ae6089f..8dd820d2c8f8e6 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/connectors.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/connectors.test.tsx
@@ -14,7 +14,6 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { Loading } from '../../../../shared/loading';
 import { LicenseCallout } from '../../../components/shared/license_callout';
 
 import { Connectors } from './connectors';
@@ -33,16 +32,6 @@ describe('Connectors', () => {
     expect(wrapper.find('[data-test-subj="ConnectorRow"]')).toHaveLength(configuredSources.length);
   });
 
-  it('returns loading when loading', () => {
-    setMockValues({
-      connectors: configuredSources,
-      dataLoading: true,
-    });
-    const wrapper = shallow(<Connectors />);
-
-    expect(wrapper.find(Loading)).toHaveLength(1);
-  });
-
   it('renders LicenseCallout for restricted items', () => {
     const wrapper = shallow(<Connectors />);
 
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/connectors.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/connectors.tsx
index 056fdb6aa78b74..f86b390f99ceb8 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/connectors.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/connectors.tsx
@@ -19,12 +19,12 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 
-import { Loading } from '../../../../shared/loading';
 import { EuiButtonEmptyTo } from '../../../../shared/react_router_helpers';
+import { WorkplaceSearchPageTemplate } from '../../../components/layout';
 import { LicenseCallout } from '../../../components/shared/license_callout';
 import { SourceIcon } from '../../../components/shared/source_icon';
-import { ViewContentHeader } from '../../../components/shared/view_content_header';
 import {
+  NAV,
   CONFIGURE_BUTTON,
   CONNECTORS_HEADER_TITLE,
   CONNECTORS_HEADER_DESCRIPTION,
@@ -46,8 +46,6 @@ export const Connectors: React.FC = () => {
     initializeConnectors();
   }, []);
 
-  if (dataLoading) return <Loading />;
-
   const availableConnectors = reject(
     connectors,
     ({ serviceType }) => serviceType === CUSTOM_SERVICE_TYPE
@@ -125,12 +123,15 @@ export const Connectors: React.FC = () => {
   );
 
   return (
-    <>
-      <ViewContentHeader
-        title={CONNECTORS_HEADER_TITLE}
-        description={CONNECTORS_HEADER_DESCRIPTION}
-      />
+    <WorkplaceSearchPageTemplate
+      pageChrome={[NAV.SETTINGS, NAV.SETTINGS_SOURCE_PRIORITIZATION]}
+      pageHeader={{
+        pageTitle: CONNECTORS_HEADER_TITLE,
+        description: CONNECTORS_HEADER_DESCRIPTION,
+      }}
+      isLoading={dataLoading}
+    >
       {connectorsList}
-    </>
+    </WorkplaceSearchPageTemplate>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/customize.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/customize.tsx
index 37f9e288f7f3df..c3d01a3410d707 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/customize.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/customize.tsx
@@ -11,9 +11,10 @@ import { useActions, useValues } from 'kea';
 
 import { EuiButton, EuiFieldText, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
 
+import { WorkplaceSearchPageTemplate } from '../../../components/layout';
 import { ContentSection } from '../../../components/shared/content_section';
-import { ViewContentHeader } from '../../../components/shared/view_content_header';
 import {
+  NAV,
   CUSTOMIZE_HEADER_TITLE,
   CUSTOMIZE_HEADER_DESCRIPTION,
   CUSTOMIZE_NAME_LABEL,
@@ -31,32 +32,36 @@ export const Customize: React.FC = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit}>
-      <ViewContentHeader
-        title={CUSTOMIZE_HEADER_TITLE}
-        description={CUSTOMIZE_HEADER_DESCRIPTION}
-      />
-      <ContentSection>
-        <EuiFormRow label={CUSTOMIZE_NAME_LABEL} fullWidth isInvalid={false}>
-          <EuiFlexGroup>
-            <EuiFlexItem>
-              <EuiFieldText
-                isInvalid={false}
-                required
-                value={orgNameInputValue}
-                data-test-subj="OrgNameInput"
-                onChange={(e) => onOrgNameInputChange(e.target.value)}
-              />
-            </EuiFlexItem>
-            <EuiFlexItem />
-          </EuiFlexGroup>
-        </EuiFormRow>
-        <EuiFormRow>
-          <EuiButton color="primary" data-test-subj="SaveOrgNameButton" type="submit">
-            {CUSTOMIZE_NAME_BUTTON}
-          </EuiButton>
-        </EuiFormRow>
-      </ContentSection>
-    </form>
+    <WorkplaceSearchPageTemplate
+      pageChrome={[NAV.SETTINGS]}
+      pageHeader={{
+        pageTitle: CUSTOMIZE_HEADER_TITLE,
+        description: CUSTOMIZE_HEADER_DESCRIPTION,
+      }}
+    >
+      <form onSubmit={handleSubmit}>
+        <ContentSection>
+          <EuiFormRow label={CUSTOMIZE_NAME_LABEL} fullWidth isInvalid={false}>
+            <EuiFlexGroup>
+              <EuiFlexItem>
+                <EuiFieldText
+                  isInvalid={false}
+                  required
+                  value={orgNameInputValue}
+                  data-test-subj="OrgNameInput"
+                  onChange={(e) => onOrgNameInputChange(e.target.value)}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem />
+            </EuiFlexGroup>
+          </EuiFormRow>
+          <EuiFormRow>
+            <EuiButton color="primary" data-test-subj="SaveOrgNameButton" type="submit">
+              {CUSTOMIZE_NAME_BUTTON}
+            </EuiButton>
+          </EuiFormRow>
+        </ContentSection>
+      </form>
+    </WorkplaceSearchPageTemplate>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/oauth_application.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/oauth_application.test.tsx
index 3c0cae212caa42..f8c70d6bbba7ab 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/oauth_application.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/oauth_application.test.tsx
@@ -16,8 +16,9 @@ import { shallow } from 'enzyme';
 
 import { EuiModal, EuiForm } from '@elastic/eui';
 
+import { getPageDescription } from '../../../../test_helpers';
+
 import { CredentialItem } from '../../../components/shared/credential_item';
-import { ViewContentHeader } from '../../../components/shared/view_content_header';
 import { OAUTH_DESCRIPTION, REDIRECT_INSECURE_ERROR_TEXT } from '../../../constants';
 
 import { OauthApplication } from './oauth_application';
@@ -77,7 +78,7 @@ describe('OauthApplication', () => {
   it('handles form submission', () => {
     const wrapper = shallow(<OauthApplication />);
     const preventDefault = jest.fn();
-    wrapper.find('form').simulate('submit', { preventDefault });
+    wrapper.find(EuiForm).simulate('submit', { preventDefault });
 
     expect(updateOauthApplication).toHaveBeenCalled();
   });
@@ -127,7 +128,7 @@ describe('OauthApplication', () => {
     });
     const wrapper = shallow(<OauthApplication />);
 
-    expect(wrapper.find(ViewContentHeader).prop('description')).toEqual(OAUTH_DESCRIPTION);
+    expect(getPageDescription(wrapper)).toEqual(OAUTH_DESCRIPTION);
     expect(wrapper.find('[data-test-subj="RedirectURIsRow"]').prop('error')).toEqual(
       REDIRECT_INSECURE_ERROR_TEXT
     );
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/oauth_application.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/oauth_application.tsx
index 929508bdf7b230..ca8eadbcf75ffd 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/oauth_application.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/oauth_application.tsx
@@ -26,10 +26,10 @@ import {
 } from '@elastic/eui';
 
 import { LicensingLogic } from '../../../../shared/licensing';
+import { WorkplaceSearchPageTemplate } from '../../../components/layout';
 import { ContentSection } from '../../../components/shared/content_section';
 import { CredentialItem } from '../../../components/shared/credential_item';
 import { LicenseBadge } from '../../../components/shared/license_badge';
-import { ViewContentHeader } from '../../../components/shared/view_content_header';
 import {
   CLIENT_ID_LABEL,
   CLIENT_SECRET_LABEL,
@@ -112,89 +112,88 @@ export const OauthApplication: React.FC = () => {
   );
 
   return (
-    <>
-      <form onSubmit={handleSubmit}>
-        <EuiForm>
-          <ViewContentHeader title={NAV.SETTINGS_OAUTH} description={description} />
-          <ContentSection>
-            <EuiFormRow label={NAME_LABEL}>
-              <EuiFieldText
-                value={oauthApplication.name}
-                data-test-subj="OAuthAppName"
-                onChange={(e) => setOauthApplication({ ...oauthApplication, name: e.target.value })}
-                required
-                disabled={!hasPlatinumLicense}
-              />
-            </EuiFormRow>
-            <EuiSpacer size="xl" />
-            <EuiFormRow
-              data-test-subj="RedirectURIsRow"
-              label={REDIRECT_URIS_LABEL}
-              helpText={redirectUriHelpText}
-              isInvalid={redirectUriInvalid}
-              error={redirectErrorText}
-            >
-              <EuiTextArea
-                value={oauthApplication.redirectUri}
-                data-test-subj="RedirectURIsTextArea"
-                onChange={(e) =>
-                  setOauthApplication({ ...oauthApplication, redirectUri: e.target.value })
-                }
-                required
-                disabled={!hasPlatinumLicense}
-              />
-            </EuiFormRow>
-            <EuiSpacer size="xl" />
-            <EuiFormRow helpText={CONFIDENTIAL_HELP_TEXT}>
-              <EuiSwitch
-                label={CONFIDENTIAL_LABEL}
-                checked={oauthApplication.confidential}
-                data-test-subj="ConfidentialToggle"
-                onChange={(e) =>
-                  setOauthApplication({ ...oauthApplication, confidential: e.target.checked })
-                }
-                disabled={!hasPlatinumLicense}
+    <WorkplaceSearchPageTemplate
+      pageChrome={[NAV.SETTINGS, NAV.SETTINGS_OAUTH]}
+      pageHeader={{ pageTitle: NAV.SETTINGS_OAUTH, description }}
+    >
+      <EuiForm component="form" onSubmit={handleSubmit}>
+        <ContentSection>
+          <EuiFormRow label={NAME_LABEL}>
+            <EuiFieldText
+              value={oauthApplication.name}
+              data-test-subj="OAuthAppName"
+              onChange={(e) => setOauthApplication({ ...oauthApplication, name: e.target.value })}
+              required
+              disabled={!hasPlatinumLicense}
+            />
+          </EuiFormRow>
+          <EuiSpacer size="xl" />
+          <EuiFormRow
+            data-test-subj="RedirectURIsRow"
+            label={REDIRECT_URIS_LABEL}
+            helpText={redirectUriHelpText}
+            isInvalid={redirectUriInvalid}
+            error={redirectErrorText}
+          >
+            <EuiTextArea
+              value={oauthApplication.redirectUri}
+              data-test-subj="RedirectURIsTextArea"
+              onChange={(e) =>
+                setOauthApplication({ ...oauthApplication, redirectUri: e.target.value })
+              }
+              required
+              disabled={!hasPlatinumLicense}
+            />
+          </EuiFormRow>
+          <EuiSpacer size="xl" />
+          <EuiFormRow helpText={CONFIDENTIAL_HELP_TEXT}>
+            <EuiSwitch
+              label={CONFIDENTIAL_LABEL}
+              checked={oauthApplication.confidential}
+              data-test-subj="ConfidentialToggle"
+              onChange={(e) =>
+                setOauthApplication({ ...oauthApplication, confidential: e.target.checked })
+              }
+              disabled={!hasPlatinumLicense}
+            />
+          </EuiFormRow>
+          <EuiSpacer size="xl" />
+          <EuiButton
+            fill
+            color="primary"
+            data-test-subj="SaveOAuthApp"
+            type="submit"
+            disabled={!hasPlatinumLicense}
+          >
+            {SAVE_CHANGES_BUTTON}
+          </EuiButton>
+        </ContentSection>
+        {persisted && (
+          <ContentSection title={CREDENTIALS_TITLE} description={CREDENTIALS_DESCRIPTION}>
+            <EuiFormRow>
+              <CredentialItem
+                label={CLIENT_ID_LABEL}
+                value={oauthApplication.uid}
+                testSubj="ClientID"
               />
             </EuiFormRow>
-            <EuiSpacer size="xl" />
-            <EuiButton
-              fill
-              color="primary"
-              data-test-subj="SaveOAuthApp"
-              type="submit"
-              disabled={!hasPlatinumLicense}
-            >
-              {SAVE_CHANGES_BUTTON}
-            </EuiButton>
-          </ContentSection>
-          {persisted && (
-            <ContentSection title={CREDENTIALS_TITLE} description={CREDENTIALS_DESCRIPTION}>
-              <EuiFormRow>
-                <CredentialItem
-                  label={CLIENT_ID_LABEL}
-                  value={oauthApplication.uid}
-                  testSubj="ClientID"
-                />
-              </EuiFormRow>
-
-              {oauthApplication.confidential && (
-                <>
-                  <EuiSpacer size="s" />
-                  <EuiFormRow>
-                    <CredentialItem
-                      label={CLIENT_SECRET_LABEL}
-                      value={oauthApplication.secret}
-                      testSubj="ClientSecret"
-                    />
-                  </EuiFormRow>
-                </>
-              )}
-            </ContentSection>
-          )}
-        </EuiForm>
-      </form>
 
+            {oauthApplication.confidential && (
+              <>
+                <EuiSpacer size="s" />
+                <EuiFormRow>
+                  <CredentialItem
+                    label={CLIENT_SECRET_LABEL}
+                    value={oauthApplication.secret}
+                    testSubj="ClientSecret"
+                  />
+                </EuiFormRow>
+              </>
+            )}
+          </ContentSection>
+        )}
+      </EuiForm>
       {isLicenseModalVisible && licenseModal}
-    </>
+    </WorkplaceSearchPageTemplate>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/settings_sub_nav.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/settings_sub_nav.test.tsx
index 5cd8a3fc1cf031..31b0bc6af996e8 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/settings_sub_nav.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/settings_sub_nav.test.tsx
@@ -5,18 +5,40 @@
  * 2.0.
  */
 
-import React from 'react';
+jest.mock('../../../../shared/layout', () => ({
+  generateNavLink: jest.fn(({ to }) => ({ href: to })),
+}));
 
-import { shallow } from 'enzyme';
+import { mockUseRouteMatch } from '../../../../__mocks__/react_router';
 
-import { SideNavLink } from '../../../../shared/layout';
+import { useSettingsSubNav } from './settings_sub_nav';
 
-import { SettingsSubNav } from './settings_sub_nav';
+describe('useSettingsSubNav', () => {
+  it('returns an array of side nav items when on the /settings path', () => {
+    mockUseRouteMatch.mockReturnValueOnce(true);
 
-describe('SettingsSubNav', () => {
-  it('renders', () => {
-    const wrapper = shallow(<SettingsSubNav />);
+    expect(useSettingsSubNav()).toEqual([
+      {
+        id: 'settingsCustomize',
+        name: 'Customize',
+        href: '/settings/customize',
+      },
+      {
+        id: 'settingsConnectors',
+        name: 'Content source connectors',
+        href: '/settings/connectors',
+      },
+      {
+        id: 'settingsOAuth',
+        name: 'OAuth application',
+        href: '/settings/oauth',
+      },
+    ]);
+  });
+
+  it('returns undefined when not on the /settings path', () => {
+    mockUseRouteMatch.mockReturnValueOnce(false);
 
-    expect(wrapper.find(SideNavLink)).toHaveLength(3);
+    expect(useSettingsSubNav()).toEqual(undefined);
   });
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/settings_sub_nav.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/settings_sub_nav.tsx
index 3f68997a17b8bb..be231075b30217 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/settings_sub_nav.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/settings_sub_nav.tsx
@@ -5,22 +5,40 @@
  * 2.0.
  */
 
-import React from 'react';
+import { useRouteMatch } from 'react-router-dom';
 
-import { SideNavLink } from '../../../../shared/layout';
+import { EuiSideNavItemType } from '@elastic/eui';
+
+import { generateNavLink } from '../../../../shared/layout';
 import { NAV } from '../../../constants';
 import {
+  ORG_SETTINGS_PATH,
   ORG_SETTINGS_CUSTOMIZE_PATH,
   ORG_SETTINGS_CONNECTORS_PATH,
   ORG_SETTINGS_OAUTH_APPLICATION_PATH,
 } from '../../../routes';
 
-export const SettingsSubNav: React.FC = () => (
-  <>
-    <SideNavLink to={ORG_SETTINGS_CUSTOMIZE_PATH}>{NAV.SETTINGS_CUSTOMIZE}</SideNavLink>
-    <SideNavLink to={ORG_SETTINGS_CONNECTORS_PATH}>
-      {NAV.SETTINGS_SOURCE_PRIORITIZATION}
-    </SideNavLink>
-    <SideNavLink to={ORG_SETTINGS_OAUTH_APPLICATION_PATH}>{NAV.SETTINGS_OAUTH}</SideNavLink>
-  </>
-);
+export const useSettingsSubNav = () => {
+  const isSettingsPage = !!useRouteMatch(ORG_SETTINGS_PATH);
+  if (!isSettingsPage) return undefined;
+
+  const navItems: Array<EuiSideNavItemType<unknown>> = [
+    {
+      id: 'settingsCustomize',
+      name: NAV.SETTINGS_CUSTOMIZE,
+      ...generateNavLink({ to: ORG_SETTINGS_CUSTOMIZE_PATH }),
+    },
+    {
+      id: 'settingsConnectors',
+      name: NAV.SETTINGS_SOURCE_PRIORITIZATION,
+      ...generateNavLink({ to: ORG_SETTINGS_CONNECTORS_PATH, shouldShowActiveForSubroutes: true }),
+    },
+    {
+      id: 'settingsOAuth',
+      name: NAV.SETTINGS_OAUTH,
+      ...generateNavLink({ to: ORG_SETTINGS_OAUTH_APPLICATION_PATH }),
+    },
+  ];
+
+  return navItems;
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/source_config.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/source_config.test.tsx
index c9b458e8d3535f..b32e3af0218273 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/source_config.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/source_config.test.tsx
@@ -16,7 +16,6 @@ import { shallow } from 'enzyme';
 
 import { EuiConfirmModal } from '@elastic/eui';
 
-import { Loading } from '../../../../shared/loading';
 import { SaveConfig } from '../../content_sources/components/add_source/save_config';
 
 import { SourceConfig } from './source_config';
@@ -41,16 +40,6 @@ describe('SourceConfig', () => {
     expect(wrapper.find(EuiConfirmModal)).toHaveLength(1);
   });
 
-  it('returns loading when loading', () => {
-    setMockValues({
-      sourceConfigData,
-      dataLoading: true,
-    });
-    const wrapper = shallow(<SourceConfig sourceIndex={1} />);
-
-    expect(wrapper.find(Loading)).toHaveLength(1);
-  });
-
   it('handles delete click', () => {
     const wrapper = shallow(<SourceConfig sourceIndex={1} />);
     const saveConfig = wrapper.find(SaveConfig);
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/source_config.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/source_config.tsx
index d7a6a509d59f6f..f1dfda78ee13ff 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/source_config.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/source_config.tsx
@@ -12,8 +12,8 @@ import { useActions, useValues } from 'kea';
 import { EuiConfirmModal } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { Loading } from '../../../../shared/loading';
-import { REMOVE_BUTTON, CANCEL_BUTTON } from '../../../constants';
+import { WorkplaceSearchPageTemplate } from '../../../components/layout';
+import { NAV, REMOVE_BUTTON, CANCEL_BUTTON } from '../../../constants';
 import { SourceDataItem } from '../../../types';
 import { AddSourceHeader } from '../../content_sources/components/add_source/add_source_header';
 import { AddSourceLogic } from '../../content_sources/components/add_source/add_source_logic';
@@ -39,8 +39,6 @@ export const SourceConfig: React.FC<SourceConfigProps> = ({ sourceIndex }) => {
     getSourceConfigData(serviceType);
   }, []);
 
-  if (dataLoading) return <Loading />;
-
   const hideConfirmModal = () => setConfirmModalVisibility(false);
   const showConfirmModal = () => setConfirmModalVisibility(true);
   const saveUpdatedConfig = () => saveSourceConfig(true);
@@ -48,7 +46,10 @@ export const SourceConfig: React.FC<SourceConfigProps> = ({ sourceIndex }) => {
   const header = <AddSourceHeader name={name} serviceType={serviceType} categories={categories} />;
 
   return (
-    <>
+    <WorkplaceSearchPageTemplate
+      pageChrome={[NAV.SETTINGS, NAV.SETTINGS_SOURCE_PRIORITIZATION, name]}
+      isLoading={dataLoading}
+    >
       <SaveConfig
         name={name}
         configuration={configuration}
@@ -77,6 +78,6 @@ export const SourceConfig: React.FC<SourceConfigProps> = ({ sourceIndex }) => {
           )}
         </EuiConfirmModal>
       )}
-    </>
+    </WorkplaceSearchPageTemplate>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/settings_router.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/settings_router.test.tsx
index 6a9104ceefde04..74092f17eadcf3 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/settings_router.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/settings_router.test.tsx
@@ -14,8 +14,6 @@ import { Route, Redirect, Switch } from 'react-router-dom';
 
 import { shallow } from 'enzyme';
 
-import { FlashMessages } from '../../../shared/flash_messages';
-import { SetWorkplaceSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
 import { staticSourceData } from '../content_sources/source_data';
 
 import { Connectors } from './components/connectors';
@@ -37,8 +35,6 @@ describe('SettingsRouter', () => {
   it('renders', () => {
     const wrapper = shallow(<SettingsRouter />);
 
-    expect(wrapper.find(FlashMessages)).toHaveLength(1);
-    expect(wrapper.find(SetPageChrome)).toHaveLength(3);
     expect(wrapper.find(Switch)).toHaveLength(1);
     expect(wrapper.find(Route)).toHaveLength(NUM_ROUTES);
     expect(wrapper.find(Redirect)).toHaveLength(1);
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/settings_router.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/settings_router.tsx
index e6264103df6d82..f8c8050e201533 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/settings_router.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/settings_router.tsx
@@ -10,9 +10,6 @@ import { Redirect, Route, Switch } from 'react-router-dom';
 
 import { useActions } from 'kea';
 
-import { FlashMessages } from '../../../shared/flash_messages';
-import { SetWorkplaceSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
-import { NAV } from '../../constants';
 import {
   ORG_SETTINGS_PATH,
   ORG_SETTINGS_CUSTOMIZE_PATH,
@@ -35,28 +32,22 @@ export const SettingsRouter: React.FC = () => {
   }, []);
 
   return (
-    <>
-      <FlashMessages />
-      <Switch>
-        <Redirect exact from={ORG_SETTINGS_PATH} to={ORG_SETTINGS_CUSTOMIZE_PATH} />
-        <Route exact path={ORG_SETTINGS_CUSTOMIZE_PATH}>
-          <SetPageChrome trail={[NAV.SETTINGS]} />
-          <Customize />
+    <Switch>
+      <Redirect exact from={ORG_SETTINGS_PATH} to={ORG_SETTINGS_CUSTOMIZE_PATH} />
+      <Route exact path={ORG_SETTINGS_CUSTOMIZE_PATH}>
+        <Customize />
+      </Route>
+      <Route exact path={ORG_SETTINGS_CONNECTORS_PATH}>
+        <Connectors />
+      </Route>
+      <Route exact path={ORG_SETTINGS_OAUTH_APPLICATION_PATH}>
+        <OauthApplication />
+      </Route>
+      {staticSourceData.map(({ editPath }, i) => (
+        <Route key={i} exact path={editPath}>
+          <SourceConfig sourceIndex={i} />
         </Route>
-        <Route exact path={ORG_SETTINGS_CONNECTORS_PATH}>
-          <SetPageChrome trail={[NAV.SETTINGS, NAV.SETTINGS_SOURCE_PRIORITIZATION]} />
-          <Connectors />
-        </Route>
-        <Route exact path={ORG_SETTINGS_OAUTH_APPLICATION_PATH}>
-          <SetPageChrome trail={[NAV.SETTINGS, NAV.SETTINGS_OAUTH]} />
-          <OauthApplication />
-        </Route>
-        {staticSourceData.map(({ editPath }, i) => (
-          <Route key={i} exact path={editPath}>
-            <SourceConfig sourceIndex={i} />
-          </Route>
-        ))}
-      </Switch>
-    </>
+      ))}
+    </Switch>
   );
 };