diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index 88f06ee9edcb..4d9946809319 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -4308,9 +4308,9 @@ exports[`Header handles visibility and lock changes 1`] = `
                   },
                 ]
               }
-              className=""
               data-test-subj="breadcrumbs"
               max={10}
+              simplify={false}
             >
               <EuiBreadcrumbs
                 breadcrumbs={
@@ -12624,9 +12624,9 @@ exports[`Header renders condensed header 1`] = `
                   },
                 ]
               }
-              className=""
               data-test-subj="breadcrumbs"
               max={10}
+              simplify={false}
             >
               <EuiBreadcrumbs
                 breadcrumbs={
@@ -17457,11 +17457,11 @@ exports[`Header renders page header with application title 1`] = `
                     },
                   ]
                 }
-                className="headerBreadcrumbs"
                 data-test-subj="breadcrumbs"
                 max={10}
+                simplify={true}
               >
-                <EuiBreadcrumbs
+                <EuiSimplifiedBreadcrumbs
                   breadcrumbs={
                     Array [
                       Object {
@@ -17470,26 +17470,26 @@ exports[`Header renders page header with application title 1`] = `
                       },
                     ]
                   }
-                  className="euiHeaderBreadcrumbs headerBreadcrumbs"
+                  className="euiHeaderBreadcrumbs euiHeaderBreadcrumbs--simplified"
                   data-test-subj="breadcrumbs"
                   max={10}
                   truncate={true}
                 >
                   <nav
                     aria-label="breadcrumb"
-                    className="euiBreadcrumbs euiHeaderBreadcrumbs headerBreadcrumbs euiBreadcrumbs--truncate"
+                    className="euiSimplifiedBreadcrumbs euiHeaderBreadcrumbs euiHeaderBreadcrumbs--simplified euiSimplifiedBreadcrumbs--truncate"
                     data-test-subj="breadcrumbs"
                   >
                     <div
-                      className="euiBreadcrumbWall euiBreadcrumbWall--single"
+                      className="euiSimplifiedBreadcrumbWall euiSimplifiedBreadcrumbWall--single"
                     >
                       <div
-                        className="euiBreadcrumbWrapper euiBreadcrumbWrapper--first euiBreadcrumbWrapper--last"
+                        className="euiSimplifiedBreadcrumbWrapper euiSimplifiedBreadcrumbWrapper--first euiSimplifiedBreadcrumbWrapper--last"
                       >
                         <EuiInnerText>
                           <span
                             aria-current="page"
-                            className="euiBreadcrumb euiBreadcrumb--last"
+                            className="euiSimplifiedBreadcrumb euiSimplifiedBreadcrumb--last"
                             data-test-subj="breadcrumb first"
                             title="test"
                           >
@@ -17498,8 +17498,13 @@ exports[`Header renders page header with application title 1`] = `
                         </EuiInnerText>
                       </div>
                     </div>
+                    <EuiBreadcrumbSeparator>
+                      <div
+                        className="euiBreadcrumbSeparator"
+                      />
+                    </EuiBreadcrumbSeparator>
                   </nav>
-                </EuiBreadcrumbs>
+                </EuiSimplifiedBreadcrumbs>
               </EuiHeaderBreadcrumbs>
             </HeaderBreadcrumbs>
           </div>
@@ -21814,9 +21819,9 @@ exports[`Header toggles primary navigation menu when clicked 1`] = `
                   },
                 ]
               }
-              className=""
               data-test-subj="breadcrumbs"
               max={10}
+              simplify={false}
             >
               <EuiBreadcrumbs
                 breadcrumbs={
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap
index 441f43729e98..e6ac818d9b6a 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap
@@ -36,15 +36,6 @@ exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 3`] =
 
 exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable with updated header 1`] = `null`;
 
-exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable with updated header 2`] = `
-<span
-  aria-current="page"
-  className="euiBreadcrumb euiBreadcrumb--last"
-  data-test-subj="breadcrumb first"
-  title="First"
->
-  First
-</span>
-`;
+exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable with updated header 2`] = `null`;
 
 exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable with updated header 3`] = `null`;
diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.scss b/src/core/public/chrome/ui/header/header_breadcrumbs.scss
deleted file mode 100644
index b3f09e9e8a93..000000000000
--- a/src/core/public/chrome/ui/header/header_breadcrumbs.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
-* Copyright OpenSearch Contributors
-* SPDX-License-Identifier: Apache-2.0
-*/
-
-.headerBreadcrumbs {
-  margin-left: 0;
-  color: $euiColorPrimary;
-
-  .euiBreadcrumbWall {
-    background-image: none; // Removes any background image
-  }
-
-  .euiBreadcrumbWrapper {
-    padding-left: 0;
-    padding-right: 0;
-
-    &.euiBreadcrumbWrapper--last::after,
-    &:not(.euiBreadcrumbWrapper--last)::after {
-      content: "/";
-      background-color: transparent;
-      padding: 0 $euiSizeS;
-      color: $euiColorMediumShade;
-    }
-
-    &.euiBreadcrumbWrapper--last::before,
-    &:not(.euiBreadcrumbWrapper--last)::before {
-      display: none;
-    }
-  }
-
-  .euiBreadcrumb {
-    color: inherit !important;
-  }
-}
diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx
index 6cc25b392ce3..f01e751e39f0 100644
--- a/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx
+++ b/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx
@@ -67,7 +67,6 @@ describe('HeaderBreadcrumbs', () => {
       />
     );
     expect(wrapper.find('.euiBreadcrumb')).toMatchSnapshot();
-    expect(wrapper.find('.headerBreadcrumbs').exists()).toBeTruthy();
     expect(wrapper.find('[data-test-subj="breadcrumb first"]').exists()).toBeFalsy();
 
     act(() => breadcrumbs$.next([{ text: 'First' }, { text: 'Second' }]));
diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
index 5361db221d10..52c9aa2628e9 100644
--- a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
+++ b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
@@ -34,7 +34,6 @@ import React, { useEffect, useState } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import { ChromeBreadcrumb, ChromeBreadcrumbEnricher } from '../../chrome_service';
-import './header_breadcrumbs.scss';
 
 interface Props {
   appTitle$: Observable<string>;
@@ -85,14 +84,13 @@ export function HeaderBreadcrumbs({
   }));
 
   const remainingCrumbs = useUpdatedHeader ? crumbs.slice(0, -1) : crumbs;
-  const className = useUpdatedHeader ? 'headerBreadcrumbs' : '';
 
   return (
     <EuiHeaderBreadcrumbs
       breadcrumbs={renderFullLength ? crumbs : remainingCrumbs}
       max={10}
       data-test-subj="breadcrumbs"
-      className={className}
+      simplify={!!useUpdatedHeader}
     />
   );
 }