diff --git a/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap
index 9e5b265c187cf..ba7e8f8ef4fce 100644
--- a/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap
@@ -4,7 +4,6 @@ exports[`HeaderPage it renders 1`] = `
 <Fragment>
   <EuiPageHeader
     alignItems="center"
-    bottomBorder={true}
   >
     <HeaderSection>
       <Memo(TitleComponent)
@@ -17,14 +16,13 @@ exports[`HeaderPage it renders 1`] = `
         }
         title="Test title"
       />
+      <EuiSpacer
+        size="s"
+      />
       <Subtitle
         data-test-subj="header-page-subtitle"
         items="Test subtitle"
       />
-      <Subtitle
-        data-test-subj="header-page-subtitle-2"
-        items="Test subtitle 2"
-      />
     </HeaderSection>
     <EuiPageHeaderSection
       data-test-subj="header-page-supplements"
@@ -34,6 +32,17 @@ exports[`HeaderPage it renders 1`] = `
       </p>
     </EuiPageHeaderSection>
   </EuiPageHeader>
+  <EuiSpacer
+    size="xs"
+  />
+  <Subtitle
+    data-test-subj="header-page-subtitle-2"
+    items="Test subtitle 2"
+  />
+  <EuiSpacer
+    size="m"
+  />
+  <Divider />
   <EuiSpacer
     size="l"
   />
diff --git a/x-pack/plugins/security_solution/public/common/components/header_page/index.tsx b/x-pack/plugins/security_solution/public/common/components/header_page/index.tsx
index 7872476d19b20..21f310f5344c9 100644
--- a/x-pack/plugins/security_solution/public/common/components/header_page/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/header_page/index.tsx
@@ -5,9 +5,16 @@
  * 2.0.
  */
 
-import { EuiProgress, EuiPageHeader, EuiPageHeaderSection, EuiSpacer } from '@elastic/eui';
+import {
+  EuiProgress,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiSpacer,
+  useEuiTheme,
+} from '@elastic/eui';
 import React from 'react';
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
+import styled, { css as styleCss } from 'styled-components';
 
 import type { LinkIconProps } from '../link_icon';
 import { LinkIcon } from '../link_icon';
@@ -23,19 +30,10 @@ interface HeaderProps {
   isLoading?: boolean;
 }
 
-const Header = styled.header.attrs({
-  className: 'securitySolutionHeaderPage',
-})<HeaderProps>`
-  ${({ border, theme }) => css`
-    margin-bottom: ${theme.eui.euiSizeL};
-  `}
-`;
-Header.displayName = 'Header';
-
 const LinkBack = styled.div.attrs({
   className: 'securitySolutionHeaderPage__linkBack',
 })`
-  ${({ theme }) => css`
+  ${({ theme }) => styleCss`
     font-size: ${theme.eui.euiFontSizeXS};
     line-height: ${theme.eui.euiLineHeight};
     margin-bottom: ${theme.eui.euiSizeS};
@@ -51,6 +49,18 @@ const HeaderSection = styled(EuiPageHeaderSection)`
 `;
 HeaderSection.displayName = 'HeaderSection';
 
+function Divider(): JSX.Element {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <div
+      css={css`
+        border-bottom: ${euiTheme.border.thin};
+      `}
+    />
+  );
+}
+
 interface BackOptions {
   pageId: SecurityPageName;
   text: LinkIconProps['children'];
@@ -110,15 +120,19 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({
   titleNode,
 }) => (
   <>
-    <EuiPageHeader alignItems="center" bottomBorder={border} rightSideItems={rightSideItems}>
+    <EuiPageHeader alignItems="center" rightSideItems={rightSideItems}>
       <HeaderSection>
         {backOptions && <HeaderLinkBack backOptions={backOptions} />}
         {!backOptions && backComponent && <>{backComponent}</>}
 
         {titleNode || <Title title={title} badgeOptions={badgeOptions} />}
 
-        {subtitle && <Subtitle data-test-subj="header-page-subtitle" items={subtitle} />}
-        {subtitle2 && <Subtitle data-test-subj="header-page-subtitle-2" items={subtitle2} />}
+        {subtitle && (
+          <>
+            <EuiSpacer size="s" />
+            <Subtitle data-test-subj="header-page-subtitle" items={subtitle} />
+          </>
+        )}
         {border && isLoading && <EuiProgress size="xs" color="accent" />}
       </HeaderSection>
 
@@ -128,6 +142,18 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({
         </EuiPageHeaderSection>
       )}
     </EuiPageHeader>
+    {subtitle2 && (
+      <>
+        <EuiSpacer size="xs" />
+        <Subtitle data-test-subj="header-page-subtitle-2" items={subtitle2} />
+      </>
+    )}
+    {border && (
+      <>
+        <EuiSpacer size="m" />
+        <Divider />
+      </>
+    )}
     {/* Manually add a 'padding-bottom' to header */}
     <EuiSpacer size="l" />
   </>
diff --git a/x-pack/plugins/security_solution/public/common/components/subtitle/index.tsx b/x-pack/plugins/security_solution/public/common/components/subtitle/index.tsx
index c2f3d7d096b5c..75ce1d433c5a0 100644
--- a/x-pack/plugins/security_solution/public/common/components/subtitle/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/subtitle/index.tsx
@@ -10,8 +10,6 @@ import styled, { css } from 'styled-components';
 
 const Wrapper = styled.div`
   ${({ theme }) => css`
-    margin-top: ${theme.eui.euiSizeS};
-
     .siemSubtitle__item {
       color: ${theme.eui.euiTextSubduedColor};
       font-size: ${theme.eui.euiFontSizeXS};
diff --git a/x-pack/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_host_table.test.tsx.snap b/x-pack/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_host_table.test.tsx.snap
index e99916498b22d..818e6d09a3656 100644
--- a/x-pack/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_host_table.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_host_table.test.tsx.snap
@@ -1,10 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Authentication Host Table Component rendering it renders the host authentication table 1`] = `
-.c2 {
-  margin-top: 8px;
-}
-
 .c2 .siemSubtitle__item {
   color: #7a7f89;
   font-size: 12px;
diff --git a/x-pack/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_user_table.test.tsx.snap b/x-pack/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_user_table.test.tsx.snap
index dfcedad275512..8eaf2e75f7600 100644
--- a/x-pack/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_user_table.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_user_table.test.tsx.snap
@@ -1,10 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Authentication User Table Component rendering it renders the user authentication table 1`] = `
-.c2 {
-  margin-top: 8px;
-}
-
 .c2 .siemSubtitle__item {
   color: #7a7f89;
   font-size: 12px;