diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_state.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_state.tsx
index 26ed01cc614dc..cdb61d565ef9f 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_state.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_state.tsx
@@ -32,13 +32,14 @@ export const EmptyState: React.FC = () => {
   };
 
   return (
-    <EuiPage restrictWidth className="empty-state">
+    <EuiPage restrictWidth>
       <SetBreadcrumbs isRoot />
 
       <EuiPageBody>
         <EngineOverviewHeader />
-        <EuiPageContent>
+        <EuiPageContent className="emptyState">
           <EuiEmptyPrompt
+            className="emptyState__prompt"
             iconType="eyeClosed"
             title={
               <h2>
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_states.scss b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_states.scss
index 9b785c9b96abe..32d1b198c5ced 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_states.scss
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_states.scss
@@ -7,15 +7,13 @@
 /**
  * Empty/Error UI states
  */
-.empty-state {
-  .euiPageContent {
-    min-height: 450px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
+.emptyState {
+  min-height: 450px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 
-  .euiEmptyPrompt > .euiIcon {
+  &__prompt > .euiIcon {
     margin-bottom: $euiSizeS;
   }
 }
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx
index 5891c89c3a022..15822c5953a91 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx
@@ -20,14 +20,15 @@ export const ErrorState: React.FC = () => {
   const { enterpriseSearchUrl } = useContext(KibanaContext) as IKibanaContext;
 
   return (
-    <EuiPage restrictWidth className="empty-state">
+    <EuiPage restrictWidth>
       <SetBreadcrumbs isRoot />
       <SendTelemetry action="error" metric="cannot_connect" />
 
       <EuiPageBody>
         <EngineOverviewHeader isButtonDisabled />
-        <EuiPageContent>
+        <EuiPageContent className="emptyState">
           <EuiEmptyPrompt
+            className="emptyState__prompt"
             iconType="alert"
             iconColor="danger"
             title={
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/loading_state.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/loading_state.tsx
index 3d69fe6126273..2be917c8df096 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/loading_state.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/loading_state.tsx
@@ -14,12 +14,12 @@ import './empty_states.scss';
 
 export const LoadingState: React.FC = () => {
   return (
-    <EuiPage restrictWidth className="engine-overview empty-state">
+    <EuiPage restrictWidth>
       <SetBreadcrumbs isRoot />
 
       <EuiPageBody>
         <EngineOverviewHeader />
-        <EuiPageContent>
+        <EuiPageContent className="emptyState">
           <EuiLoadingContent lines={5} />
           <EuiSpacer size="xxl" />
           <EuiLoadingContent lines={4} />
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/no_user_state.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/no_user_state.tsx
index bf728bd43ead0..8ee038f33971a 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/no_user_state.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/no_user_state.tsx
@@ -19,14 +19,15 @@ export const NoUserState: React.FC = () => {
   const username = getUserName();
 
   return (
-    <EuiPage restrictWidth className="empty-state">
+    <EuiPage restrictWidth>
       <SetBreadcrumbs isRoot />
       <SendTelemetry action="error" metric="no_as_account" />
 
       <EuiPageBody>
         <EngineOverviewHeader />
-        <EuiPageContent>
+        <EuiPageContent className="emptyState">
           <EuiEmptyPrompt
+            className="emptyState__prompt"
             iconType="lock"
             title={
               <h2>
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview.scss b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview.scss
index 1f4b711f56ef2..2c7f7de6458e2 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview.scss
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview.scss
@@ -7,21 +7,21 @@
 /**
  * Engine Overview
  */
-.engine-overview {
+.engineOverview {
   width: 100%;
 
-  .euiPanel {
-    padding: $euiSizeXL;
-  }
+  &__body {
+    padding: $euiSize;
 
-  .euiPageContent .euiPageContentHeader {
-    margin-bottom: $euiSizeM;
+    @include euiBreakpoint('m', 'l', 'xl') {
+      padding: $euiSizeXL;
+    }
   }
+}
 
-  .engine-icon {
-    display: inline-block;
-    width: $euiSize;
-    height: $euiSize;
-    margin-right: $euiSizeXS;
-  }
+.engineIcon {
+  display: inline-block;
+  width: $euiSize;
+  height: $euiSize;
+  margin-right: $euiSizeXS;
 }
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview.tsx
index 479dfe8e61513..7f7c271d2e68b 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview.tsx
@@ -89,18 +89,18 @@ export const EngineOverview: React.FC = () => {
   if (!engines.length) return <EmptyState />;
 
   return (
-    <EuiPage restrictWidth className="engine-overview">
+    <EuiPage restrictWidth className="engineOverview">
       <SetBreadcrumbs isRoot />
       <SendTelemetry action="viewed" metric="engines_overview" />
 
       <EuiPageBody>
         <EngineOverviewHeader />
 
-        <EuiPageContent>
+        <EuiPageContent panelPaddingSize="s" className="engineOverview__body">
           <EuiPageContentHeader>
             <EuiTitle size="s">
               <h2>
-                <img src={EnginesIcon} alt="" className="engine-icon" />
+                <img src={EnginesIcon} alt="" className="engineIcon" />
                 <FormattedMessage
                   id="xpack.enterpriseSearch.appSearch.enginesOverview.engines"
                   defaultMessage="Engines"
@@ -125,7 +125,7 @@ export const EngineOverview: React.FC = () => {
               <EuiPageContentHeader>
                 <EuiTitle size="s">
                   <h2>
-                    <img src={MetaEnginesIcon} alt="" className="engine-icon" />
+                    <img src={MetaEnginesIcon} alt="" className="engineIcon" />
                     <FormattedMessage
                       id="xpack.enterpriseSearch.appSearch.enginesOverview.metaEngines"
                       defaultMessage="Meta Engines"
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.scss b/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.scss
index f055b15d6644d..f90d60ee528ef 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.scss
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.scss
@@ -7,13 +7,11 @@
 /**
  * Setup Guide
  */
-.setup-guide {
-  &.euiPage {
-    padding: 0;
-    min-height: 100vh;
-  }
+.setupGuide {
+  padding: 0;
+  min-height: 100vh;
 
-  .euiPageSideBar {
+  &__sidebar {
     flex-basis: 300px;
     flex-shrink: 0;
     padding: $euiSizeL;
@@ -35,7 +33,7 @@
     }
   }
 
-  .euiPageBody {
+  &__body {
     align-self: start;
     padding: $euiSizeL;
 
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.tsx
index 3e290a7777f1c..be39cd6908ee1 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.tsx
@@ -33,11 +33,11 @@ import './setup_guide.scss';
 
 export const SetupGuide: React.FC = () => {
   return (
-    <EuiPage className="setup-guide">
+    <EuiPage className="setupGuide">
       <SetBreadcrumbs text="Setup Guide" />
       <SendTelemetry action="viewed" metric="setup_guide" />
 
-      <EuiPageSideBar>
+      <EuiPageSideBar className="setupGuide__sidebar">
         <EuiText color="subdued" size="s">
           <strong>
             <FormattedMessage
@@ -70,7 +70,7 @@ export const SetupGuide: React.FC = () => {
           rel="noopener noreferrer"
         >
           <img
-            className="setup-guide__thumbnail"
+            className="setupGuide__thumbnail"
             src={GettingStarted}
             alt={i18n.translate('xpack.enterpriseSearch.setupGuide.videoAlt', {
               defaultMessage:
@@ -100,7 +100,7 @@ export const SetupGuide: React.FC = () => {
         </EuiText>
       </EuiPageSideBar>
 
-      <EuiPageBody>
+      <EuiPageBody className="setupGuide__body">
         <EuiPageContent>
           <EuiSteps
             headingElement="h2"
diff --git a/x-pack/plugins/enterprise_search/public/applications/index.test.tsx b/x-pack/plugins/enterprise_search/public/applications/index.test.tsx
index ef69ba7e40cf3..1aead8468ca3b 100644
--- a/x-pack/plugins/enterprise_search/public/applications/index.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/index.test.tsx
@@ -35,6 +35,6 @@ describe('renderApp', () => {
 
   it('renders AppSearch', () => {
     renderApp(AppSearch, core, params, config, plugins);
-    expect(params.element.querySelector('.setup-guide')).not.toBeNull();
+    expect(params.element.querySelector('.setupGuide')).not.toBeNull();
   });
 });