diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx
index a6c29285f4f660..018470da694108 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx
@@ -26,6 +26,8 @@ import { EngineViewLogic } from '../engine_view_logic';
 
 import { SearchApplicationAPI } from './search_application_api';
 
+import '../search_application_layout.scss';
+
 const pageTitle = i18n.translate(
   'xpack.enterpriseSearch.content.searchApplications.connect.pageTitle',
   {
@@ -68,6 +70,8 @@ export const EngineConnect: React.FC = () => {
         pageViewTelemetry={EngineViewTabs.CONNECT}
         isLoading={isLoadingEngine}
         pageHeader={{
+          bottomBorder: false,
+          className: 'searchApplicationHeaderBackgroundColor',
           pageTitle,
           rightSideItems: [],
         }}
@@ -84,6 +88,8 @@ export const EngineConnect: React.FC = () => {
       pageViewTelemetry={EngineViewTabs.CONNECT}
       isLoading={isLoadingEngine}
       pageHeader={{
+        bottomBorder: false,
+        className: 'searchApplicationHeaderBackgroundColor',
         pageTitle,
         rightSideItems: [],
         tabs: [
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx
index 5cd4895c3aa351..25818607f102f5 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx
@@ -72,6 +72,7 @@ import {
   ResultsView,
   Sorting,
 } from './search_ui_components';
+import '../search_application_layout.scss';
 
 class InternalEngineTransporter implements Transporter {
   constructor(
@@ -313,6 +314,8 @@ export const EngineSearchPreview: React.FC = () => {
       pageViewTelemetry={EngineViewTabs.PREVIEW}
       isLoading={isLoadingEngine}
       pageHeader={{
+        bottomBorder: false,
+        className: 'searchApplicationHeaderBackgroundColor',
         pageTitle: (
           <FormattedMessage
             id="xpack.enterpriseSearch.content.engine.searchPreview.pageTitle"
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_view.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_view.tsx
index 6bbfe9b1de9673..0f83fecc902386 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_view.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_view.tsx
@@ -55,6 +55,7 @@ export const EngineView: React.FC = () => {
         pageChrome={[engineName]}
         pageViewTelemetry={tabId}
         pageHeader={{
+          bottomBorder: false,
           pageTitle: engineName,
           rightSideItems: [],
         }}
@@ -91,6 +92,7 @@ export const EngineView: React.FC = () => {
             pageChrome={[engineName]}
             pageViewTelemetry={tabId}
             pageHeader={{
+              bottomBorder: false,
               pageTitle: engineName,
               rightSideItems: [],
             }}
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/search_application_content.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/search_application_content.tsx
index 4bf79b31a14913..4fa39f2fa0cf2d 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/search_application_content.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/search_application_content.tsx
@@ -30,6 +30,7 @@ import { EngineIndices } from './engine_indices';
 import { EngineIndicesLogic } from './engine_indices_logic';
 import { EngineSchema } from './engine_schema';
 import { EngineViewLogic } from './engine_view_logic';
+import './search_application_layout.scss';
 
 const pageTitle = i18n.translate(
   'xpack.enterpriseSearch.content.searchApplications.content.pageTitle',
@@ -78,6 +79,8 @@ export const SearchApplicationContent = () => {
         pageViewTelemetry={EngineViewTabs.CONTENT}
         isLoading={isLoadingEngine}
         pageHeader={{
+          bottomBorder: false,
+          className: 'searchApplicationHeaderBackgroundColor',
           pageTitle,
           rightSideItems: [],
         }}
@@ -103,6 +106,7 @@ export const SearchApplicationContent = () => {
       pageViewTelemetry={EngineViewTabs.CONTENT}
       isLoading={isLoadingEngine}
       pageHeader={{
+        bottomBorder: false,
         breadcrumbs: [
           {
             color: 'primary',
@@ -119,6 +123,7 @@ export const SearchApplicationContent = () => {
             ),
           },
         ],
+        className: 'searchApplicationHeaderBackgroundColor',
         pageTitle,
         rightSideItems: [
           <EuiButton
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/search_application_layout.scss b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/search_application_layout.scss
new file mode 100644
index 00000000000000..a1b0d51a7c02b8
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/search_application_layout.scss
@@ -0,0 +1,5 @@
+
+.searchApplicationHeaderBackgroundColor {
+  background-color: $euiColorLightestShade;
+
+}
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/layout/engines_page_template.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/layout/engines_page_template.tsx
index 94f0d9ae56e7c8..ed0cd55b7549a5 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/layout/engines_page_template.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/layout/engines_page_template.tsx
@@ -23,6 +23,7 @@ export const EnterpriseSearchEnginesPageTemplate: React.FC<
   const navItems = useEnterpriseSearchEngineNav(engineName, pageTemplateProps.isEmptyState);
   return (
     <EnterpriseSearchPageTemplateWrapper
+      panelled
       {...pageTemplateProps}
       solutionNav={{
         items: navItems,
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav.test.tsx
index dcb343a2beec45..cab7c58d5f099b 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav.test.tsx
@@ -287,7 +287,7 @@ describe('useEnterpriseSearchEngineNav', () => {
         {
           href: `/app/enterprise_search/content/engines/${engineName}/preview`,
           id: 'enterpriseSearchEnginePreview',
-          name: 'Preview',
+          name: 'Search Preview',
         },
         {
           href: `/app/enterprise_search/content/engines/${engineName}/content`,
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav.tsx
index 7fbc354ff725f6..86eb362c1e2ae5 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav.tsx
@@ -196,7 +196,7 @@ export const useEnterpriseSearchEngineNav = (engineName?: string, isEmptyState?:
             {
               id: 'enterpriseSearchEnginePreview',
               name: i18n.translate('xpack.enterpriseSearch.nav.engine.previewTitle', {
-                defaultMessage: 'Preview',
+                defaultMessage: 'Search Preview',
               }),
               ...generateNavLink({
                 shouldNotCreateHref: true,