From df8787b104efd9185a15d29bd5682826e5d0ceaa Mon Sep 17 00:00:00 2001
From: Michael Marcialis <michael.marcialis@elastic.co>
Date: Fri, 25 Jun 2021 20:58:52 -0400
Subject: [PATCH] Home & Kibana Overview Page Template Update (#103003)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* apply page template comp to kibana overview

* apply page template comp to home page

* clean up

* strip null actions from array

* update snapshot and remove outdated import

* fix tests and update snapshots

* update tests and snapshots

* Switch to KibanaPageTemplate; use template=“empty”

* update snapshots

* make `EuiCard` transparent

* updated snapshots

* restored data-test-subj="homeApp"

* change scope of styles

* update snapshots
---
 .../__snapshots__/home.test.js.snap           | 1344 ++++++--------
 .../public/application/components/_home.scss  |   16 -
 .../components/_solutions_section.scss        |    4 -
 .../public/application/components/home.js     |   99 +-
 .../application/components/home.test.js       |    2 +-
 .../public/components/_overview.scss          |   22 +-
 .../__snapshots__/add_data.test.tsx.snap      |    2 +-
 .../public/components/add_data/add_data.tsx   |    2 +-
 .../getting_started.test.tsx.snap             |   24 +-
 .../getting_started/getting_started.tsx       |    2 +-
 .../__snapshots__/overview.test.tsx.snap      | 1641 +++++++----------
 .../components/overview/overview.test.tsx     |    2 +-
 .../public/components/overview/overview.tsx   |  261 +--
 .../public/overview_page/index.ts             |    2 +-
 .../overview_page_actions.test.tsx.snap       |  101 +
 .../index.ts                                  |    2 +-
 .../overview_page_actions.test.tsx            |   51 +
 .../overview_page_actions.tsx                 |   88 +
 .../overview_page_header.test.tsx.snap        |   69 -
 .../_overview_page_header.scss                |   14 -
 .../overview_page_header/index.scss           |    1 -
 .../overview_page_header.test.tsx             |   38 -
 .../overview_page_header.tsx                  |  141 --
 23 files changed, 1743 insertions(+), 2185 deletions(-)
 create mode 100644 src/plugins/kibana_react/public/overview_page/overview_page_actions/__snapshots__/overview_page_actions.test.tsx.snap
 rename src/plugins/kibana_react/public/overview_page/{overview_page_header => overview_page_actions}/index.ts (89%)
 create mode 100644 src/plugins/kibana_react/public/overview_page/overview_page_actions/overview_page_actions.test.tsx
 create mode 100644 src/plugins/kibana_react/public/overview_page/overview_page_actions/overview_page_actions.tsx
 delete mode 100644 src/plugins/kibana_react/public/overview_page/overview_page_header/__snapshots__/overview_page_header.test.tsx.snap
 delete mode 100644 src/plugins/kibana_react/public/overview_page/overview_page_header/_overview_page_header.scss
 delete mode 100644 src/plugins/kibana_react/public/overview_page/overview_page_header/index.scss
 delete mode 100644 src/plugins/kibana_react/public/overview_page/overview_page_header/overview_page_header.test.tsx
 delete mode 100644 src/plugins/kibana_react/public/overview_page/overview_page_header/overview_page_header.tsx

diff --git a/src/plugins/home/public/application/components/__snapshots__/home.test.js.snap b/src/plugins/home/public/application/components/__snapshots__/home.test.js.snap
index b949fa7995d30..153438b34eb47 100644
--- a/src/plugins/home/public/application/components/__snapshots__/home.test.js.snap
+++ b/src/plugins/home/public/application/components/__snapshots__/home.test.js.snap
@@ -1,819 +1,707 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`home change home route should render a link to change the default route in advanced settings if advanced settings is enabled 1`] = `
-<main
-  aria-labelledby="kbnOverviewPageHeader__title"
-  className="homWrapper"
+<Component
   data-test-subj="homeApp"
->
-  <mockConstructor
-    addBasePath={[Function]}
-    overlap={0}
-    showDevToolsLink={true}
-    showManagementLink={true}
-    title={
-      <FormattedMessage
+  pageHeader={
+    Object {
+      "pageTitle": <FormattedMessage
         defaultMessage="Home"
         id="home.header.title"
         values={Object {}}
-      />
+      />,
+      "rightSideItems": Array [],
     }
-  />
-  <div
-    className="homContent"
+  }
+  template="empty"
+>
+  <EuiFlexGroup
+    className="homData homData--expanded"
   >
-    <EuiFlexGroup
-      className="homData homData--expanded"
-    >
-      <EuiFlexItem>
-        <AddData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <ManageData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <mockConstructor
-      addBasePath={[Function]}
-      onChangeDefaultRoute={[Function]}
-      onSetDefaultRoute={[Function]}
-      path="/app/home"
-    />
-  </div>
-</main>
+    <EuiFlexItem>
+      <AddData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <ManageData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
+  <mockConstructor
+    addBasePath={[Function]}
+    onChangeDefaultRoute={[Function]}
+    onSetDefaultRoute={[Function]}
+    path="/app/home"
+  />
+</Component>
 `;
 
 exports[`home directories should not render directory entry when showOnHomePage is false 1`] = `
-<main
-  aria-labelledby="kbnOverviewPageHeader__title"
-  className="homWrapper"
+<Component
   data-test-subj="homeApp"
->
-  <mockConstructor
-    addBasePath={[Function]}
-    overlap={0}
-    showDevToolsLink={true}
-    showManagementLink={true}
-    title={
-      <FormattedMessage
+  pageHeader={
+    Object {
+      "pageTitle": <FormattedMessage
         defaultMessage="Home"
         id="home.header.title"
         values={Object {}}
-      />
+      />,
+      "rightSideItems": Array [],
     }
-  />
-  <div
-    className="homContent"
+  }
+  template="empty"
+>
+  <EuiFlexGroup
+    className="homData homData--expanded"
   >
-    <EuiFlexGroup
-      className="homData homData--expanded"
-    >
-      <EuiFlexItem>
-        <AddData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <ManageData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <mockConstructor
-      addBasePath={[Function]}
-      onChangeDefaultRoute={[Function]}
-      onSetDefaultRoute={[Function]}
-      path="/app/home"
-    />
-  </div>
-</main>
+    <EuiFlexItem>
+      <AddData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <ManageData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
+  <mockConstructor
+    addBasePath={[Function]}
+    onChangeDefaultRoute={[Function]}
+    onSetDefaultRoute={[Function]}
+    path="/app/home"
+  />
+</Component>
 `;
 
 exports[`home directories should render ADMIN directory entry in "Manage your data" panel 1`] = `
-<main
-  aria-labelledby="kbnOverviewPageHeader__title"
-  className="homWrapper"
+<Component
   data-test-subj="homeApp"
->
-  <mockConstructor
-    addBasePath={[Function]}
-    overlap={0}
-    showDevToolsLink={true}
-    showManagementLink={true}
-    title={
-      <FormattedMessage
+  pageHeader={
+    Object {
+      "pageTitle": <FormattedMessage
         defaultMessage="Home"
         id="home.header.title"
         values={Object {}}
-      />
+      />,
+      "rightSideItems": Array [],
     }
-  />
-  <div
-    className="homContent"
+  }
+  template="empty"
+>
+  <EuiFlexGroup
+    className="homData homData--expanded"
   >
-    <EuiFlexGroup
-      className="homData homData--expanded"
-    >
-      <EuiFlexItem>
-        <AddData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <ManageData
-          addBasePath={[Function]}
-          features={
-            Array [
-              Object {
-                "category": "admin",
-                "description": "Manage the index patterns that help retrieve your data from Elasticsearch.",
-                "icon": "indexPatternApp",
-                "id": "index_patterns",
-                "path": "index_management_landing_page",
-                "showOnHomePage": true,
-                "title": "Index Patterns",
-              },
-            ]
-          }
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <mockConstructor
-      addBasePath={[Function]}
-      onChangeDefaultRoute={[Function]}
-      onSetDefaultRoute={[Function]}
-      path="/app/home"
-    />
-  </div>
-</main>
+    <EuiFlexItem>
+      <AddData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <ManageData
+        addBasePath={[Function]}
+        features={
+          Array [
+            Object {
+              "category": "admin",
+              "description": "Manage the index patterns that help retrieve your data from Elasticsearch.",
+              "icon": "indexPatternApp",
+              "id": "index_patterns",
+              "path": "index_management_landing_page",
+              "showOnHomePage": true,
+              "title": "Index Patterns",
+            },
+          ]
+        }
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
+  <mockConstructor
+    addBasePath={[Function]}
+    onChangeDefaultRoute={[Function]}
+    onSetDefaultRoute={[Function]}
+    path="/app/home"
+  />
+</Component>
 `;
 
 exports[`home directories should render DATA directory entry in "Ingest your data" panel 1`] = `
-<main
-  aria-labelledby="kbnOverviewPageHeader__title"
-  className="homWrapper"
+<Component
   data-test-subj="homeApp"
->
-  <mockConstructor
-    addBasePath={[Function]}
-    overlap={0}
-    showDevToolsLink={true}
-    showManagementLink={true}
-    title={
-      <FormattedMessage
+  pageHeader={
+    Object {
+      "pageTitle": <FormattedMessage
         defaultMessage="Home"
         id="home.header.title"
         values={Object {}}
-      />
+      />,
+      "rightSideItems": Array [],
     }
-  />
-  <div
-    className="homContent"
+  }
+  template="empty"
+>
+  <EuiFlexGroup
+    className="homData homData--expanded"
   >
-    <EuiFlexGroup
-      className="homData homData--expanded"
-    >
-      <EuiFlexItem>
-        <AddData
-          addBasePath={[Function]}
-          features={
-            Array [
-              Object {
-                "category": "data",
-                "description": "Display and share a collection of visualizations and saved searches.",
-                "icon": "dashboardApp",
-                "id": "dashboard",
-                "path": "dashboard_landing_page",
-                "showOnHomePage": true,
-                "title": "Dashboard",
-              },
-            ]
-          }
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <ManageData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <mockConstructor
-      addBasePath={[Function]}
-      onChangeDefaultRoute={[Function]}
-      onSetDefaultRoute={[Function]}
-      path="/app/home"
-    />
-  </div>
-</main>
+    <EuiFlexItem>
+      <AddData
+        addBasePath={[Function]}
+        features={
+          Array [
+            Object {
+              "category": "data",
+              "description": "Display and share a collection of visualizations and saved searches.",
+              "icon": "dashboardApp",
+              "id": "dashboard",
+              "path": "dashboard_landing_page",
+              "showOnHomePage": true,
+              "title": "Dashboard",
+            },
+          ]
+        }
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <ManageData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
+  <mockConstructor
+    addBasePath={[Function]}
+    onChangeDefaultRoute={[Function]}
+    onSetDefaultRoute={[Function]}
+    path="/app/home"
+  />
+</Component>
 `;
 
 exports[`home directories should render solutions in the "solution section" 1`] = `
-<main
-  aria-labelledby="kbnOverviewPageHeader__title"
-  className="homWrapper"
+<Component
   data-test-subj="homeApp"
->
-  <mockConstructor
-    addBasePath={[Function]}
-    overlap={4}
-    showDevToolsLink={true}
-    showManagementLink={true}
-    title={
-      <FormattedMessage
+  pageHeader={
+    Object {
+      "pageTitle": <FormattedMessage
         defaultMessage="Home"
         id="home.header.title"
         values={Object {}}
-      />
+      />,
+      "rightSideItems": Array [],
+    }
+  }
+  template="empty"
+>
+  <SolutionsSection
+    addBasePath={[Function]}
+    directories={Array []}
+    solutions={
+      Array [
+        Object {
+          "appDescriptions": Array [
+            "Analyze data in dashboards",
+          ],
+          "icon": "logoKibana",
+          "id": "kibana",
+          "order": 1,
+          "path": "kibana_landing_page",
+          "subtitle": "Visualize & analyze",
+          "title": "Kibana",
+        },
+        Object {
+          "appDescriptions": Array [
+            "Example use case",
+          ],
+          "icon": "empty",
+          "id": "solution-2",
+          "order": 2,
+          "path": "path-to-solution-two",
+          "subtitle": "Subtitle for solution two",
+          "title": "Solution two",
+        },
+        Object {
+          "appDescriptions": Array [
+            "Example use case",
+          ],
+          "icon": "empty",
+          "id": "solution-3",
+          "order": 3,
+          "path": "path-to-solution-three",
+          "subtitle": "Subtitle for solution three",
+          "title": "Solution three",
+        },
+        Object {
+          "appDescriptions": Array [
+            "Example use case",
+          ],
+          "icon": "empty",
+          "id": "solution-4",
+          "order": 4,
+          "path": "path-to-solution-four",
+          "subtitle": "Subtitle for solution four",
+          "title": "Solution four",
+        },
+      ]
     }
   />
-  <div
-    className="homContent"
+  <EuiFlexGroup
+    className="homData homData--expanded"
   >
-    <SolutionsSection
-      addBasePath={[Function]}
-      directories={Array []}
-      solutions={
-        Array [
-          Object {
-            "appDescriptions": Array [
-              "Analyze data in dashboards",
-            ],
-            "icon": "logoKibana",
-            "id": "kibana",
-            "order": 1,
-            "path": "kibana_landing_page",
-            "subtitle": "Visualize & analyze",
-            "title": "Kibana",
-          },
-          Object {
-            "appDescriptions": Array [
-              "Example use case",
-            ],
-            "icon": "empty",
-            "id": "solution-2",
-            "order": 2,
-            "path": "path-to-solution-two",
-            "subtitle": "Subtitle for solution two",
-            "title": "Solution two",
-          },
-          Object {
-            "appDescriptions": Array [
-              "Example use case",
-            ],
-            "icon": "empty",
-            "id": "solution-3",
-            "order": 3,
-            "path": "path-to-solution-three",
-            "subtitle": "Subtitle for solution three",
-            "title": "Solution three",
-          },
-          Object {
-            "appDescriptions": Array [
-              "Example use case",
-            ],
-            "icon": "empty",
-            "id": "solution-4",
-            "order": 4,
-            "path": "path-to-solution-four",
-            "subtitle": "Subtitle for solution four",
-            "title": "Solution four",
-          },
-        ]
-      }
-    />
-    <EuiFlexGroup
-      className="homData homData--expanded"
-    >
-      <EuiFlexItem>
-        <AddData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <ManageData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <mockConstructor
-      addBasePath={[Function]}
-      onChangeDefaultRoute={[Function]}
-      onSetDefaultRoute={[Function]}
-      path="/app/home"
-    />
-  </div>
-</main>
+    <EuiFlexItem>
+      <AddData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <ManageData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
+  <mockConstructor
+    addBasePath={[Function]}
+    onChangeDefaultRoute={[Function]}
+    onSetDefaultRoute={[Function]}
+    path="/app/home"
+  />
+</Component>
 `;
 
 exports[`home header render 1`] = `
-<main
-  aria-labelledby="kbnOverviewPageHeader__title"
-  className="homWrapper"
+<Component
   data-test-subj="homeApp"
->
-  <mockConstructor
-    addBasePath={[Function]}
-    overlap={0}
-    showDevToolsLink={true}
-    showManagementLink={true}
-    title={
-      <FormattedMessage
+  pageHeader={
+    Object {
+      "pageTitle": <FormattedMessage
         defaultMessage="Home"
         id="home.header.title"
         values={Object {}}
-      />
+      />,
+      "rightSideItems": Array [],
     }
-  />
-  <div
-    className="homContent"
+  }
+  template="empty"
+>
+  <EuiFlexGroup
+    className="homData homData--expanded"
   >
-    <EuiFlexGroup
-      className="homData homData--expanded"
-    >
-      <EuiFlexItem>
-        <AddData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <ManageData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <mockConstructor
-      addBasePath={[Function]}
-      onChangeDefaultRoute={[Function]}
-      onSetDefaultRoute={[Function]}
-      path="/app/home"
-    />
-  </div>
-</main>
+    <EuiFlexItem>
+      <AddData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <ManageData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
+  <mockConstructor
+    addBasePath={[Function]}
+    onChangeDefaultRoute={[Function]}
+    onSetDefaultRoute={[Function]}
+    path="/app/home"
+  />
+</Component>
 `;
 
 exports[`home header should show "Dev tools" link if console is available 1`] = `
-<main
-  aria-labelledby="kbnOverviewPageHeader__title"
-  className="homWrapper"
+<Component
   data-test-subj="homeApp"
->
-  <mockConstructor
-    addBasePath={[Function]}
-    overlap={0}
-    showDevToolsLink={true}
-    showManagementLink={true}
-    title={
-      <FormattedMessage
+  pageHeader={
+    Object {
+      "pageTitle": <FormattedMessage
         defaultMessage="Home"
         id="home.header.title"
         values={Object {}}
-      />
+      />,
+      "rightSideItems": Array [],
     }
-  />
-  <div
-    className="homContent"
+  }
+  template="empty"
+>
+  <EuiFlexGroup
+    className="homData homData--expanded"
   >
-    <EuiFlexGroup
-      className="homData homData--expanded"
-    >
-      <EuiFlexItem>
-        <AddData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <ManageData
-          addBasePath={[Function]}
-          features={
-            Array [
-              Object {
-                "category": "admin",
-                "description": "Skip cURL and use a JSON interface to work with your data in Console.",
-                "icon": "consoleApp",
-                "id": "console",
-                "path": "path-to-dev-tools",
-                "showOnHomePage": false,
-                "title": "Console",
-              },
-            ]
-          }
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <mockConstructor
-      addBasePath={[Function]}
-      onChangeDefaultRoute={[Function]}
-      onSetDefaultRoute={[Function]}
-      path="/app/home"
-    />
-  </div>
-</main>
+    <EuiFlexItem>
+      <AddData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <ManageData
+        addBasePath={[Function]}
+        features={
+          Array [
+            Object {
+              "category": "admin",
+              "description": "Skip cURL and use a JSON interface to work with your data in Console.",
+              "icon": "consoleApp",
+              "id": "console",
+              "path": "path-to-dev-tools",
+              "showOnHomePage": false,
+              "title": "Console",
+            },
+          ]
+        }
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
+  <mockConstructor
+    addBasePath={[Function]}
+    onChangeDefaultRoute={[Function]}
+    onSetDefaultRoute={[Function]}
+    path="/app/home"
+  />
+</Component>
 `;
 
 exports[`home header should show "Manage" link if stack management is available 1`] = `
-<main
-  aria-labelledby="kbnOverviewPageHeader__title"
-  className="homWrapper"
+<Component
   data-test-subj="homeApp"
->
-  <mockConstructor
-    addBasePath={[Function]}
-    overlap={0}
-    showDevToolsLink={true}
-    showManagementLink={true}
-    title={
-      <FormattedMessage
+  pageHeader={
+    Object {
+      "pageTitle": <FormattedMessage
         defaultMessage="Home"
         id="home.header.title"
         values={Object {}}
-      />
+      />,
+      "rightSideItems": Array [],
     }
-  />
-  <div
-    className="homContent"
+  }
+  template="empty"
+>
+  <EuiFlexGroup
+    className="homData homData--expanded"
   >
-    <EuiFlexGroup
-      className="homData homData--expanded"
-    >
-      <EuiFlexItem>
-        <AddData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <ManageData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <mockConstructor
-      addBasePath={[Function]}
-      onChangeDefaultRoute={[Function]}
-      onSetDefaultRoute={[Function]}
-      path="/app/home"
-    />
-  </div>
-</main>
+    <EuiFlexItem>
+      <AddData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <ManageData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
+  <mockConstructor
+    addBasePath={[Function]}
+    onChangeDefaultRoute={[Function]}
+    onSetDefaultRoute={[Function]}
+    path="/app/home"
+  />
+</Component>
 `;
 
 exports[`home isNewKibanaInstance should safely handle execeptions 1`] = `
-<main
-  aria-labelledby="kbnOverviewPageHeader__title"
-  className="homWrapper"
+<Component
   data-test-subj="homeApp"
->
-  <mockConstructor
-    addBasePath={[Function]}
-    overlap={0}
-    showDevToolsLink={true}
-    showManagementLink={true}
-    title={
-      <FormattedMessage
+  pageHeader={
+    Object {
+      "pageTitle": <FormattedMessage
         defaultMessage="Home"
         id="home.header.title"
         values={Object {}}
-      />
+      />,
+      "rightSideItems": Array [],
     }
-  />
-  <div
-    className="homContent"
+  }
+  template="empty"
+>
+  <EuiFlexGroup
+    className="homData homData--expanded"
   >
-    <EuiFlexGroup
-      className="homData homData--expanded"
-    >
-      <EuiFlexItem>
-        <AddData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <ManageData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <mockConstructor
-      addBasePath={[Function]}
-      onChangeDefaultRoute={[Function]}
-      onSetDefaultRoute={[Function]}
-      path="/app/home"
-    />
-  </div>
-</main>
+    <EuiFlexItem>
+      <AddData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <ManageData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
+  <mockConstructor
+    addBasePath={[Function]}
+    onChangeDefaultRoute={[Function]}
+    onSetDefaultRoute={[Function]}
+    path="/app/home"
+  />
+</Component>
 `;
 
 exports[`home isNewKibanaInstance should set isNewKibanaInstance to false when there are index patterns 1`] = `
-<main
-  aria-labelledby="kbnOverviewPageHeader__title"
-  className="homWrapper"
+<Component
   data-test-subj="homeApp"
->
-  <mockConstructor
-    addBasePath={[Function]}
-    overlap={0}
-    showDevToolsLink={true}
-    showManagementLink={true}
-    title={
-      <FormattedMessage
+  pageHeader={
+    Object {
+      "pageTitle": <FormattedMessage
         defaultMessage="Home"
         id="home.header.title"
         values={Object {}}
-      />
+      />,
+      "rightSideItems": Array [],
     }
-  />
-  <div
-    className="homContent"
+  }
+  template="empty"
+>
+  <EuiFlexGroup
+    className="homData homData--expanded"
   >
-    <EuiFlexGroup
-      className="homData homData--expanded"
-    >
-      <EuiFlexItem>
-        <AddData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <ManageData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <mockConstructor
-      addBasePath={[Function]}
-      onChangeDefaultRoute={[Function]}
-      onSetDefaultRoute={[Function]}
-      path="/app/home"
-    />
-  </div>
-</main>
+    <EuiFlexItem>
+      <AddData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <ManageData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
+  <mockConstructor
+    addBasePath={[Function]}
+    onChangeDefaultRoute={[Function]}
+    onSetDefaultRoute={[Function]}
+    path="/app/home"
+  />
+</Component>
 `;
 
 exports[`home isNewKibanaInstance should set isNewKibanaInstance to true when there are no index patterns 1`] = `
-<main
-  aria-labelledby="kbnOverviewPageHeader__title"
-  className="homWrapper"
+<Component
   data-test-subj="homeApp"
->
-  <mockConstructor
-    addBasePath={[Function]}
-    overlap={0}
-    showDevToolsLink={true}
-    showManagementLink={true}
-    title={
-      <FormattedMessage
+  pageHeader={
+    Object {
+      "pageTitle": <FormattedMessage
         defaultMessage="Home"
         id="home.header.title"
         values={Object {}}
-      />
+      />,
+      "rightSideItems": Array [],
     }
-  />
-  <div
-    className="homContent"
+  }
+  template="empty"
+>
+  <EuiFlexGroup
+    className="homData homData--expanded"
   >
-    <EuiFlexGroup
-      className="homData homData--expanded"
-    >
-      <EuiFlexItem>
-        <AddData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <ManageData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <mockConstructor
-      addBasePath={[Function]}
-      onChangeDefaultRoute={[Function]}
-      onSetDefaultRoute={[Function]}
-      path="/app/home"
-    />
-  </div>
-</main>
+    <EuiFlexItem>
+      <AddData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <ManageData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
+  <mockConstructor
+    addBasePath={[Function]}
+    onChangeDefaultRoute={[Function]}
+    onSetDefaultRoute={[Function]}
+    path="/app/home"
+  />
+</Component>
 `;
 
 exports[`home should render home component 1`] = `
-<main
-  aria-labelledby="kbnOverviewPageHeader__title"
-  className="homWrapper"
+<Component
   data-test-subj="homeApp"
->
-  <mockConstructor
-    addBasePath={[Function]}
-    overlap={0}
-    showDevToolsLink={true}
-    showManagementLink={true}
-    title={
-      <FormattedMessage
+  pageHeader={
+    Object {
+      "pageTitle": <FormattedMessage
         defaultMessage="Home"
         id="home.header.title"
         values={Object {}}
-      />
+      />,
+      "rightSideItems": Array [],
     }
-  />
-  <div
-    className="homContent"
+  }
+  template="empty"
+>
+  <EuiFlexGroup
+    className="homData homData--expanded"
   >
-    <EuiFlexGroup
-      className="homData homData--expanded"
-    >
-      <EuiFlexItem>
-        <AddData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <ManageData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <mockConstructor
-      addBasePath={[Function]}
-      onChangeDefaultRoute={[Function]}
-      onSetDefaultRoute={[Function]}
-      path="/app/home"
-    />
-  </div>
-</main>
+    <EuiFlexItem>
+      <AddData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <ManageData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
+  <mockConstructor
+    addBasePath={[Function]}
+    onChangeDefaultRoute={[Function]}
+    onSetDefaultRoute={[Function]}
+    path="/app/home"
+  />
+</Component>
 `;
 
 exports[`home welcome should show the normal home page if loading fails 1`] = `
-<main
-  aria-labelledby="kbnOverviewPageHeader__title"
-  className="homWrapper"
+<Component
   data-test-subj="homeApp"
->
-  <mockConstructor
-    addBasePath={[Function]}
-    overlap={0}
-    showDevToolsLink={true}
-    showManagementLink={true}
-    title={
-      <FormattedMessage
+  pageHeader={
+    Object {
+      "pageTitle": <FormattedMessage
         defaultMessage="Home"
         id="home.header.title"
         values={Object {}}
-      />
+      />,
+      "rightSideItems": Array [],
     }
-  />
-  <div
-    className="homContent"
+  }
+  template="empty"
+>
+  <EuiFlexGroup
+    className="homData homData--expanded"
   >
-    <EuiFlexGroup
-      className="homData homData--expanded"
-    >
-      <EuiFlexItem>
-        <AddData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <ManageData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <mockConstructor
-      addBasePath={[Function]}
-      onChangeDefaultRoute={[Function]}
-      onSetDefaultRoute={[Function]}
-      path="/app/home"
-    />
-  </div>
-</main>
+    <EuiFlexItem>
+      <AddData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <ManageData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
+  <mockConstructor
+    addBasePath={[Function]}
+    onChangeDefaultRoute={[Function]}
+    onSetDefaultRoute={[Function]}
+    path="/app/home"
+  />
+</Component>
 `;
 
 exports[`home welcome should show the normal home page if welcome screen is disabled locally 1`] = `
-<main
-  aria-labelledby="kbnOverviewPageHeader__title"
-  className="homWrapper"
+<Component
   data-test-subj="homeApp"
->
-  <mockConstructor
-    addBasePath={[Function]}
-    overlap={0}
-    showDevToolsLink={true}
-    showManagementLink={true}
-    title={
-      <FormattedMessage
+  pageHeader={
+    Object {
+      "pageTitle": <FormattedMessage
         defaultMessage="Home"
         id="home.header.title"
         values={Object {}}
-      />
+      />,
+      "rightSideItems": Array [],
     }
-  />
-  <div
-    className="homContent"
+  }
+  template="empty"
+>
+  <EuiFlexGroup
+    className="homData homData--expanded"
   >
-    <EuiFlexGroup
-      className="homData homData--expanded"
-    >
-      <EuiFlexItem>
-        <AddData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <ManageData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <mockConstructor
-      addBasePath={[Function]}
-      onChangeDefaultRoute={[Function]}
-      onSetDefaultRoute={[Function]}
-      path="/app/home"
-    />
-  </div>
-</main>
+    <EuiFlexItem>
+      <AddData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <ManageData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
+  <mockConstructor
+    addBasePath={[Function]}
+    onChangeDefaultRoute={[Function]}
+    onSetDefaultRoute={[Function]}
+    path="/app/home"
+  />
+</Component>
 `;
 
 exports[`home welcome should show the welcome screen if enabled, and there are no index patterns defined 1`] = `
@@ -824,53 +712,45 @@ exports[`home welcome should show the welcome screen if enabled, and there are n
 `;
 
 exports[`home welcome stores skip welcome setting if skipped 1`] = `
