diff --git a/app/javascript/react/screens/App/App.scss b/app/javascript/react/screens/App/App.scss
index 50d51a8fc3..11856b1420 100644
--- a/app/javascript/react/screens/App/App.scss
+++ b/app/javascript/react/screens/App/App.scss
@@ -11,3 +11,17 @@
 .required-asterisk {
   color: $color-pf-red-100;
 }
+
+.main-scroll-container {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  margin-left: -20px;
+  margin-right: -20px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.main-body-content {
+  margin-bottom: 20px;
+}
diff --git a/app/javascript/react/screens/App/Mappings/Mappings.js b/app/javascript/react/screens/App/Mappings/Mappings.js
index 649e632ba6..be4dd5c932 100644
--- a/app/javascript/react/screens/App/Mappings/Mappings.js
+++ b/app/javascript/react/screens/App/Mappings/Mappings.js
@@ -176,7 +176,7 @@ class Mappings extends Component {
     } = this.props;
 
     return (
-      <React.Fragment>
+      <div className="main-scroll-container">
         <MigrationBreadcrumbBar activeHref="#/mappings" productFeatures={productFeatures} />
         <Spinner
           loading={
@@ -228,7 +228,7 @@ class Mappings extends Component {
           )}
         </Spinner>
         {mappingWizardVisible && this.mappingWizard}
-      </React.Fragment>
+      </div>
     );
   }
 }
diff --git a/app/javascript/react/screens/App/Mappings/components/InfrastructureMappingsList/InfrastructureMappingsList.js b/app/javascript/react/screens/App/Mappings/components/InfrastructureMappingsList/InfrastructureMappingsList.js
index e21c60cf81..238034990b 100644
--- a/app/javascript/react/screens/App/Mappings/components/InfrastructureMappingsList/InfrastructureMappingsList.js
+++ b/app/javascript/react/screens/App/Mappings/components/InfrastructureMappingsList/InfrastructureMappingsList.js
@@ -180,7 +180,7 @@ class InfrastructureMappingsList extends React.Component {
                     {renderActiveFilters(filteredSortedPaginatedListItems)}
                   </Toolbar>
                 </Grid.Row>
-                <div style={{ overflow: 'auto', paddingBottom: 300, height: '100%' }}>
+                <div className="main-body-content">
                   <ListView style={{ marginTop: 10 }} className="infra-mappings-list-view" id="infrastructure_mappings">
                     {filteredSortedPaginatedListItems.items.map(mapping => {
                       const associatedPlansCount = mapping.service_templates && mapping.service_templates.length;
diff --git a/app/javascript/react/screens/App/Overview/Overview.js b/app/javascript/react/screens/App/Overview/Overview.js
index cd40817434..db82c108d3 100644
--- a/app/javascript/react/screens/App/Overview/Overview.js
+++ b/app/javascript/react/screens/App/Overview/Overview.js
@@ -292,20 +292,18 @@ class Overview extends React.Component {
       productFeatures
     } = this.props;
 
+    const isMainContentLoading =
+      !requestsWithTasksPreviouslyFetched &&
+      !this.hasMadeInitialPlansFetch &&
+      (isFetchingAllRequestsWithTasks ||
+        isFetchingProviders ||
+        isFetchingTransformationPlans ||
+        isFetchingArchivedTransformationPlans ||
+        isFetchingTransformationMappings);
+
     const mainContent = (
       <React.Fragment>
-        <Spinner
-          loading={
-            !requestsWithTasksPreviouslyFetched &&
-            !this.hasMadeInitialPlansFetch &&
-            (isFetchingAllRequestsWithTasks ||
-              isFetchingProviders ||
-              isFetchingTransformationPlans ||
-              isFetchingArchivedTransformationPlans ||
-              isFetchingTransformationMappings)
-          }
-          style={{ marginTop: 200 }}
-        >
+        <Spinner loading={isMainContentLoading} style={{ marginTop: 200 }}>
           {hasSufficientProviders ? (
             !!transformationMappings.length || !!transformationPlans.length || !!archivedTransformationPlans.length ? (
               <Migrations
@@ -387,32 +385,30 @@ class Overview extends React.Component {
       (migrationsFilter === MIGRATIONS_FILTERS.archived && archivedTransformationPlans.length === 0);
 
     // Full-height grey background (.cards-pf) for empty states, otherwise only grey behind aggregate cards
-    const overviewContent = emptyStateVisible ? (
-      <div
-        className="row cards-pf"
-        style={{ overflow: 'auto', overflowX: 'hidden', paddingBottom: 50, height: '100%' }}
-      >
-        {this.renderAggregateDataCards()}
-        {mainContent}
-      </div>
-    ) : (
-      <div className="row" style={{ overflow: 'auto', overflowX: 'hidden', paddingBottom: 50, height: '100%' }}>
-        <div className="row cards-pf" style={{ marginLeft: 0, marginRight: 0 }}>
+    const overviewContent =
+      emptyStateVisible && !isMainContentLoading ? (
+        <div className="row cards-pf main-body-content">
           {this.renderAggregateDataCards()}
-        </div>
-        <div className="row" style={{ marginLeft: 0, marginRight: 0 }}>
           {mainContent}
         </div>
-      </div>
-    );
+      ) : (
+        <div className="row main-body-content">
+          <div className="row cards-pf" style={{ marginLeft: 0, marginRight: 0 }}>
+            {this.renderAggregateDataCards()}
+          </div>
+          <div className="row" style={{ marginLeft: 0, marginRight: 0 }}>
+            {mainContent}
+          </div>
+        </div>
+      );
 
     return (
-      <React.Fragment>
+      <div className="main-scroll-container">
         <MigrationBreadcrumbBar activeHref="#/plans" productFeatures={productFeatures} />
         {overviewContent}
         {mappingWizardVisible && this.mappingWizard}
         {planWizardVisible && this.planWizard}
-      </React.Fragment>
+      </div>
     );
   }
 }
diff --git a/app/javascript/react/screens/App/Plan/Plan.js b/app/javascript/react/screens/App/Plan/Plan.js
index 52b6a78106..06894344c3 100644
--- a/app/javascript/react/screens/App/Plan/Plan.js
+++ b/app/javascript/react/screens/App/Plan/Plan.js
@@ -163,7 +163,7 @@ class Plan extends React.Component {
       null;
 
     return (
-      <React.Fragment>
+      <div className="main-scroll-container">
         <Toolbar>
           <Breadcrumb.Item active>{__('Migration')}</Breadcrumb.Item>
           <Breadcrumb.Item href="#/plans">{__('Migration Plans')}</Breadcrumb.Item>
@@ -278,7 +278,7 @@ class Plan extends React.Component {
             }
           />
         )}
-      </React.Fragment>
+      </div>
     );
   }
 }
diff --git a/app/javascript/react/screens/App/Plan/components/PlanRequestDetailList/PlanRequestDetailList.js b/app/javascript/react/screens/App/Plan/components/PlanRequestDetailList/PlanRequestDetailList.js
index cc2bf27988..621147ea54 100644
--- a/app/javascript/react/screens/App/Plan/components/PlanRequestDetailList/PlanRequestDetailList.js
+++ b/app/javascript/react/screens/App/Plan/components/PlanRequestDetailList/PlanRequestDetailList.js
@@ -192,7 +192,7 @@ class PlanRequestDetailList extends React.Component {
             </Toolbar>
           )}
         </Grid.Row>
-        <div style={{ overflow: 'auto', paddingBottom: 300, height: '100%' }}>
+        <div className="main-body-content">
           <ListViewTable className="plan-request-details-list">
             {filteredSortedPaginatedListItems.items.map(task => (
               <PlanRequestDetailListItem
diff --git a/app/javascript/react/screens/App/Plan/components/PlanVmsList.js b/app/javascript/react/screens/App/Plan/components/PlanVmsList.js
index 1837f10b3d..2fb4dc2ac9 100644
--- a/app/javascript/react/screens/App/Plan/components/PlanVmsList.js
+++ b/app/javascript/react/screens/App/Plan/components/PlanVmsList.js
@@ -20,7 +20,7 @@ const PlanVmsList = props => (
             {renderActiveFilters(filteredSortedPaginatedListItems)}
           </Toolbar>
         </Grid.Row>
-        <div style={{ overflow: 'auto', paddingBottom: 300, height: '100%' }}>
+        <div className="main-body-content">
           <ListView className="plan-request-details-list">
             {filteredSortedPaginatedListItems.items.map((task, n) => (
               <ListView.Item
diff --git a/app/javascript/react/screens/App/Settings/Settings.js b/app/javascript/react/screens/App/Settings/Settings.js
index 50bad1868c..e34667665e 100644
--- a/app/javascript/react/screens/App/Settings/Settings.js
+++ b/app/javascript/react/screens/App/Settings/Settings.js
@@ -16,7 +16,7 @@ class Settings extends React.Component {
     const { match, redirectTo, productFeatures } = this.props;
 
     return (
-      <React.Fragment>
+      <div className="main-scroll-container">
         <MigrationBreadcrumbBar activeHref="#/settings" productFeatures={productFeatures} />
         <div style={{ marginTop: 10 }}>
           <Tabs id="settings-tabs" activeKey={match.path} onSelect={key => redirectTo(key)} unmountOnExit>
@@ -28,7 +28,7 @@ class Settings extends React.Component {
             </Tab>
           </Tabs>
         </div>
-      </React.Fragment>
+      </div>
     );
   }
 }
diff --git a/app/javascript/react/screens/App/Settings/__tests__/__snapshots__/Settings.test.js.snap b/app/javascript/react/screens/App/Settings/__tests__/__snapshots__/Settings.test.js.snap
index d1b12f9739..8b7d2ab020 100644
--- a/app/javascript/react/screens/App/Settings/__tests__/__snapshots__/Settings.test.js.snap
+++ b/app/javascript/react/screens/App/Settings/__tests__/__snapshots__/Settings.test.js.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Settings component renders correctly 1`] = `
-<Fragment>
+<div
+  className="main-scroll-container"
+>
   <MigrationBreadcrumbBar
     activeHref="#/settings"
   />
@@ -32,5 +34,5 @@ exports[`Settings component renders correctly 1`] = `
       </Tab>
     </Uncontrolled(Tabs)>
   </div>
-</Fragment>
+</div>
 `;
diff --git a/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/ConversionHostsList.js b/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/ConversionHostsList.js
index fd4a116f6b..def73ef964 100644
--- a/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/ConversionHostsList.js
+++ b/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/ConversionHostsList.js
@@ -43,7 +43,7 @@ const ConversionHostsList = ({
               {renderActiveFilters(filteredSortedPaginatedListItems)}
             </Toolbar>
           </Grid.Row>
-          <div style={{ overflow: 'auto', paddingBottom: 300, height: '100%' }}>
+          <div className="main-body-content">
             <ListView className="conversion-hosts-list" id="conversion_hosts">
               {filteredSortedPaginatedListItems.items.map(listItem => {
                 const { isTask } = listItem.meta;
diff --git a/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/__tests__/__snapshots__/ConversionHostsList.test.js.snap b/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/__tests__/__snapshots__/ConversionHostsList.test.js.snap
index 920f0e4dd6..828c83ebfc 100644
--- a/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/__tests__/__snapshots__/ConversionHostsList.test.js.snap
+++ b/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/__tests__/__snapshots__/ConversionHostsList.test.js.snap
@@ -82,13 +82,7 @@ exports[`conversion hosts list renders the inner list view correctly 1`] = `
     </withContext(Toolbar)>
   </Row>
   <div
-    style={
-      Object {
-        "height": "100%",
-        "overflow": "auto",
-        "paddingBottom": 300,
-      }
-    }
+    className="main-body-content"
   >
     <ListView
       className="conversion-hosts-list"