-<main
-  aria-labelledby="kbnOverviewPageHeader__title"
-  className="homWrapper"
+<Component
   data-test-subj="homeApp"
->
-  <mockConstructor
-    addBasePath={[Function]}
-    overlap={0}
-    showDevToolsLink={true}
-    showManagementLink={true}
-    title={
-      <FormattedMessage
+  pageHeader={
+    Object {
+      "pageTitle": <FormattedMessage
         defaultMessage="Home"
         id="home.header.title"
         values={Object {}}
-      />
+      />,
+      "rightSideItems": Array [],
     }
-  />
-  <div
-    className="homContent"
+  }
+  template="empty"
+>
+  <EuiFlexGroup
+    className="homData homData--expanded"
   >
-    <EuiFlexGroup
-      className="homData homData--expanded"
-    >
-      <EuiFlexItem>
-        <AddData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <ManageData
-          addBasePath={[Function]}
-          features={Array []}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <mockConstructor
-      addBasePath={[Function]}
-      onChangeDefaultRoute={[Function]}
-      onSetDefaultRoute={[Function]}
-      path="/app/home"
-    />
-  </div>
-</main>
+    <EuiFlexItem>
+      <AddData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <ManageData
+        addBasePath={[Function]}
+        features={Array []}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
+  <mockConstructor
+    addBasePath={[Function]}
+    onChangeDefaultRoute={[Function]}
+    onSetDefaultRoute={[Function]}
+    path="/app/home"
+  />
+</Component>
 `;
diff --git a/src/plugins/home/public/application/components/_home.scss b/src/plugins/home/public/application/components/_home.scss
index 913e1511a6314..34643433d6112 100644
--- a/src/plugins/home/public/application/components/_home.scss
+++ b/src/plugins/home/public/application/components/_home.scss
@@ -1,19 +1,3 @@
-@import '../../../../../core/public/mixins';
-
-.homWrapper {
-  @include kibanaFullBodyMinHeight();
-  background-color: $euiColorEmptyShade;
-  display: flex;
-  flex-direction: column;
-}
-
-.homContent {
-  margin: 0 auto;
-  max-width: 1200px;
-  padding: $euiSizeXL $euiSize;
-  width: 100%;
-}
-
 .homData--expanded {
   flex-direction: column;
 
diff --git a/src/plugins/home/public/application/components/_solutions_section.scss b/src/plugins/home/public/application/components/_solutions_section.scss
index a808d83916c2d..965447f689f98 100644
--- a/src/plugins/home/public/application/components/_solutions_section.scss
+++ b/src/plugins/home/public/application/components/_solutions_section.scss
@@ -1,7 +1,3 @@
-.homSolutions {
-  margin-top: -($euiSizeXL + $euiSizeL + $euiSizeM);
-}
-
 .homSolutions__content {
   min-height: $euiSize * 16;
 
diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js
index 3c1ba8eea22ca..fdaaeef01f47a 100644
--- a/src/plugins/home/public/application/components/home.js
+++ b/src/plugins/home/public/application/components/home.js
@@ -13,8 +13,9 @@ import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
 import { METRIC_TYPE } from '@kbn/analytics';
 import { i18n } from '@kbn/i18n';
 import {
+  KibanaPageTemplate,
+  overviewPageActions,
   OverviewPageFooter,
-  OverviewPageHeader,
 } from '../../../../../../src/plugins/kibana_react/public';
 import { HOME_APP_BASE_PATH } from '../../../common/constants';
 import { FeatureCatalogueCategory } from '../../services';
@@ -113,7 +114,7 @@ export class Home extends Component {
 
   renderNormal() {
     const { addBasePath, solutions, directories } = this.props;
-    const { trackUiMetric } = getServices();
+    const { application, trackUiMetric } = getServices();
     const devTools = this.findDirectoryById('console');
     const addDataFeatures = this.getFeaturesByCategory(FeatureCatalogueCategory.DATA);
     const manageDataFeatures = this.getFeaturesByCategory(FeatureCatalogueCategory.ADMIN);
@@ -124,58 +125,56 @@ export class Home extends Component {
     }
 
     return (
-      <main
-        aria-labelledby="kbnOverviewPageHeader__title"
-        className="homWrapper"
+      <KibanaPageTemplate
         data-test-subj="homeApp"
+        pageHeader={{
+          pageTitle: <FormattedMessage id="home.header.title" defaultMessage="Home" />,
+          rightSideItems: overviewPageActions({
+            addBasePath,
+            application,
+            showDevToolsLink: true,
+            showManagementLink: true,
+          }),
+        }}
+        template="empty"
       >
-        <OverviewPageHeader
-          addBasePath={addBasePath}
-          overlap={solutions.length}
-          showDevToolsLink
-          showManagementLink
-          title={<FormattedMessage id="home.header.title" defaultMessage="Home" />}
-        />
-
-        <div className="homContent">
-          {solutions.length ? (
-            <SolutionsSection
-              addBasePath={addBasePath}
-              solutions={solutions}
-              directories={directories}
-            />
-          ) : null}
-
-          <EuiFlexGroup
-            className={`homData ${
-              addDataFeatures.length === 1 && manageDataFeatures.length === 1
-                ? 'homData--compressed'
-                : 'homData--expanded'
-            }`}
-          >
-            <EuiFlexItem>
-              <AddData addBasePath={addBasePath} features={addDataFeatures} />
-            </EuiFlexItem>
-
-            <EuiFlexItem>
-              <ManageData addBasePath={addBasePath} features={manageDataFeatures} />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-
-          <EuiHorizontalRule margin="xl" aria-hidden="true" />
-
-          <OverviewPageFooter
+        {solutions.length ? (
+          <SolutionsSection
             addBasePath={addBasePath}
-            path={HOME_APP_BASE_PATH}
-            onSetDefaultRoute={() => {
-              trackUiMetric(METRIC_TYPE.CLICK, 'set_home_as_default_route');
-            }}
-            onChangeDefaultRoute={() => {
-              trackUiMetric(METRIC_TYPE.CLICK, 'change_to_different_default_route');
-            }}
+            solutions={solutions}
+            directories={directories}
           />
-        </div>
-      </main>
+        ) : null}
+
+        <EuiFlexGroup
+          className={`homData ${
+            addDataFeatures.length === 1 && manageDataFeatures.length === 1
+              ? 'homData--compressed'
+              : 'homData--expanded'
+          }`}
+        >
+          <EuiFlexItem>
+            <AddData addBasePath={addBasePath} features={addDataFeatures} />
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            <ManageData addBasePath={addBasePath} features={manageDataFeatures} />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        <EuiHorizontalRule margin="xl" aria-hidden="true" />
+
+        <OverviewPageFooter
+          addBasePath={addBasePath}
+          path={HOME_APP_BASE_PATH}
+          onSetDefaultRoute={() => {
+            trackUiMetric(METRIC_TYPE.CLICK, 'set_home_as_default_route');
+          }}
+          onChangeDefaultRoute={() => {
+            trackUiMetric(METRIC_TYPE.CLICK, 'change_to_different_default_route');
+          }}
+        />
+      </KibanaPageTemplate>
     );
   }
 
diff --git a/src/plugins/home/public/application/components/home.test.js b/src/plugins/home/public/application/components/home.test.js
index 2fe74c8778c0f..fb5ebca5275cc 100644
--- a/src/plugins/home/public/application/components/home.test.js
+++ b/src/plugins/home/public/application/components/home.test.js
@@ -25,8 +25,8 @@ jest.mock('../kibana_services', () => ({
 }));
 
 jest.mock('../../../../../../src/plugins/kibana_react/public', () => ({
+  overviewPageActions: jest.fn().mockReturnValue([]),
   OverviewPageFooter: jest.fn().mockReturnValue(<></>),
-  OverviewPageHeader: jest.fn().mockReturnValue(<></>),
 }));
 
 describe('home', () => {
diff --git a/src/plugins/kibana_overview/public/components/_overview.scss b/src/plugins/kibana_overview/public/components/_overview.scss
index 12e2d9cd921ec..89f2b6272a4b8 100644
--- a/src/plugins/kibana_overview/public/components/_overview.scss
+++ b/src/plugins/kibana_overview/public/components/_overview.scss
@@ -1,18 +1,5 @@
-@import '../../../../core/public/mixins';
-
-.kbnOverviewWrapper {
-  @include kibanaFullBodyMinHeight();
-  background-color: $euiColorEmptyShade;
-  display: flex;
-  flex-direction: column;
-}
-
-.kbnOverviewContent {
-  margin: 0 auto;
-  max-width: 1200px;
-  padding: $euiSizeXL $euiSize;
-  width: 100%;
-
+.kbnOverviewApps__item,
+.kbnOverviewMore__item {
   // Ensure card heights are stretched equally when wrapped with this element
   .kbnRedirectCrossAppLinks {
     align-items: flex-start;
@@ -109,11 +96,6 @@
   }
 }
 
-// Accounting for no `flush="both"` prop on EuiButtonEmpty
-.kbnOverviewDataAdd__actionButton {
-  margin-right: 0;
-}
-
 .kbnOverviewDataManage__item:not(:only-child) {
   @include euiBreakpoint('m', 'l', 'xl') {
     flex: 0 0 calc(50% - #{$euiSizeM * 2});
diff --git a/src/plugins/kibana_overview/public/components/add_data/__snapshots__/add_data.test.tsx.snap b/src/plugins/kibana_overview/public/components/add_data/__snapshots__/add_data.test.tsx.snap
index 25538d2eda287..fb32d2814c0fe 100644
--- a/src/plugins/kibana_overview/public/components/add_data/__snapshots__/add_data.test.tsx.snap
+++ b/src/plugins/kibana_overview/public/components/add_data/__snapshots__/add_data.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`AddData render 1`] = `
       <div>
         <EuiButtonEmpty
           className="kbnOverviewDataAdd__actionButton"
-          flush="left"
+          flush="both"
           href="#/tutorial_directory/sampleData"
           iconType="visTable"
           size="xs"
diff --git a/src/plugins/kibana_overview/public/components/add_data/add_data.tsx b/src/plugins/kibana_overview/public/components/add_data/add_data.tsx
index e43405bd13a4a..ecb38408e2c71 100644
--- a/src/plugins/kibana_overview/public/components/add_data/add_data.tsx
+++ b/src/plugins/kibana_overview/public/components/add_data/add_data.tsx
@@ -45,7 +45,7 @@ export const AddData: FC<Props> = ({ addBasePath, features }) => {
           <div>
             <EuiButtonEmpty
               className="kbnOverviewDataAdd__actionButton"
-              flush="left"
+              flush="both"
               href={addBasePath('#/tutorial_directory/sampleData')}
               iconType="visTable"
               size="xs"
diff --git a/src/plugins/kibana_overview/public/components/getting_started/__snapshots__/getting_started.test.tsx.snap b/src/plugins/kibana_overview/public/components/getting_started/__snapshots__/getting_started.test.tsx.snap
index 374715a277ebc..b5f501eb88a01 100644
--- a/src/plugins/kibana_overview/public/components/getting_started/__snapshots__/getting_started.test.tsx.snap
+++ b/src/plugins/kibana_overview/public/components/getting_started/__snapshots__/getting_started.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`GettingStarted dark mode on 1`] = `
           >
             <EuiCard
               description="Analyze data in dashboards."
-              display="plain"
+              display="transparent"
               icon={
                 <EuiIcon
                   color="text"
@@ -69,7 +69,7 @@ exports[`GettingStarted dark mode on 1`] = `
           >
             <EuiCard
               description="Search and find insights."
-              display="plain"
+              display="transparent"
               icon={
                 <EuiIcon
                   color="text"
@@ -89,7 +89,7 @@ exports[`GettingStarted dark mode on 1`] = `
           >
             <EuiCard
               description="Design pixel-perfect reports."
-              display="plain"
+              display="transparent"
               icon={
                 <EuiIcon
                   color="text"
@@ -109,7 +109,7 @@ exports[`GettingStarted dark mode on 1`] = `
           >
             <EuiCard
               description="Plot geographic data."
-              display="plain"
+              display="transparent"
               icon={
                 <EuiIcon
                   color="text"
@@ -129,7 +129,7 @@ exports[`GettingStarted dark mode on 1`] = `
           >
             <EuiCard
               description="Model, predict, and detect."
-              display="plain"
+              display="transparent"
               icon={
                 <EuiIcon
                   color="text"
@@ -149,7 +149,7 @@ exports[`GettingStarted dark mode on 1`] = `
           >
             <EuiCard
               description="Reveal patterns and relationships."
-              display="plain"
+              display="transparent"
               icon={
                 <EuiIcon
                   color="text"
@@ -244,7 +244,7 @@ exports[`GettingStarted render 1`] = `
           >
             <EuiCard
               description="Analyze data in dashboards."
-              display="plain"
+              display="transparent"
               icon={
                 <EuiIcon
                   color="text"
@@ -264,7 +264,7 @@ exports[`GettingStarted render 1`] = `
           >
             <EuiCard
               description="Search and find insights."
-              display="plain"
+              display="transparent"
               icon={
                 <EuiIcon
                   color="text"
@@ -284,7 +284,7 @@ exports[`GettingStarted render 1`] = `
           >
             <EuiCard
               description="Design pixel-perfect reports."
-              display="plain"
+              display="transparent"
               icon={
                 <EuiIcon
                   color="text"
@@ -304,7 +304,7 @@ exports[`GettingStarted render 1`] = `
           >
             <EuiCard
               description="Plot geographic data."
-              display="plain"
+              display="transparent"
               icon={
                 <EuiIcon
                   color="text"
@@ -324,7 +324,7 @@ exports[`GettingStarted render 1`] = `
           >
             <EuiCard
               description="Model, predict, and detect."
-              display="plain"
+              display="transparent"
               icon={
                 <EuiIcon
                   color="text"
@@ -344,7 +344,7 @@ exports[`GettingStarted render 1`] = `
           >
             <EuiCard
               description="Reveal patterns and relationships."
-              display="plain"
+              display="transparent"
               icon={
                 <EuiIcon
                   color="text"
diff --git a/src/plugins/kibana_overview/public/components/getting_started/getting_started.tsx b/src/plugins/kibana_overview/public/components/getting_started/getting_started.tsx
index 069b6d033f8c3..56247c4e91fa1 100644
--- a/src/plugins/kibana_overview/public/components/getting_started/getting_started.tsx
+++ b/src/plugins/kibana_overview/public/components/getting_started/getting_started.tsx
@@ -74,7 +74,7 @@ export const GettingStarted: FC<Props> = ({ addBasePath, isDarkTheme, apps }) =>
                 <EuiFlexItem key={title}>
                   <EuiCard
                     description={subtitle}
-                    display="plain"
+                    display="transparent"
                     icon={<EuiIcon color="text" size="l" type={icon} />}
                     layout="horizontal"
                     paddingSize="none"
diff --git a/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap b/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap
index 2e7dc9a7ddc60..a32e27050fad1 100644
--- a/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap
+++ b/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap
@@ -1,10 +1,234 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Overview render 1`] = `
-<main
-  aria-labelledby="kbnOverviewPageHeader__title"
-  className="kbnOverviewWrapper"
+<Component
+  pageHeader={
+    Object {
+      "iconType": "logoKibana",
+      "pageTitle": <FormattedMessage
+        defaultMessage="Kibana"
+        id="kibanaOverview.header.title"
+        values={Object {}}
+      />,
+      "rightSideItems": Array [],
+    }
+  }
+  template="empty"
 >
+  <section
+    aria-labelledby="kbnOverviewApps__title"
+    className="kbnOverviewApps"
+  >
+    <EuiScreenReaderOnly>
+      <h2
+        id="kbnOverviewApps__title"
+      >
+        <FormattedMessage
+          defaultMessage="Explore these apps"
+          id="kibanaOverview.apps.title"
+          values={Object {}}
+        />
+      </h2>
+    </EuiScreenReaderOnly>
+    <EuiFlexGroup
+      className="kbnOverviewApps__group kbnOverviewApps__group--primary"
+      justifyContent="center"
+    />
+    <EuiSpacer
+      size="l"
+    />
+  </section>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
+  <EuiFlexGroup
+    alignItems="flexStart"
+    className="kbnOverviewSupplements kbnOverviewSupplements--hasNews"
+  >
+    <EuiFlexItem
+      grow={1}
+    >
+      <NewsFeed
+        newsFetchResult={
+          Object {
+            "error": null,
+            "feedItems": Array [
+              Object {
+                "badge": null,
+                "description": "The official Go client now includes features like request retries and node discovery. Learn more about its architecture and package and repository layout.",
+                "expireOn": "2050-12-31T11:59:59.000Z",
+                "hash": "8e18fcedbc",
+                "linkText": "Read more on the blog",
+                "linkUrl": "https://www.elastic.co/blog/the-go-client-for-elasticsearch-introduction?blade=kibanafeed",
+                "publishOn": "2020-08-31T10:23:47.000Z",
+                "title": "The Go client for Elasticsearch: Introduction",
+              },
+              Object {
+                "badge": null,
+                "description": "Learn how to use Elastic Uptime to configure alerting and anomaly detection for sites, services, and APIs.",
+                "expireOn": "2050-12-31T11:59:59.000Z",
+                "hash": "fb3e3d42ef",
+                "linkText": "Read more on the blog",
+                "linkUrl": "https://www.elastic.co/blog/alerting-and-anomaly-detection-for-uptime-and-reliability?blade=kibanafeed",
+                "publishOn": "2020-08-14T10:23:47.000Z",
+                "title": "Alerting and anomaly detection for uptime and reliability",
+              },
+              Object {
+                "badge": null,
+                "description": "Managing data using hot-warm architecture and ILM is a cost-effective way of retaining data — and a great way to easily keep your cloud costs down.",
+                "expireOn": "2050-12-31T11:59:59.000Z",
+                "hash": "b2fc7d47d5",
+                "linkText": "Learn more on the blog",
+                "linkUrl": "https://www.elastic.co/blog/optimizing-costs-elastic-cloud-hot-warm-index-lifecycle-management?blade=kibanafeed",
+                "publishOn": "2020-08-01T10:23:47.000Z",
+                "title": "Optimizing costs in Elastic Cloud: Hot-warm + index lifecycle management",
+              },
+            ],
+            "hasNew": true,
+            "kibanaVersion": "8.0.0",
+          }
+        }
+      />
+    </EuiFlexItem>
+    <EuiFlexItem
+      grow={3}
+    >
+      <section
+        aria-labelledby="kbnOverviewMore__title"
+        className="kbnOverviewMore"
+      >
+        <EuiTitle
+          size="s"
+        >
+          <h2
+            id="kbnOverviewMore__title"
+          >
+            <FormattedMessage
+              defaultMessage="Do more with Elastic"
+              id="kibanaOverview.more.title"
+              values={Object {}}
+            />
+          </h2>
+        </EuiTitle>
+        <EuiSpacer
+          size="m"
+        />
+        <EuiFlexGroup
+          className="kbnOverviewMore__content"
+        >
+          <EuiFlexItem
+            className="kbnOverviewMore__item"
+            key="kibana"
+          >
+            <mockConstructor>
+              <EuiCard
+                className="kbnOverviewSolution kibana"
+                description=""
+                href="kibana_landing_page"
+                icon={
+                  <EuiToken
+                    className="kbnOverviewSolution__icon"
+                    fill="light"
+                    iconType="logoKibana"
+                    shape="circle"
+                    size="l"
+                  />
+                }
+                image="/plugins/kibanaOverview/assets/solutions_kibana_2x.png"
+                onClick={[Function]}
+                title="Kibana"
+                titleElement="h3"
+                titleSize="xs"
+              />
+            </mockConstructor>
+          </EuiFlexItem>
+          <EuiFlexItem
+            className="kbnOverviewMore__item"
+            key="solution-2"
+          >
+            <mockConstructor>
+              <EuiCard
+                className="kbnOverviewSolution solution-2"
+                description="Description of solution two"
+                href="path-to-solution-two"
+                icon={
+                  <EuiToken
+                    className="kbnOverviewSolution__icon"
+                    fill="light"
+                    iconType="empty"
+                    shape="circle"
+                    size="l"
+                  />
+                }
+                image="/plugins/kibanaOverview/assets/solutions_solution_2_2x.png"
+                onClick={[Function]}
+                title="Solution two"
+                titleElement="h3"
+                titleSize="xs"
+              />
+            </mockConstructor>
+          </EuiFlexItem>
+          <EuiFlexItem
+            className="kbnOverviewMore__item"
+            key="solution-3"
+          >
+            <mockConstructor>
+              <EuiCard
+                className="kbnOverviewSolution solution-3"
+                description="Description of solution three"
+                href="path-to-solution-three"
+                icon={
+                  <EuiToken
+                    className="kbnOverviewSolution__icon"
+                    fill="light"
+                    iconType="empty"
+                    shape="circle"
+                    size="l"
+                  />
+                }
+                image="/plugins/kibanaOverview/assets/solutions_solution_3_2x.png"
+                onClick={[Function]}
+                title="Solution three"
+                titleElement="h3"
+                titleSize="xs"
+              />
+            </mockConstructor>
+          </EuiFlexItem>
+          <EuiFlexItem
+            className="kbnOverviewMore__item"
+            key="solution-4"
+          >
+            <mockConstructor>
+              <EuiCard
+                className="kbnOverviewSolution solution-4"
+                description="Description of solution four"
+                href="path-to-solution-four"
+                icon={
+                  <EuiToken
+                    className="kbnOverviewSolution__icon"
+                    fill="light"
+                    iconType="empty"
+                    shape="circle"
+                    size="l"
+                  />
+                }
+                image="/plugins/kibanaOverview/assets/solutions_solution_4_2x.png"
+                onClick={[Function]}
+                title="Solution four"
+                titleElement="h3"
+                titleSize="xs"
+              />
+            </mockConstructor>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </section>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
   <mockConstructor
     addBasePath={
       [MockFunction] {
@@ -70,311 +294,242 @@ exports[`Overview render 1`] = `
         ],
       }
     }
-    hideToolbar={false}
-    iconType="logoKibana"
-    title={
-      <FormattedMessage
+    onChangeDefaultRoute={[Function]}
+    onSetDefaultRoute={[Function]}
+    path="/app/kibana_overview"
+  />
+</Component>
+`;
+
+exports[`Overview without features 1`] = `
+<Component
+  pageHeader={
+    Object {
+      "iconType": "logoKibana",
+      "pageTitle": <FormattedMessage
         defaultMessage="Kibana"
         id="kibanaOverview.header.title"
         values={Object {}}
-      />
+      />,
+      "rightSideItems": Array [],
     }
+  }
+  template="empty"
+>
+  <section
+    aria-labelledby="kbnOverviewApps__title"
+    className="kbnOverviewApps"
+  >
+    <EuiScreenReaderOnly>
+      <h2
+        id="kbnOverviewApps__title"
+      >
+        <FormattedMessage
+          defaultMessage="Explore these apps"
+          id="kibanaOverview.apps.title"
+          values={Object {}}
+        />
+      </h2>
+    </EuiScreenReaderOnly>
+    <EuiFlexGroup
+      className="kbnOverviewApps__group kbnOverviewApps__group--primary"
+      justifyContent="center"
+    />
+    <EuiSpacer
+      size="l"
+    />
+  </section>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
   />
-  <div
-    className="kbnOverviewContent"
+  <EuiFlexGroup
+    alignItems="flexStart"
+    className="kbnOverviewSupplements kbnOverviewSupplements--hasNews"
   >
-    <section
-      aria-labelledby="kbnOverviewApps__title"
-      className="kbnOverviewApps"
+    <EuiFlexItem
+      grow={1}
     >
-      <EuiScreenReaderOnly>
-        <h2
-          id="kbnOverviewApps__title"
-        >
-          <FormattedMessage
-            defaultMessage="Explore these apps"
-            id="kibanaOverview.apps.title"
-            values={Object {}}
-          />
-        </h2>
-      </EuiScreenReaderOnly>
-      <EuiFlexGroup
-        className="kbnOverviewApps__group kbnOverviewApps__group--primary"
-        justifyContent="center"
-      />
-      <EuiSpacer
-        size="l"
+      <NewsFeed
+        newsFetchResult={
+          Object {
+            "error": null,
+            "feedItems": Array [
+              Object {
+                "badge": null,
+                "description": "The official Go client now includes features like request retries and node discovery. Learn more about its architecture and package and repository layout.",
+                "expireOn": "2050-12-31T11:59:59.000Z",
+                "hash": "8e18fcedbc",
+                "linkText": "Read more on the blog",
+                "linkUrl": "https://www.elastic.co/blog/the-go-client-for-elasticsearch-introduction?blade=kibanafeed",
+                "publishOn": "2020-08-31T10:23:47.000Z",
+                "title": "The Go client for Elasticsearch: Introduction",
+              },
+              Object {
+                "badge": null,
+                "description": "Learn how to use Elastic Uptime to configure alerting and anomaly detection for sites, services, and APIs.",
+                "expireOn": "2050-12-31T11:59:59.000Z",
+                "hash": "fb3e3d42ef",
+                "linkText": "Read more on the blog",
+                "linkUrl": "https://www.elastic.co/blog/alerting-and-anomaly-detection-for-uptime-and-reliability?blade=kibanafeed",
+                "publishOn": "2020-08-14T10:23:47.000Z",
+                "title": "Alerting and anomaly detection for uptime and reliability",
+              },
+              Object {
+                "badge": null,
+                "description": "Managing data using hot-warm architecture and ILM is a cost-effective way of retaining data — and a great way to easily keep your cloud costs down.",
+                "expireOn": "2050-12-31T11:59:59.000Z",
+                "hash": "b2fc7d47d5",
+                "linkText": "Learn more on the blog",
+                "linkUrl": "https://www.elastic.co/blog/optimizing-costs-elastic-cloud-hot-warm-index-lifecycle-management?blade=kibanafeed",
+                "publishOn": "2020-08-01T10:23:47.000Z",
+                "title": "Optimizing costs in Elastic Cloud: Hot-warm + index lifecycle management",
+              },
+            ],
+            "hasNew": true,
+            "kibanaVersion": "8.0.0",
+          }
+        }
       />
-    </section>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <EuiFlexGroup
-      alignItems="flexStart"
-      className="kbnOverviewSupplements kbnOverviewSupplements--hasNews"
+    </EuiFlexItem>
+    <EuiFlexItem
+      grow={3}
     >
-      <EuiFlexItem
-        grow={1}
+      <section
+        aria-labelledby="kbnOverviewMore__title"
+        className="kbnOverviewMore"
       >
-        <NewsFeed
-          newsFetchResult={
-            Object {
-              "error": null,
-              "feedItems": Array [
-                Object {
-                  "badge": null,
-                  "description": "The official Go client now includes features like request retries and node discovery. Learn more about its architecture and package and repository layout.",
-                  "expireOn": "2050-12-31T11:59:59.000Z",
-                  "hash": "8e18fcedbc",
-                  "linkText": "Read more on the blog",
-                  "linkUrl": "https://www.elastic.co/blog/the-go-client-for-elasticsearch-introduction?blade=kibanafeed",
-                  "publishOn": "2020-08-31T10:23:47.000Z",
-                  "title": "The Go client for Elasticsearch: Introduction",
-                },
-                Object {
-                  "badge": null,
-                  "description": "Learn how to use Elastic Uptime to configure alerting and anomaly detection for sites, services, and APIs.",
-                  "expireOn": "2050-12-31T11:59:59.000Z",
-                  "hash": "fb3e3d42ef",
-                  "linkText": "Read more on the blog",
-                  "linkUrl": "https://www.elastic.co/blog/alerting-and-anomaly-detection-for-uptime-and-reliability?blade=kibanafeed",
-                  "publishOn": "2020-08-14T10:23:47.000Z",
-                  "title": "Alerting and anomaly detection for uptime and reliability",
-                },
-                Object {
-                  "badge": null,
-                  "description": "Managing data using hot-warm architecture and ILM is a cost-effective way of retaining data — and a great way to easily keep your cloud costs down.",
-                  "expireOn": "2050-12-31T11:59:59.000Z",
-                  "hash": "b2fc7d47d5",
-                  "linkText": "Learn more on the blog",
-                  "linkUrl": "https://www.elastic.co/blog/optimizing-costs-elastic-cloud-hot-warm-index-lifecycle-management?blade=kibanafeed",
-                  "publishOn": "2020-08-01T10:23:47.000Z",
-                  "title": "Optimizing costs in Elastic Cloud: Hot-warm + index lifecycle management",
-                },
-              ],
-              "hasNew": true,
-              "kibanaVersion": "8.0.0",
-            }
-          }
+        <EuiTitle
+          size="s"
+        >
+          <h2
+            id="kbnOverviewMore__title"
+          >
+            <FormattedMessage
+              defaultMessage="Do more with Elastic"
+              id="kibanaOverview.more.title"
+              values={Object {}}
+            />
+          </h2>
+        </EuiTitle>
+        <EuiSpacer
+          size="m"
         />
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={3}
-      >
-        <section
-          aria-labelledby="kbnOverviewMore__title"
-          className="kbnOverviewMore"
+        <EuiFlexGroup
+          className="kbnOverviewMore__content"
         >
-          <EuiTitle
-            size="s"
+          <EuiFlexItem
+            className="kbnOverviewMore__item"
+            key="kibana"
           >
-            <h2
-              id="kbnOverviewMore__title"
-            >
-              <FormattedMessage
-                defaultMessage="Do more with Elastic"
-                id="kibanaOverview.more.title"
-                values={Object {}}
+            <mockConstructor>
+              <EuiCard
+                className="kbnOverviewSolution kibana"
+                description=""
+                href="kibana_landing_page"
+                icon={
+                  <EuiToken
+                    className="kbnOverviewSolution__icon"
+                    fill="light"
+                    iconType="logoKibana"
+                    shape="circle"
+                    size="l"
+                  />
+                }
+                image="/plugins/kibanaOverview/assets/solutions_kibana_2x.png"
+                onClick={[Function]}
+                title="Kibana"
+                titleElement="h3"
+                titleSize="xs"
               />
-            </h2>
-          </EuiTitle>
-          <EuiSpacer
-            size="m"
-          />
-          <EuiFlexGroup
-            className="kbnOverviewMore__content"
+            </mockConstructor>
+          </EuiFlexItem>
+          <EuiFlexItem
+            className="kbnOverviewMore__item"
+            key="solution-2"
           >
-            <EuiFlexItem
-              className="kbnOverviewMore__item"
-              key="kibana"
-            >
-              <mockConstructor>
-                <EuiCard
-                  className="kbnOverviewSolution kibana"
-                  description=""
-                  href="kibana_landing_page"
-                  icon={
-                    <EuiToken
-                      className="kbnOverviewSolution__icon"
-                      fill="light"
-                      iconType="logoKibana"
-                      shape="circle"
-                      size="l"
-                    />
-                  }
-                  image="/plugins/kibanaOverview/assets/solutions_kibana_2x.png"
-                  onClick={[Function]}
-                  title="Kibana"
-                  titleElement="h3"
-                  titleSize="xs"
-                />
-              </mockConstructor>
-            </EuiFlexItem>
-            <EuiFlexItem
-              className="kbnOverviewMore__item"
-              key="solution-2"
-            >
-              <mockConstructor>
-                <EuiCard
-                  className="kbnOverviewSolution solution-2"
-                  description="Description of solution two"
-                  href="path-to-solution-two"
-                  icon={
-                    <EuiToken
-                      className="kbnOverviewSolution__icon"
-                      fill="light"
-                      iconType="empty"
-                      shape="circle"
-                      size="l"
-                    />
-                  }
-                  image="/plugins/kibanaOverview/assets/solutions_solution_2_2x.png"
-                  onClick={[Function]}
-                  title="Solution two"
-                  titleElement="h3"
-                  titleSize="xs"
-                />
-              </mockConstructor>
-            </EuiFlexItem>
-            <EuiFlexItem
-              className="kbnOverviewMore__item"
-              key="solution-3"
-            >
-              <mockConstructor>
-                <EuiCard
-                  className="kbnOverviewSolution solution-3"
-                  description="Description of solution three"
-                  href="path-to-solution-three"
-                  icon={
-                    <EuiToken
-                      className="kbnOverviewSolution__icon"
-                      fill="light"
-                      iconType="empty"
-                      shape="circle"
-                      size="l"
-                    />
-                  }
-                  image="/plugins/kibanaOverview/assets/solutions_solution_3_2x.png"
-                  onClick={[Function]}
-                  title="Solution three"
-                  titleElement="h3"
-                  titleSize="xs"
-                />
-              </mockConstructor>
-            </EuiFlexItem>
-            <EuiFlexItem
-              className="kbnOverviewMore__item"
-              key="solution-4"
-            >
-              <mockConstructor>
-                <EuiCard
-                  className="kbnOverviewSolution solution-4"
-                  description="Description of solution four"
-                  href="path-to-solution-four"
-                  icon={
-                    <EuiToken
-                      className="kbnOverviewSolution__icon"
-                      fill="light"
-                      iconType="empty"
-                      shape="circle"
-                      size="l"
-                    />
-                  }
-                  image="/plugins/kibanaOverview/assets/solutions_solution_4_2x.png"
-                  onClick={[Function]}
-                  title="Solution four"
-                  titleElement="h3"
-                  titleSize="xs"
-                />
-              </mockConstructor>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </section>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <mockConstructor
-      addBasePath={
-        [MockFunction] {
-          "calls": Array [
-            Array [
-              "kibana_landing_page",
-            ],
-            Array [
-              "/plugins/kibanaOverview/assets/solutions_kibana_2x.png",
-            ],
-            Array [
-              "path-to-solution-two",
-            ],
-            Array [
-              "/plugins/kibanaOverview/assets/solutions_solution_2_2x.png",
-            ],
-            Array [
-              "path-to-solution-three",
-            ],
-            Array [
-              "/plugins/kibanaOverview/assets/solutions_solution_3_2x.png",
-            ],
-            Array [
-              "path-to-solution-four",
-            ],
-            Array [
-              "/plugins/kibanaOverview/assets/solutions_solution_4_2x.png",
-            ],
-          ],
-          "results": Array [
-            Object {
-              "type": "return",
-              "value": "kibana_landing_page",
-            },
-            Object {
-              "type": "return",
-              "value": "/plugins/kibanaOverview/assets/solutions_kibana_2x.png",
-            },
-            Object {
-              "type": "return",
-              "value": "path-to-solution-two",
-            },
-            Object {
-              "type": "return",
-              "value": "/plugins/kibanaOverview/assets/solutions_solution_2_2x.png",
-            },
-            Object {
-              "type": "return",
-              "value": "path-to-solution-three",
-            },
-            Object {
-              "type": "return",
-              "value": "/plugins/kibanaOverview/assets/solutions_solution_3_2x.png",
-            },
-            Object {
-              "type": "return",
-              "value": "path-to-solution-four",
-            },
-            Object {
-              "type": "return",
-              "value": "/plugins/kibanaOverview/assets/solutions_solution_4_2x.png",
-            },
-          ],
-        }
-      }
-      onChangeDefaultRoute={[Function]}
-      onSetDefaultRoute={[Function]}
-      path="/app/kibana_overview"
-    />
-  </div>
-</main>
-`;
-
-exports[`Overview without features 1`] = `
-<main
-  aria-labelledby="kbnOverviewPageHeader__title"
-  className="kbnOverviewWrapper"
->
+            <mockConstructor>
+              <EuiCard
+                className="kbnOverviewSolution solution-2"
+                description="Description of solution two"
+                href="path-to-solution-two"
+                icon={
+                  <EuiToken
+                    className="kbnOverviewSolution__icon"
+                    fill="light"
+                    iconType="empty"
+                    shape="circle"
+                    size="l"
+                  />
+                }
+                image="/plugins/kibanaOverview/assets/solutions_solution_2_2x.png"
+                onClick={[Function]}
+                title="Solution two"
+                titleElement="h3"
+                titleSize="xs"
+              />
+            </mockConstructor>
+          </EuiFlexItem>
+          <EuiFlexItem
+            className="kbnOverviewMore__item"
+            key="solution-3"
+          >
+            <mockConstructor>
+              <EuiCard
+                className="kbnOverviewSolution solution-3"
+                description="Description of solution three"
+                href="path-to-solution-three"
+                icon={
+                  <EuiToken
+                    className="kbnOverviewSolution__icon"
+                    fill="light"
+                    iconType="empty"
+                    shape="circle"
+                    size="l"
+                  />
+                }
+                image="/plugins/kibanaOverview/assets/solutions_solution_3_2x.png"
+                onClick={[Function]}
+                title="Solution three"
+                titleElement="h3"
+                titleSize="xs"
+              />
+            </mockConstructor>
+          </EuiFlexItem>
+          <EuiFlexItem
+            className="kbnOverviewMore__item"
+            key="solution-4"
+          >
+            <mockConstructor>
+              <EuiCard
+                className="kbnOverviewSolution solution-4"
+                description="Description of solution four"
+                href="path-to-solution-four"
+                icon={
+                  <EuiToken
+                    className="kbnOverviewSolution__icon"
+                    fill="light"
+                    iconType="empty"
+                    shape="circle"
+                    size="l"
+                  />
+                }
+                image="/plugins/kibanaOverview/assets/solutions_solution_4_2x.png"
+                onClick={[Function]}
+                title="Solution four"
+                titleElement="h3"
+                titleSize="xs"
+              />
+            </mockConstructor>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </section>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
   <mockConstructor
     addBasePath={
       [MockFunction] {
@@ -496,367 +651,255 @@ exports[`Overview without features 1`] = `
         ],
       }
     }
-    hideToolbar={false}
-    iconType="logoKibana"
-    title={
-      <FormattedMessage
+    onChangeDefaultRoute={[Function]}
+    onSetDefaultRoute={[Function]}
+    path="/app/kibana_overview"
+  />
+</Component>
+`;
+
+exports[`Overview without solutions 1`] = `
+<Component
+  pageHeader={
+    Object {
+      "iconType": "logoKibana",
+      "pageTitle": <FormattedMessage
         defaultMessage="Kibana"
         id="kibanaOverview.header.title"
         values={Object {}}
-      />
+      />,
+      "rightSideItems": Array [],
     }
+  }
+  template="empty"
+>
+  <section
+    aria-labelledby="kbnOverviewApps__title"
+    className="kbnOverviewApps"
+  >
+    <EuiScreenReaderOnly>
+      <h2
+        id="kbnOverviewApps__title"
+      >
+        <FormattedMessage
+          defaultMessage="Explore these apps"
+          id="kibanaOverview.apps.title"
+          values={Object {}}
+        />
+      </h2>
+    </EuiScreenReaderOnly>
+    <EuiFlexGroup
+      className="kbnOverviewApps__group kbnOverviewApps__group--primary"
+      justifyContent="center"
+    />
+    <EuiSpacer
+      size="l"
+    />
+  </section>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
   />
-  <div
-    className="kbnOverviewContent"
+  <EuiFlexGroup
+    alignItems="flexStart"
+    className="kbnOverviewSupplements kbnOverviewSupplements--hasNews"
   >
-    <section
-      aria-labelledby="kbnOverviewApps__title"
-      className="kbnOverviewApps"
+    <EuiFlexItem
+      grow={1}
     >
-      <EuiScreenReaderOnly>
-        <h2
-          id="kbnOverviewApps__title"
-        >
-          <FormattedMessage
-            defaultMessage="Explore these apps"
-            id="kibanaOverview.apps.title"
-            values={Object {}}
-          />
-        </h2>
-      </EuiScreenReaderOnly>
-      <EuiFlexGroup
-        className="kbnOverviewApps__group kbnOverviewApps__group--primary"
-        justifyContent="center"
-      />
-      <EuiSpacer
-        size="l"
+      <NewsFeed
+        newsFetchResult={
+          Object {
+            "error": null,
+            "feedItems": Array [
+              Object {
+                "badge": null,
+                "description": "The official Go client now includes features like request retries and node discovery. Learn more about its architecture and package and repository layout.",
+                "expireOn": "2050-12-31T11:59:59.000Z",
+                "hash": "8e18fcedbc",
+                "linkText": "Read more on the blog",
+                "linkUrl": "https://www.elastic.co/blog/the-go-client-for-elasticsearch-introduction?blade=kibanafeed",
+                "publishOn": "2020-08-31T10:23:47.000Z",
+                "title": "The Go client for Elasticsearch: Introduction",
+              },
+              Object {
+                "badge": null,
+                "description": "Learn how to use Elastic Uptime to configure alerting and anomaly detection for sites, services, and APIs.",
+                "expireOn": "2050-12-31T11:59:59.000Z",
+                "hash": "fb3e3d42ef",
+                "linkText": "Read more on the blog",
+                "linkUrl": "https://www.elastic.co/blog/alerting-and-anomaly-detection-for-uptime-and-reliability?blade=kibanafeed",
+                "publishOn": "2020-08-14T10:23:47.000Z",
+                "title": "Alerting and anomaly detection for uptime and reliability",
+              },
+              Object {
+                "badge": null,
+                "description": "Managing data using hot-warm architecture and ILM is a cost-effective way of retaining data — and a great way to easily keep your cloud costs down.",
+                "expireOn": "2050-12-31T11:59:59.000Z",
+                "hash": "b2fc7d47d5",
+                "linkText": "Learn more on the blog",
+                "linkUrl": "https://www.elastic.co/blog/optimizing-costs-elastic-cloud-hot-warm-index-lifecycle-management?blade=kibanafeed",
+                "publishOn": "2020-08-01T10:23:47.000Z",
+                "title": "Optimizing costs in Elastic Cloud: Hot-warm + index lifecycle management",
+              },
+            ],
+            "hasNew": true,
+            "kibanaVersion": "8.0.0",
+          }
+        }
       />
-    </section>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <EuiFlexGroup
-      alignItems="flexStart"
-      className="kbnOverviewSupplements kbnOverviewSupplements--hasNews"
+    </EuiFlexItem>
+    <EuiFlexItem
+      grow={3}
     >
-      <EuiFlexItem
-        grow={1}
+      <EuiFlexGroup
+        className="kbnOverviewData kbnOverviewData--expanded"
       >
-        <NewsFeed
-          newsFetchResult={
-            Object {
-              "error": null,
-              "feedItems": Array [
-                Object {
-                  "badge": null,
-                  "description": "The official Go client now includes features like request retries and node discovery. Learn more about its architecture and package and repository layout.",
-                  "expireOn": "2050-12-31T11:59:59.000Z",
-                  "hash": "8e18fcedbc",
-                  "linkText": "Read more on the blog",
-                  "linkUrl": "https://www.elastic.co/blog/the-go-client-for-elasticsearch-introduction?blade=kibanafeed",
-                  "publishOn": "2020-08-31T10:23:47.000Z",
-                  "title": "The Go client for Elasticsearch: Introduction",
-                },
-                Object {
-                  "badge": null,
-                  "description": "Learn how to use Elastic Uptime to configure alerting and anomaly detection for sites, services, and APIs.",
-                  "expireOn": "2050-12-31T11:59:59.000Z",
-                  "hash": "fb3e3d42ef",
-                  "linkText": "Read more on the blog",
-                  "linkUrl": "https://www.elastic.co/blog/alerting-and-anomaly-detection-for-uptime-and-reliability?blade=kibanafeed",
-                  "publishOn": "2020-08-14T10:23:47.000Z",
-                  "title": "Alerting and anomaly detection for uptime and reliability",
-                },
-                Object {
-                  "badge": null,
-                  "description": "Managing data using hot-warm architecture and ILM is a cost-effective way of retaining data — and a great way to easily keep your cloud costs down.",
-                  "expireOn": "2050-12-31T11:59:59.000Z",
-                  "hash": "b2fc7d47d5",
-                  "linkText": "Learn more on the blog",
-                  "linkUrl": "https://www.elastic.co/blog/optimizing-costs-elastic-cloud-hot-warm-index-lifecycle-management?blade=kibanafeed",
-                  "publishOn": "2020-08-01T10:23:47.000Z",
-                  "title": "Optimizing costs in Elastic Cloud: Hot-warm + index lifecycle management",
-                },
-              ],
-              "hasNew": true,
-              "kibanaVersion": "8.0.0",
+        <EuiFlexItem>
+          <AddData
+            addBasePath={
+              [MockFunction] {
+                "calls": Array [
+                  Array [
+                    "kibana_landing_page",
+                  ],
+                  Array [
+                    "/plugins/kibanaOverview/assets/solutions_kibana_2x.png",
+                  ],
+                  Array [
+                    "path-to-solution-two",
+                  ],
+                  Array [
+                    "/plugins/kibanaOverview/assets/solutions_solution_2_2x.png",
+                  ],
+                  Array [
+                    "path-to-solution-three",
+                  ],
+                  Array [
+                    "/plugins/kibanaOverview/assets/solutions_solution_3_2x.png",
+                  ],
+                  Array [
+                    "path-to-solution-four",
+                  ],
+                  Array [
+                    "/plugins/kibanaOverview/assets/solutions_solution_4_2x.png",
+                  ],
+                ],
+                "results": Array [
+                  Object {
+                    "type": "return",
+                    "value": "kibana_landing_page",
+                  },
+                  Object {
+                    "type": "return",
+                    "value": "/plugins/kibanaOverview/assets/solutions_kibana_2x.png",
+                  },
+                  Object {
+                    "type": "return",
+                    "value": "path-to-solution-two",
+                  },
+                  Object {
+                    "type": "return",
+                    "value": "/plugins/kibanaOverview/assets/solutions_solution_2_2x.png",
+                  },
+                  Object {
+                    "type": "return",
+                    "value": "path-to-solution-three",
+                  },
+                  Object {
+                    "type": "return",
+                    "value": "/plugins/kibanaOverview/assets/solutions_solution_3_2x.png",
+                  },
+                  Object {
+                    "type": "return",
+                    "value": "path-to-solution-four",
+                  },
+                  Object {
+                    "type": "return",
+                    "value": "/plugins/kibanaOverview/assets/solutions_solution_4_2x.png",
+                  },
+                ],
+              }
             }
-          }
-        />
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={3}
-      >
-        <section
-          aria-labelledby="kbnOverviewMore__title"
-          className="kbnOverviewMore"
-        >
-          <EuiTitle
-            size="s"
-          >
-            <h2
-              id="kbnOverviewMore__title"
-            >
-              <FormattedMessage
-                defaultMessage="Do more with Elastic"
-                id="kibanaOverview.more.title"
-                values={Object {}}
-              />
-            </h2>
-          </EuiTitle>
-          <EuiSpacer
-            size="m"
+            features={Array []}
           />
-          <EuiFlexGroup
-            className="kbnOverviewMore__content"
-          >
-            <EuiFlexItem
-              className="kbnOverviewMore__item"
-              key="kibana"
-            >
-              <mockConstructor>
-                <EuiCard
-                  className="kbnOverviewSolution kibana"
-                  description=""
-                  href="kibana_landing_page"
-                  icon={
-                    <EuiToken
-                      className="kbnOverviewSolution__icon"
-                      fill="light"
-                      iconType="logoKibana"
-                      shape="circle"
-                      size="l"
-                    />
-                  }
-                  image="/plugins/kibanaOverview/assets/solutions_kibana_2x.png"
-                  onClick={[Function]}
-                  title="Kibana"
-                  titleElement="h3"
-                  titleSize="xs"
-                />
-              </mockConstructor>
-            </EuiFlexItem>
-            <EuiFlexItem
-              className="kbnOverviewMore__item"
-              key="solution-2"
-            >
-              <mockConstructor>
-                <EuiCard
-                  className="kbnOverviewSolution solution-2"
-                  description="Description of solution two"
-                  href="path-to-solution-two"
-                  icon={
-                    <EuiToken
-                      className="kbnOverviewSolution__icon"
-                      fill="light"
-                      iconType="empty"
-                      shape="circle"
-                      size="l"
-                    />
-                  }
-                  image="/plugins/kibanaOverview/assets/solutions_solution_2_2x.png"
-                  onClick={[Function]}
-                  title="Solution two"
-                  titleElement="h3"
-                  titleSize="xs"
-                />
-              </mockConstructor>
-            </EuiFlexItem>
-            <EuiFlexItem
-              className="kbnOverviewMore__item"
-              key="solution-3"
-            >
-              <mockConstructor>
-                <EuiCard
-                  className="kbnOverviewSolution solution-3"
-                  description="Description of solution three"
-                  href="path-to-solution-three"
-                  icon={
-                    <EuiToken
-                      className="kbnOverviewSolution__icon"
-                      fill="light"
-                      iconType="empty"
-                      shape="circle"
-                      size="l"
-                    />
-                  }
-                  image="/plugins/kibanaOverview/assets/solutions_solution_3_2x.png"
-                  onClick={[Function]}
-                  title="Solution three"
-                  titleElement="h3"
-                  titleSize="xs"
-                />
-              </mockConstructor>
-            </EuiFlexItem>
-            <EuiFlexItem
-              className="kbnOverviewMore__item"
-              key="solution-4"
-            >
-              <mockConstructor>
-                <EuiCard
-                  className="kbnOverviewSolution solution-4"
-                  description="Description of solution four"
-                  href="path-to-solution-four"
-                  icon={
-                    <EuiToken
-                      className="kbnOverviewSolution__icon"
-                      fill="light"
-                      iconType="empty"
-                      shape="circle"
-                      size="l"
-                    />
-                  }
-                  image="/plugins/kibanaOverview/assets/solutions_solution_4_2x.png"
-                  onClick={[Function]}
-                  title="Solution four"
-                  titleElement="h3"
-                  titleSize="xs"
-                />
-              </mockConstructor>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </section>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <mockConstructor
-      addBasePath={
-        [MockFunction] {
-          "calls": Array [
-            Array [
-              "kibana_landing_page",
-            ],
-            Array [
-              "/plugins/kibanaOverview/assets/solutions_kibana_2x.png",
-            ],
-            Array [
-              "path-to-solution-two",
-            ],
-            Array [
-              "/plugins/kibanaOverview/assets/solutions_solution_2_2x.png",
-            ],
-            Array [
-              "path-to-solution-three",
-            ],
-            Array [
-              "/plugins/kibanaOverview/assets/solutions_solution_3_2x.png",
-            ],
-            Array [
-              "path-to-solution-four",
-            ],
-            Array [
-              "/plugins/kibanaOverview/assets/solutions_solution_4_2x.png",
-            ],
-            Array [
-              "kibana_landing_page",
-            ],
-            Array [
-              "/plugins/kibanaOverview/assets/solutions_kibana_2x.png",
-            ],
-            Array [
-              "path-to-solution-two",
-            ],
-            Array [
-              "/plugins/kibanaOverview/assets/solutions_solution_2_2x.png",
-            ],
-            Array [
-              "path-to-solution-three",
-            ],
-            Array [
-              "/plugins/kibanaOverview/assets/solutions_solution_3_2x.png",
-            ],
-            Array [
-              "path-to-solution-four",
-            ],
-            Array [
-              "/plugins/kibanaOverview/assets/solutions_solution_4_2x.png",
-            ],
-          ],
-          "results": Array [
-            Object {
-              "type": "return",
-              "value": "kibana_landing_page",
-            },
-            Object {
-              "type": "return",
-              "value": "/plugins/kibanaOverview/assets/solutions_kibana_2x.png",
-            },
-            Object {
-              "type": "return",
-              "value": "path-to-solution-two",
-            },
-            Object {
-              "type": "return",
-              "value": "/plugins/kibanaOverview/assets/solutions_solution_2_2x.png",
-            },
-            Object {
-              "type": "return",
-              "value": "path-to-solution-three",
-            },
-            Object {
-              "type": "return",
-              "value": "/plugins/kibanaOverview/assets/solutions_solution_3_2x.png",
-            },
-            Object {
-              "type": "return",
-              "value": "path-to-solution-four",
-            },
-            Object {
-              "type": "return",
-              "value": "/plugins/kibanaOverview/assets/solutions_solution_4_2x.png",
-            },
-            Object {
-              "type": "return",
-              "value": "kibana_landing_page",
-            },
-            Object {
-              "type": "return",
-              "value": "/plugins/kibanaOverview/assets/solutions_kibana_2x.png",
-            },
-            Object {
-              "type": "return",
-              "value": "path-to-solution-two",
-            },
-            Object {
-              "type": "return",
-              "value": "/plugins/kibanaOverview/assets/solutions_solution_2_2x.png",
-            },
-            Object {
-              "type": "return",
-              "value": "path-to-solution-three",
-            },
-            Object {
-              "type": "return",
-              "value": "/plugins/kibanaOverview/assets/solutions_solution_3_2x.png",
-            },
-            Object {
-              "type": "return",
-              "value": "path-to-solution-four",
-            },
-            Object {
-              "type": "return",
-              "value": "/plugins/kibanaOverview/assets/solutions_solution_4_2x.png",
-            },
-          ],
-        }
-      }
-      onChangeDefaultRoute={[Function]}
-      onSetDefaultRoute={[Function]}
-      path="/app/kibana_overview"
-    />
-  </div>
-</main>
-`;
-
-exports[`Overview without solutions 1`] = `
-<main
-  aria-labelledby="kbnOverviewPageHeader__title"
-  className="kbnOverviewWrapper"
->
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <ManageData
+            addBasePath={
+              [MockFunction] {
+                "calls": Array [
+                  Array [
+                    "kibana_landing_page",
+                  ],
+                  Array [
+                    "/plugins/kibanaOverview/assets/solutions_kibana_2x.png",
+                  ],
+                  Array [
+                    "path-to-solution-two",
+                  ],
+                  Array [
+                    "/plugins/kibanaOverview/assets/solutions_solution_2_2x.png",
+                  ],
+                  Array [
+                    "path-to-solution-three",
+                  ],
+                  Array [
+                    "/plugins/kibanaOverview/assets/solutions_solution_3_2x.png",
+                  ],
+                  Array [
+                    "path-to-solution-four",
+                  ],
+                  Array [
+                    "/plugins/kibanaOverview/assets/solutions_solution_4_2x.png",
+                  ],
+                ],
+                "results": Array [
+                  Object {
+                    "type": "return",
+                    "value": "kibana_landing_page",
+                  },
+                  Object {
+                    "type": "return",
+                    "value": "/plugins/kibanaOverview/assets/solutions_kibana_2x.png",
+                  },
+                  Object {
+                    "type": "return",
+                    "value": "path-to-solution-two",
+                  },
+                  Object {
+                    "type": "return",
+                    "value": "/plugins/kibanaOverview/assets/solutions_solution_2_2x.png",
+                  },
+                  Object {
+                    "type": "return",
+                    "value": "path-to-solution-three",
+                  },
+                  Object {
+                    "type": "return",
+                    "value": "/plugins/kibanaOverview/assets/solutions_solution_3_2x.png",
+                  },
+                  Object {
+                    "type": "return",
+                    "value": "path-to-solution-four",
+                  },
+                  Object {
+                    "type": "return",
+                    "value": "/plugins/kibanaOverview/assets/solutions_solution_4_2x.png",
+                  },
+                ],
+              }
+            }
+            features={Array []}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiHorizontalRule
+    aria-hidden="true"
+    margin="xl"
+  />
   <mockConstructor
     addBasePath={
       [MockFunction] {
@@ -922,315 +965,9 @@ exports[`Overview without solutions 1`] = `
         ],
       }
     }
-    hideToolbar={false}
-    iconType="logoKibana"
-    title={
-      <FormattedMessage
-        defaultMessage="Kibana"
-        id="kibanaOverview.header.title"
-        values={Object {}}
-      />
-    }
+    onChangeDefaultRoute={[Function]}
+    onSetDefaultRoute={[Function]}
+    path="/app/kibana_overview"
   />
-  <div
-    className="kbnOverviewContent"
-  >
-    <section
-      aria-labelledby="kbnOverviewApps__title"
-      className="kbnOverviewApps"
-    >
-      <EuiScreenReaderOnly>
-        <h2
-          id="kbnOverviewApps__title"
-        >
-          <FormattedMessage
-            defaultMessage="Explore these apps"
-            id="kibanaOverview.apps.title"
-            values={Object {}}
-          />
-        </h2>
-      </EuiScreenReaderOnly>
-      <EuiFlexGroup
-        className="kbnOverviewApps__group kbnOverviewApps__group--primary"
-        justifyContent="center"
-      />
-      <EuiSpacer
-        size="l"
-      />
-    </section>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <EuiFlexGroup
-      alignItems="flexStart"
-      className="kbnOverviewSupplements kbnOverviewSupplements--hasNews"
-    >
-      <EuiFlexItem
-        grow={1}
-      >
-        <NewsFeed
-          newsFetchResult={
-            Object {
-              "error": null,
-              "feedItems": Array [
-                Object {
-                  "badge": null,
-                  "description": "The official Go client now includes features like request retries and node discovery. Learn more about its architecture and package and repository layout.",
-                  "expireOn": "2050-12-31T11:59:59.000Z",
-                  "hash": "8e18fcedbc",
-                  "linkText": "Read more on the blog",
-                  "linkUrl": "https://www.elastic.co/blog/the-go-client-for-elasticsearch-introduction?blade=kibanafeed",
-                  "publishOn": "2020-08-31T10:23:47.000Z",
-                  "title": "The Go client for Elasticsearch: Introduction",
-                },
-                Object {
-                  "badge": null,
-                  "description": "Learn how to use Elastic Uptime to configure alerting and anomaly detection for sites, services, and APIs.",
-                  "expireOn": "2050-12-31T11:59:59.000Z",
-                  "hash": "fb3e3d42ef",
-                  "linkText": "Read more on the blog",
-                  "linkUrl": "https://www.elastic.co/blog/alerting-and-anomaly-detection-for-uptime-and-reliability?blade=kibanafeed",
-                  "publishOn": "2020-08-14T10:23:47.000Z",
-                  "title": "Alerting and anomaly detection for uptime and reliability",
-                },
-                Object {
-                  "badge": null,
-                  "description": "Managing data using hot-warm architecture and ILM is a cost-effective way of retaining data — and a great way to easily keep your cloud costs down.",
-                  "expireOn": "2050-12-31T11:59:59.000Z",
-                  "hash": "b2fc7d47d5",
-                  "linkText": "Learn more on the blog",
-                  "linkUrl": "https://www.elastic.co/blog/optimizing-costs-elastic-cloud-hot-warm-index-lifecycle-management?blade=kibanafeed",
-                  "publishOn": "2020-08-01T10:23:47.000Z",
-                  "title": "Optimizing costs in Elastic Cloud: Hot-warm + index lifecycle management",
-                },
-              ],
-              "hasNew": true,
-              "kibanaVersion": "8.0.0",
-            }
-          }
-        />
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={3}
-      >
-        <EuiFlexGroup
-          className="kbnOverviewData kbnOverviewData--expanded"
-        >
-          <EuiFlexItem>
-            <AddData
-              addBasePath={
-                [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      "kibana_landing_page",
-                    ],
-                    Array [
-                      "/plugins/kibanaOverview/assets/solutions_kibana_2x.png",
-                    ],
-                    Array [
-                      "path-to-solution-two",
-                    ],
-                    Array [
-                      "/plugins/kibanaOverview/assets/solutions_solution_2_2x.png",
-                    ],
-                    Array [
-                      "path-to-solution-three",
-                    ],
-                    Array [
-                      "/plugins/kibanaOverview/assets/solutions_solution_3_2x.png",
-                    ],
-                    Array [
-                      "path-to-solution-four",
-                    ],
-                    Array [
-                      "/plugins/kibanaOverview/assets/solutions_solution_4_2x.png",
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "kibana_landing_page",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "/plugins/kibanaOverview/assets/solutions_kibana_2x.png",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "path-to-solution-two",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "/plugins/kibanaOverview/assets/solutions_solution_2_2x.png",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "path-to-solution-three",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "/plugins/kibanaOverview/assets/solutions_solution_3_2x.png",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "path-to-solution-four",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "/plugins/kibanaOverview/assets/solutions_solution_4_2x.png",
-                    },
-                  ],
-                }
-              }
-              features={Array []}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <ManageData
-              addBasePath={
-                [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      "kibana_landing_page",
-                    ],
-                    Array [
-                      "/plugins/kibanaOverview/assets/solutions_kibana_2x.png",
-                    ],
-                    Array [
-                      "path-to-solution-two",
-                    ],
-                    Array [
-                      "/plugins/kibanaOverview/assets/solutions_solution_2_2x.png",
-                    ],
-                    Array [
-                      "path-to-solution-three",
-                    ],
-                    Array [
-                      "/plugins/kibanaOverview/assets/solutions_solution_3_2x.png",
-                    ],
-                    Array [
-                      "path-to-solution-four",
-                    ],
-                    Array [
-                      "/plugins/kibanaOverview/assets/solutions_solution_4_2x.png",
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "kibana_landing_page",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "/plugins/kibanaOverview/assets/solutions_kibana_2x.png",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "path-to-solution-two",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "/plugins/kibanaOverview/assets/solutions_solution_2_2x.png",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "path-to-solution-three",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "/plugins/kibanaOverview/assets/solutions_solution_3_2x.png",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "path-to-solution-four",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "/plugins/kibanaOverview/assets/solutions_solution_4_2x.png",
-                    },
-                  ],
-                }
-              }
-              features={Array []}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiHorizontalRule
-      aria-hidden="true"
-      margin="xl"
-    />
-    <mockConstructor
-      addBasePath={
-        [MockFunction] {
-          "calls": Array [
-            Array [
-              "kibana_landing_page",
-            ],
-            Array [
-              "/plugins/kibanaOverview/assets/solutions_kibana_2x.png",
-            ],
-            Array [
-              "path-to-solution-two",
-            ],
-            Array [
-              "/plugins/kibanaOverview/assets/solutions_solution_2_2x.png",
-            ],
-            Array [
-              "path-to-solution-three",
-            ],
-            Array [
-              "/plugins/kibanaOverview/assets/solutions_solution_3_2x.png",
-            ],
-            Array [
-              "path-to-solution-four",
-            ],
-            Array [
-              "/plugins/kibanaOverview/assets/solutions_solution_4_2x.png",
-            ],
-          ],
-          "results": Array [
-            Object {
-              "type": "return",
-              "value": "kibana_landing_page",
-            },
-            Object {
-              "type": "return",
-              "value": "/plugins/kibanaOverview/assets/solutions_kibana_2x.png",
-            },
-            Object {
-              "type": "return",
-              "value": "path-to-solution-two",
-            },
-            Object {
-              "type": "return",
-              "value": "/plugins/kibanaOverview/assets/solutions_solution_2_2x.png",
-            },
-            Object {
-              "type": "return",
-              "value": "path-to-solution-three",
-            },
-            Object {
-              "type": "return",
-              "value": "/plugins/kibanaOverview/assets/solutions_solution_3_2x.png",
-            },
-            Object {
-              "type": "return",
-              "value": "path-to-solution-four",
-            },
-            Object {
-              "type": "return",
-              "value": "/plugins/kibanaOverview/assets/solutions_solution_4_2x.png",
-            },
-          ],
-        }
-      }
-      onChangeDefaultRoute={[Function]}
-      onSetDefaultRoute={[Function]}
-      path="/app/kibana_overview"
-    />
-  </div>
-</main>
+</Component>
 `;
diff --git a/src/plugins/kibana_overview/public/components/overview/overview.test.tsx b/src/plugins/kibana_overview/public/components/overview/overview.test.tsx
index 6f97b04a6fdf1..9d260469625ad 100644
--- a/src/plugins/kibana_overview/public/components/overview/overview.test.tsx
+++ b/src/plugins/kibana_overview/public/components/overview/overview.test.tsx
@@ -21,8 +21,8 @@ jest.mock('../../../../../../src/plugins/kibana_react/public', () => ({
     },
   }),
   RedirectAppLinks: jest.fn((element: JSX.Element) => element),
+  overviewPageActions: jest.fn().mockReturnValue([]),
   OverviewPageFooter: jest.fn().mockReturnValue(<></>),
-  OverviewPageHeader: jest.fn().mockReturnValue(<></>),
 }));
 
 jest.mock('../../lib/ui_metric', () => ({
diff --git a/src/plugins/kibana_overview/public/components/overview/overview.tsx b/src/plugins/kibana_overview/public/components/overview/overview.tsx
index 68c52b0395591..9bba923371f64 100644
--- a/src/plugins/kibana_overview/public/components/overview/overview.tsx
+++ b/src/plugins/kibana_overview/public/components/overview/overview.tsx
@@ -23,8 +23,9 @@ import { CoreStart } from 'kibana/public';
 import {
   RedirectAppLinks,
   useKibana,
+  KibanaPageTemplate,
+  overviewPageActions,
   OverviewPageFooter,
-  OverviewPageHeader,
 } from '../../../../../../src/plugins/kibana_react/public';
 import { FetchResult } from '../../../../../../src/plugins/newsfeed/public';
 import {
@@ -116,147 +117,149 @@ export const Overview: FC<Props> = ({ newsFetchResult, solutions, features }) =>
   const remainingApps = kibanaApps.map(({ id }) => id).filter((id) => !mainApps.includes(id));
 
   return (
-    <main aria-labelledby="kbnOverviewPageHeader__title" className="kbnOverviewWrapper">
-      <OverviewPageHeader
-        addBasePath={addBasePath}
-        hideToolbar={isNewKibanaInstance}
-        iconType="logoKibana"
-        title={<FormattedMessage defaultMessage="Kibana" id="kibanaOverview.header.title" />}
-      />
-
-      <div className="kbnOverviewContent">
-        {isNewKibanaInstance ? (
-          <GettingStarted addBasePath={addBasePath} isDarkTheme={IS_DARK_THEME} apps={kibanaApps} />
-        ) : (
-          <>
-            <section aria-labelledby="kbnOverviewApps__title" className="kbnOverviewApps">
-              <EuiScreenReaderOnly>
-                <h2 id="kbnOverviewApps__title">
-                  <FormattedMessage
-                    id="kibanaOverview.apps.title"
-                    defaultMessage="Explore these apps"
-                  />
-                </h2>
-              </EuiScreenReaderOnly>
-
-              {mainApps.length ? (
-                <>
-                  <EuiFlexGroup
-                    className="kbnOverviewApps__group kbnOverviewApps__group--primary"
-                    justifyContent="center"
-                  >
-                    {mainApps.map(renderAppCard)}
-                  </EuiFlexGroup>
-
-                  <EuiSpacer size="l" />
-                </>
-              ) : null}
+    <KibanaPageTemplate
+      pageHeader={{
+        iconType: 'logoKibana',
+        pageTitle: <FormattedMessage defaultMessage="Kibana" id="kibanaOverview.header.title" />,
+        rightSideItems: overviewPageActions({
+          addBasePath,
+          application,
+          hidden: isNewKibanaInstance,
+        }),
+      }}
+      template="empty"
+    >
+      {isNewKibanaInstance ? (
+        <GettingStarted addBasePath={addBasePath} isDarkTheme={IS_DARK_THEME} apps={kibanaApps} />
+      ) : (
+        <>
+          <section aria-labelledby="kbnOverviewApps__title" className="kbnOverviewApps">
+            <EuiScreenReaderOnly>
+              <h2 id="kbnOverviewApps__title">
+                <FormattedMessage
+                  id="kibanaOverview.apps.title"
+                  defaultMessage="Explore these apps"
+                />
+              </h2>
+            </EuiScreenReaderOnly>
 
-              {remainingApps.length ? (
+            {mainApps.length ? (
+              <>
                 <EuiFlexGroup
-                  className="kbnOverviewApps__group kbnOverviewApps__group--secondary"
+                  className="kbnOverviewApps__group kbnOverviewApps__group--primary"
                   justifyContent="center"
                 >
-                  {remainingApps.map(renderAppCard)}
+                  {mainApps.map(renderAppCard)}
                 </EuiFlexGroup>
-              ) : null}
-            </section>
 
-            <EuiHorizontalRule aria-hidden="true" margin="xl" />
+                <EuiSpacer size="l" />
+              </>
+            ) : null}
 
-            <EuiFlexGroup
-              alignItems="flexStart"
-              className={`kbnOverviewSupplements ${
-                newsFetchResult && newsFetchResult.feedItems.length
-                  ? 'kbnOverviewSupplements--hasNews'
-                  : 'kbnOverviewSupplements--noNews'
-              }`}
-            >
-              {newsFetchResult && newsFetchResult.feedItems.length ? (
-                <EuiFlexItem grow={1}>
-                  <NewsFeed newsFetchResult={newsFetchResult} />
-                </EuiFlexItem>
-              ) : null}
+            {remainingApps.length ? (
+              <EuiFlexGroup
+                className="kbnOverviewApps__group kbnOverviewApps__group--secondary"
+                justifyContent="center"
+              >
+                {remainingApps.map(renderAppCard)}
+              </EuiFlexGroup>
+            ) : null}
+          </section>
 
-              <EuiFlexItem grow={3}>
-                {solutions.length ? (
-                  <section aria-labelledby="kbnOverviewMore__title" className="kbnOverviewMore">
-                    <EuiTitle size="s">
-                      <h2 id="kbnOverviewMore__title">
-                        <FormattedMessage
-                          id="kibanaOverview.more.title"
-                          defaultMessage="Do more with Elastic"
-                        />
-                      </h2>
-                    </EuiTitle>
+          <EuiHorizontalRule aria-hidden="true" margin="xl" />
+
+          <EuiFlexGroup
+            alignItems="flexStart"
+            className={`kbnOverviewSupplements ${
+              newsFetchResult && newsFetchResult.feedItems.length
+                ? 'kbnOverviewSupplements--hasNews'
+                : 'kbnOverviewSupplements--noNews'
+            }`}
+          >
+            {newsFetchResult && newsFetchResult.feedItems.length ? (
+              <EuiFlexItem grow={1}>
+                <NewsFeed newsFetchResult={newsFetchResult} />
+              </EuiFlexItem>
+            ) : null}
 
-                    <EuiSpacer size="m" />
+            <EuiFlexItem grow={3}>
+              {solutions.length ? (
+                <section aria-labelledby="kbnOverviewMore__title" className="kbnOverviewMore">
+                  <EuiTitle size="s">
+                    <h2 id="kbnOverviewMore__title">
+                      <FormattedMessage
+                        id="kibanaOverview.more.title"
+                        defaultMessage="Do more with Elastic"
+                      />
+                    </h2>
+                  </EuiTitle>
 
-                    <EuiFlexGroup className="kbnOverviewMore__content">
-                      {solutions.map(({ id, title, description, icon, path }) => (
-                        <EuiFlexItem className="kbnOverviewMore__item" key={id}>
-                          <RedirectAppLinks application={application}>
-                            <EuiCard
-                              className={`kbnOverviewSolution ${id}`}
-                              description={description ? description : ''}
-                              href={addBasePath(path)}
-                              icon={
-                                <EuiToken
-                                  className="kbnOverviewSolution__icon"
-                                  fill="light"
-                                  iconType={icon}
-                                  shape="circle"
-                                  size="l"
-                                />
-                              }
-                              image={addBasePath(getSolutionGraphicURL(snakeCase(id)))}
-                              title={title}
-                              titleElement="h3"
-                              titleSize="xs"
-                              onClick={() => {
-                                trackUiMetric(METRIC_TYPE.CLICK, `solution_panel_${id}`);
-                              }}
-                            />
-                          </RedirectAppLinks>
-                        </EuiFlexItem>
-                      ))}
-                    </EuiFlexGroup>
-                  </section>
-                ) : (
-                  <EuiFlexGroup
-                    className={`kbnOverviewData ${
-                      addDataFeatures.length === 1 && manageDataFeatures.length === 1
-                        ? 'kbnOverviewData--compressed'
-                        : 'kbnOverviewData--expanded'
-                    }`}
-                  >
-                    <EuiFlexItem>
-                      <AddData addBasePath={addBasePath} features={addDataFeatures} />
-                    </EuiFlexItem>
+                  <EuiSpacer size="m" />
 
-                    <EuiFlexItem>
-                      <ManageData addBasePath={addBasePath} features={manageDataFeatures} />
-                    </EuiFlexItem>
+                  <EuiFlexGroup className="kbnOverviewMore__content">
+                    {solutions.map(({ id, title, description, icon, path }) => (
+                      <EuiFlexItem className="kbnOverviewMore__item" key={id}>
+                        <RedirectAppLinks application={application}>
+                          <EuiCard
+                            className={`kbnOverviewSolution ${id}`}
+                            description={description ? description : ''}
+                            href={addBasePath(path)}
+                            icon={
+                              <EuiToken
+                                className="kbnOverviewSolution__icon"
+                                fill="light"
+                                iconType={icon}
+                                shape="circle"
+                                size="l"
+                              />
+                            }
+                            image={addBasePath(getSolutionGraphicURL(snakeCase(id)))}
+                            title={title}
+                            titleElement="h3"
+                            titleSize="xs"
+                            onClick={() => {
+                              trackUiMetric(METRIC_TYPE.CLICK, `solution_panel_${id}`);
+                            }}
+                          />
+                        </RedirectAppLinks>
+                      </EuiFlexItem>
+                    ))}
                   </EuiFlexGroup>
-                )}
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </>
-        )}
+                </section>
+              ) : (
+                <EuiFlexGroup
+                  className={`kbnOverviewData ${
+                    addDataFeatures.length === 1 && manageDataFeatures.length === 1
+                      ? 'kbnOverviewData--compressed'
+                      : 'kbnOverviewData--expanded'
+                  }`}
+                >
+                  <EuiFlexItem>
+                    <AddData addBasePath={addBasePath} features={addDataFeatures} />
+                  </EuiFlexItem>
 
-        <EuiHorizontalRule margin="xl" aria-hidden="true" />
+                  <EuiFlexItem>
+                    <ManageData addBasePath={addBasePath} features={manageDataFeatures} />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              )}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
+      )}
 
-        <OverviewPageFooter
-          addBasePath={addBasePath}
-          path={PLUGIN_PATH}
-          onSetDefaultRoute={() => {
-            trackUiMetric(METRIC_TYPE.CLICK, 'set_kibana_overview_as_default_route');
-          }}
-          onChangeDefaultRoute={() => {
-            trackUiMetric(METRIC_TYPE.CLICK, 'change_to_different_default_route');
-          }}
-        />
-      </div>
-    </main>
+      <EuiHorizontalRule margin="xl" aria-hidden="true" />
+
+      <OverviewPageFooter
+        addBasePath={addBasePath}
+        path={PLUGIN_PATH}
+        onSetDefaultRoute={() => {
+          trackUiMetric(METRIC_TYPE.CLICK, 'set_kibana_overview_as_default_route');
+        }}
+        onChangeDefaultRoute={() => {
+          trackUiMetric(METRIC_TYPE.CLICK, 'change_to_different_default_route');
+        }}
+      />
+    </KibanaPageTemplate>
   );
 };
diff --git a/src/plugins/kibana_react/public/overview_page/index.ts b/src/plugins/kibana_react/public/overview_page/index.ts
index cd4e9f6befc63..73b35f4d97a37 100644
--- a/src/plugins/kibana_react/public/overview_page/index.ts
+++ b/src/plugins/kibana_react/public/overview_page/index.ts
@@ -6,5 +6,5 @@
  * Side Public License, v 1.
  */
 
+export * from './overview_page_actions';
 export * from './overview_page_footer';
-export * from './overview_page_header';
diff --git a/src/plugins/kibana_react/public/overview_page/overview_page_actions/__snapshots__/overview_page_actions.test.tsx.snap b/src/plugins/kibana_react/public/overview_page/overview_page_actions/__snapshots__/overview_page_actions.test.tsx.snap
new file mode 100644
index 0000000000000..10910f8b87b12
--- /dev/null
+++ b/src/plugins/kibana_react/public/overview_page/overview_page_actions/__snapshots__/overview_page_actions.test.tsx.snap
@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`overviewPageActions all buttons 1`] = `
+Array [
+  <mockConstructor
+    application={
+      Object {
+        "capabilities": Object {
+          "navLinks": Object {
+            "dev_tools": true,
+            "management": true,
+          },
+        },
+      }
+    }
+  >
+    <EuiButtonEmpty
+      className="kbnOverviewPageHeader__actionButton"
+      data-test-subj="homeAddData"
+      flush="both"
+      href="/app/home#/tutorial_directory"
+      iconType="indexOpen"
+    >
+      Add data
+    </EuiButtonEmpty>
+  </mockConstructor>,
+  <mockConstructor
+    application={
+      Object {
+        "capabilities": Object {
+          "navLinks": Object {
+            "dev_tools": true,
+            "management": true,
+          },
+        },
+      }
+    }
+  >
+    <EuiButtonEmpty
+      className="kbnOverviewPageHeader__actionButton"
+      data-test-subj="homeManage"
+      flush="both"
+      href="/app/management"
+      iconType="gear"
+    >
+      Manage
+    </EuiButtonEmpty>
+  </mockConstructor>,
+  <mockConstructor
+    application={
+      Object {
+        "capabilities": Object {
+          "navLinks": Object {
+            "dev_tools": true,
+            "management": true,
+          },
+        },
+      }
+    }
+  >
+    <EuiButtonEmpty
+      className="kbnOverviewPageHeader__actionButton"
+      data-test-subj="homeDevTools"
+      flush="both"
+      href="/app/dev_tools#/console"
+      iconType="wrench"
+    >
+      Dev tools
+    </EuiButtonEmpty>
+  </mockConstructor>,
+]
+`;
+
+exports[`overviewPageActions no buttons 1`] = `Array []`;
+
+exports[`overviewPageActions only add data button 1`] = `
+Array [
+  <mockConstructor
+    application={
+      Object {
+        "capabilities": Object {
+          "navLinks": Object {
+            "dev_tools": true,
+            "management": true,
+          },
+        },
+      }
+    }
+  >
+    <EuiButtonEmpty
+      className="kbnOverviewPageHeader__actionButton"
+      data-test-subj="homeAddData"
+      flush="both"
+      href="/app/home#/tutorial_directory"
+      iconType="indexOpen"
+    >
+      Add data
+    </EuiButtonEmpty>
+  </mockConstructor>,
+]
+`;
diff --git a/src/plugins/kibana_react/public/overview_page/overview_page_header/index.ts b/src/plugins/kibana_react/public/overview_page/overview_page_actions/index.ts
similarity index 89%
rename from src/plugins/kibana_react/public/overview_page/overview_page_header/index.ts
rename to src/plugins/kibana_react/public/overview_page/overview_page_actions/index.ts
index 7017068afd460..8684d6a8ca4e4 100644
--- a/src/plugins/kibana_react/public/overview_page/overview_page_header/index.ts
+++ b/src/plugins/kibana_react/public/overview_page/overview_page_actions/index.ts
@@ -6,4 +6,4 @@
  * Side Public License, v 1.
  */
 
-export * from './overview_page_header';
+export * from './overview_page_actions';
diff --git a/src/plugins/kibana_react/public/overview_page/overview_page_actions/overview_page_actions.test.tsx b/src/plugins/kibana_react/public/overview_page/overview_page_actions/overview_page_actions.test.tsx
new file mode 100644
index 0000000000000..f324d56196144
--- /dev/null
+++ b/src/plugins/kibana_react/public/overview_page/overview_page_actions/overview_page_actions.test.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { overviewPageActions } from './overview_page_actions';
+import { ApplicationStart } from 'kibana/public';
+
+jest.mock('../../app_links', () => ({
+  RedirectAppLinks: jest.fn((element: JSX.Element) => element),
+}));
+
+afterAll(() => jest.clearAllMocks());
+
+const addBasePathMock = jest.fn((path: string) => (path ? path : 'path'));
+
+const applicationStartMock = ({
+  capabilities: { navLinks: { management: true, dev_tools: true } },
+} as unknown) as ApplicationStart;
+
+describe('overviewPageActions', () => {
+  test('only add data button', () => {
+    const array = overviewPageActions({
+      addBasePath: addBasePathMock,
+      application: applicationStartMock,
+    });
+    expect(array).toMatchSnapshot();
+  });
+
+  test('all buttons', () => {
+    const array = overviewPageActions({
+      addBasePath: addBasePathMock,
+      application: applicationStartMock,
+      showDevToolsLink: true,
+      showManagementLink: true,
+    });
+    expect(array).toMatchSnapshot();
+  });
+
+  test('no buttons', () => {
+    const array = overviewPageActions({
+      addBasePath: addBasePathMock,
+      application: applicationStartMock,
+      hidden: true,
+    });
+    expect(array).toMatchSnapshot();
+  });
+});
diff --git a/src/plugins/kibana_react/public/overview_page/overview_page_actions/overview_page_actions.tsx b/src/plugins/kibana_react/public/overview_page/overview_page_actions/overview_page_actions.tsx
new file mode 100644
index 0000000000000..c3f0acd059494
--- /dev/null
+++ b/src/plugins/kibana_react/public/overview_page/overview_page_actions/overview_page_actions.tsx
@@ -0,0 +1,88 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { EuiButtonEmpty } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { ApplicationStart } from 'kibana/public';
+import { RedirectAppLinks } from '../../app_links';
+
+interface Props {
+  addBasePath: (path: string) => string;
+  application: ApplicationStart;
+  hidden?: boolean;
+  showDevToolsLink?: boolean;
+  showManagementLink?: boolean;
+}
+
+export const overviewPageActions = ({
+  addBasePath,
+  application,
+  hidden,
+  showDevToolsLink,
+  showManagementLink,
+}: Props) => {
+  const {
+    management: isManagementEnabled,
+    dev_tools: isDevToolsEnabled,
+  } = application.capabilities.navLinks;
+
+  const actionAddData = (
+    <RedirectAppLinks application={application}>
+      <EuiButtonEmpty
+        data-test-subj="homeAddData"
+        className="kbnOverviewPageHeader__actionButton"
+        flush="both"
+        href={addBasePath('/app/home#/tutorial_directory')}
+        iconType="indexOpen"
+      >
+        {i18n.translate('kibana-react.kbnOverviewPageHeader.addDataButtonLabel', {
+          defaultMessage: 'Add data',
+        })}
+      </EuiButtonEmpty>
+    </RedirectAppLinks>
+  );
+
+  const actionStackManagement =
+    showManagementLink && isManagementEnabled ? (
+      <RedirectAppLinks application={application}>
+        <EuiButtonEmpty
+          data-test-subj="homeManage"
+          className="kbnOverviewPageHeader__actionButton"
+          flush="both"
+          iconType="gear"
+          href={addBasePath('/app/management')}
+        >
+          {i18n.translate('kibana-react.kbnOverviewPageHeader.stackManagementButtonLabel', {
+            defaultMessage: 'Manage',
+          })}
+        </EuiButtonEmpty>
+      </RedirectAppLinks>
+    ) : null;
+
+  const actionDevTools =
+    showDevToolsLink && isDevToolsEnabled ? (
+      <RedirectAppLinks application={application}>
+        <EuiButtonEmpty
+          data-test-subj="homeDevTools"
+          className="kbnOverviewPageHeader__actionButton"
+          flush="both"
+          iconType="wrench"
+          href={addBasePath('/app/dev_tools#/console')}
+        >
+          {i18n.translate('kibana-react.kbnOverviewPageHeader.devToolsButtonLabel', {
+            defaultMessage: 'Dev tools',
+          })}
+        </EuiButtonEmpty>
+      </RedirectAppLinks>
+    ) : null;
+
+  const actions = [actionAddData, actionStackManagement, actionDevTools];
+
+  return !hidden ? actions.filter((obj) => obj) : [];
+};
diff --git a/src/plugins/kibana_react/public/overview_page/overview_page_header/__snapshots__/overview_page_header.test.tsx.snap b/src/plugins/kibana_react/public/overview_page/overview_page_header/__snapshots__/overview_page_header.test.tsx.snap
deleted file mode 100644
index 61faefb600191..0000000000000
--- a/src/plugins/kibana_react/public/overview_page/overview_page_header/__snapshots__/overview_page_header.test.tsx.snap
+++ /dev/null
@@ -1,69 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`OverviewPageHeader render 1`] = `
-<header
-  className="kbnOverviewPageHeader kbnOverviewPageHeader--noOverlap"
->
-  <div
-    className="kbnOverviewPageHeader__inner"
-  >
-    <EuiFlexGroup>
-      <EuiFlexItem>
-        <EuiFlexGroup
-          gutterSize="m"
-          responsive={false}
-        >
-          <EuiFlexItem>
-            <EuiTitle
-              size="m"
-            >
-              <h1
-                id="kbnOverviewPageHeader__title"
-              >
-                Page Title
-              </h1>
-            </EuiTitle>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
-      >
-        <EuiFlexGroup
-          className="kbnOverviewPageHeader__actions"
-          responsive={false}
-          wrap={true}
-        >
-          <EuiFlexItem
-            className="kbnOverviewPageHeader__actionItem"
-            grow={false}
-          >
-            <mockConstructor
-              application={
-                Object {
-                  "capabilities": Object {
-                    "navLinks": Object {
-                      "dev_tools": true,
-                      "management": true,
-                    },
-                  },
-                }
-              }
-            >
-              <EuiButtonEmpty
-                className="kbnOverviewPageHeader__actionButton"
-                data-test-subj="homeAddData"
-                flush="both"
-                href="/app/home#/tutorial_directory"
-                iconType="indexOpen"
-              >
-                Add data
-              </EuiButtonEmpty>
-            </mockConstructor>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </div>
-</header>
-`;
diff --git a/src/plugins/kibana_react/public/overview_page/overview_page_header/_overview_page_header.scss b/src/plugins/kibana_react/public/overview_page/overview_page_header/_overview_page_header.scss
deleted file mode 100644
index 80087195e7dbd..0000000000000
--- a/src/plugins/kibana_react/public/overview_page/overview_page_header/_overview_page_header.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.kbnOverviewPageHeader {
-  background-color: $euiPageBackgroundColor;
-  border-bottom: $euiBorderWidthThin solid $euiColorLightShade;
-}
-
-.kbnOverviewPageHeader__inner {
-  margin: 0 auto;
-  max-width: 1200px;
-  padding: $euiSizeXL $euiSize;
-
-  .kbnOverviewPageHeader--hasOverlap & {
-    padding-bottom: $euiSizeXL + $euiSizeL;
-  }
-}
diff --git a/src/plugins/kibana_react/public/overview_page/overview_page_header/index.scss b/src/plugins/kibana_react/public/overview_page/overview_page_header/index.scss
deleted file mode 100644
index 3e8fcc537736a..0000000000000
--- a/src/plugins/kibana_react/public/overview_page/overview_page_header/index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import './overview_page_header';
diff --git a/src/plugins/kibana_react/public/overview_page/overview_page_header/overview_page_header.test.tsx b/src/plugins/kibana_react/public/overview_page/overview_page_header/overview_page_header.test.tsx
deleted file mode 100644
index f339bed58bb49..0000000000000
--- a/src/plugins/kibana_react/public/overview_page/overview_page_header/overview_page_header.test.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import { OverviewPageHeader } from './overview_page_header';
-import { shallowWithIntl } from '@kbn/test/jest';
-
-jest.mock('../../app_links', () => ({
-  RedirectAppLinks: jest.fn((element: JSX.Element) => element),
-}));
-
-jest.mock('../../context', () => ({
-  useKibana: jest.fn().mockReturnValue({
-    services: {
-      application: { capabilities: { navLinks: { management: true, dev_tools: true } } },
-      notifications: { toast: { addSuccess: jest.fn() } },
-    },
-  }),
-}));
-
-afterAll(() => jest.clearAllMocks());
-
-const mockTitle = 'Page Title';
-const addBasePathMock = jest.fn((path: string) => (path ? path : 'path'));
-
-describe('OverviewPageHeader', () => {
-  test('render', () => {
-    const component = shallowWithIntl(
-      <OverviewPageHeader addBasePath={addBasePathMock} title={mockTitle} />
-    );
-    expect(component).toMatchSnapshot();
-  });
-});
diff --git a/src/plugins/kibana_react/public/overview_page/overview_page_header/overview_page_header.tsx b/src/plugins/kibana_react/public/overview_page/overview_page_header/overview_page_header.tsx
deleted file mode 100644
index cba1e093dedf3..0000000000000
--- a/src/plugins/kibana_react/public/overview_page/overview_page_header/overview_page_header.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React, { FC } from 'react';
-import {
-  EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiTitle,
-  IconType,
-} from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { CoreStart } from 'kibana/public';
-import { RedirectAppLinks } from '../../app_links';
-import { useKibana } from '../../context';
-
-import './index.scss';
-
-interface Props {
-  hideToolbar?: boolean;
-  iconType?: IconType;
-  overlap?: boolean;
-  showDevToolsLink?: boolean;
-  showManagementLink?: boolean;
-  title: JSX.Element | string;
-  addBasePath: (path: string) => string;
-}
-
-export const OverviewPageHeader: FC<Props> = ({
-  hideToolbar,
-  iconType,
-  overlap,
-  showDevToolsLink,
-  showManagementLink,
-  title,
-  addBasePath,
-}) => {
-  const {
-    services: { application },
-  } = useKibana<CoreStart>();
-
-  const {
-    management: isManagementEnabled,
-    dev_tools: isDevToolsEnabled,
-  } = application.capabilities.navLinks;
-
-  return (
-    <header
-      className={`kbnOverviewPageHeader ${
-        overlap ? 'kbnOverviewPageHeader--hasOverlap' : 'kbnOverviewPageHeader--noOverlap'
-      }`}
-    >
-      <div className="kbnOverviewPageHeader__inner">
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <EuiFlexGroup gutterSize="m" responsive={false}>
-              {iconType && (
-                <EuiFlexItem grow={false}>
-                  <EuiIcon size="xxl" type={iconType} />
-                </EuiFlexItem>
-              )}
-
-              <EuiFlexItem>
-                <EuiTitle size="m">
-                  <h1 id="kbnOverviewPageHeader__title">{title}</h1>
-                </EuiTitle>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-
-          {!hideToolbar && (
-            <EuiFlexItem grow={false}>
-              <EuiFlexGroup className="kbnOverviewPageHeader__actions" responsive={false} wrap>
-                <EuiFlexItem className="kbnOverviewPageHeader__actionItem" grow={false}>
-                  <RedirectAppLinks application={application}>
-                    <EuiButtonEmpty
-                      data-test-subj="homeAddData"
-                      className="kbnOverviewPageHeader__actionButton"
-                      flush="both"
-                      href={addBasePath('/app/home#/tutorial_directory')}
-                      iconType="indexOpen"
-                    >
-                      {i18n.translate('kibana-react.kbnOverviewPageHeader.addDataButtonLabel', {
-                        defaultMessage: 'Add data',
-                      })}
-                    </EuiButtonEmpty>
-                  </RedirectAppLinks>
-                </EuiFlexItem>
-
-                {showManagementLink && isManagementEnabled ? (
-                  <EuiFlexItem className="kbnOverviewPageHeader__actionItem" grow={false}>
-                    <RedirectAppLinks application={application}>
-                      <EuiButtonEmpty
-                        data-test-subj="homeManage"
-                        className="kbnOverviewPageHeader__actionButton"
-                        flush="both"
-                        iconType="gear"
-                        href={addBasePath('/app/management')}
-                      >
-                        {i18n.translate(
-                          'kibana-react.kbnOverviewPageHeader.stackManagementButtonLabel',
-                          {
-                            defaultMessage: 'Manage',
-                          }
-                        )}
-                      </EuiButtonEmpty>
-                    </RedirectAppLinks>
-                  </EuiFlexItem>
-                ) : null}
-
-                {showDevToolsLink && isDevToolsEnabled ? (
-                  <EuiFlexItem className="kbnOverviewPageHeader__actionItem" grow={false}>
-                    <RedirectAppLinks application={application}>
-                      <EuiButtonEmpty
-                        data-test-subj="homeDevTools"
-                        className="kbnOverviewPageHeader__actionButton"
-                        flush="both"
-                        iconType="wrench"
-                        href={addBasePath('/app/dev_tools#/console')}
-                      >
-                        {i18n.translate('kibana-react.kbnOverviewPageHeader.devToolsButtonLabel', {
-                          defaultMessage: 'Dev tools',
-                        })}
-                      </EuiButtonEmpty>
-                    </RedirectAppLinks>
-                  </EuiFlexItem>
-                ) : null}
-              </EuiFlexGroup>
-            </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-      </div>
-    </header>
-  );
-};