diff --git a/package.json b/package.json
index f9bee909ef17..bf3a755cb806 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^7.16.0-canary.4",
     "@elastic/ems-client": "7.15.0",
-    "@elastic/eui": "37.6.0",
+    "@elastic/eui": "38.0.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "^9.0.1-kibana3",
     "@elastic/maki": "6.3.0",
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 4450533090c7..e73d5e8002a0 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
@@ -4267,7 +4267,7 @@ exports[`Header renders 1`] = `
                     }
                     button={
                       <EuiHeaderSectionItemButton
-                        aria-controls="mockId"
+                        aria-controls="generated-id"
                         aria-expanded={false}
                         aria-label="Toggle primary navigation"
                         aria-pressed={false}
@@ -4337,7 +4337,7 @@ exports[`Header renders 1`] = `
                       }
                     }
                     homeHref="/"
-                    id="mockId"
+                    id="generated-id"
                     isLocked={true}
                     isNavOpen={false}
                     navLinks$={
@@ -4497,7 +4497,7 @@ exports[`Header renders 1`] = `
                       aria-label="Primary"
                       button={
                         <EuiHeaderSectionItemButton
-                          aria-controls="mockId"
+                          aria-controls="generated-id"
                           aria-expanded={false}
                           aria-label="Toggle primary navigation"
                           aria-pressed={false}
@@ -4511,14 +4511,14 @@ exports[`Header renders 1`] = `
                         </EuiHeaderSectionItemButton>
                       }
                       data-test-subj="collapsibleNav"
-                      id="mockId"
+                      id="generated-id"
                       isOpen={false}
                       onClose={[Function]}
                       ownFocus={false}
                       size={248}
                     >
                       <EuiHeaderSectionItemButton
-                        aria-controls="mockId"
+                        aria-controls="generated-id"
                         aria-expanded={false}
                         aria-label="Toggle primary navigation"
                         aria-pressed={false}
@@ -4528,14 +4528,14 @@ exports[`Header renders 1`] = `
                         onTouchEnd={[Function]}
                       >
                         <EuiButtonEmpty
-                          aria-controls="mockId"
+                          aria-controls="generated-id"
                           aria-expanded={false}
                           aria-label="Toggle primary navigation"
                           aria-pressed={false}
                           buttonRef={
                             Object {
                               "current": <button
-                                aria-controls="mockId"
+                                aria-controls="generated-id"
                                 aria-expanded="false"
                                 aria-label="Toggle primary navigation"
                                 aria-pressed="false"
@@ -4569,7 +4569,7 @@ exports[`Header renders 1`] = `
                           onTouchEnd={[Function]}
                         >
                           <button
-                            aria-controls="mockId"
+                            aria-controls="generated-id"
                             aria-expanded={false}
                             aria-label="Toggle primary navigation"
                             aria-pressed={false}
diff --git a/src/core/public/chrome/ui/header/header.test.tsx b/src/core/public/chrome/ui/header/header.test.tsx
index a3a0197b4017..2692f2dbd194 100644
--- a/src/core/public/chrome/ui/header/header.test.tsx
+++ b/src/core/public/chrome/ui/header/header.test.tsx
@@ -15,10 +15,6 @@ import { applicationServiceMock } from '../../../mocks';
 import { Header } from './header';
 import { ChromeBreadcrumbsAppendExtension } from '../../types';
 
-jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
-  htmlIdGenerator: () => () => 'mockId',
-}));
-
 function mockProps() {
   const http = httpServiceMock.createSetupContract({ basePath: '/test' });
   const application = applicationServiceMock.createInternalStartContract();
diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
index addedbb97f55..faff660a7311 100644
--- a/src/dev/license_checker/config.ts
+++ b/src/dev/license_checker/config.ts
@@ -75,7 +75,7 @@ export const LICENSE_OVERRIDES = {
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   'node-sql-parser@3.6.1': ['(GPL-2.0 OR MIT)'], // GPL-2.0* https://github.com/taozhi8833998/node-sql-parser
   '@elastic/ems-client@7.15.0': ['Elastic License 2.0'],
-  '@elastic/eui@37.6.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@38.0.1': ['SSPL-1.0 OR Elastic License 2.0'],
 
   // TODO can be removed if the https://github.com/jindw/xmldom/issues/239 is released
   'xmldom@0.1.27': ['MIT'],
diff --git a/x-pack/plugins/canvas/public/components/home/__snapshots__/home.stories.storyshot b/x-pack/plugins/canvas/public/components/home/__snapshots__/home.stories.storyshot
index 8359b186e4af..d3ab369dcc32 100644
--- a/x-pack/plugins/canvas/public/components/home/__snapshots__/home.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/home/__snapshots__/home.stories.storyshot
@@ -13,7 +13,7 @@ exports[`Storyshots Home Home Page 1`] = `
     className="euiPageBody euiPageBody--borderRadiusNone"
   >
     <header
-      className="euiPageHeader euiPageHeader--paddingLarge euiPageHeader--responsive euiPageHeader--tabsAtBottom euiPage--restrictWidth-default euiPageHeader--center"
+      className="euiPageHeader euiPageHeader--paddingLarge euiPageHeader--restrictWidth-default euiPageHeader--responsive euiPageHeader--tabsAtBottom euiPageHeader--center"
     >
       <div
         className="euiPageHeaderContent"
@@ -78,7 +78,7 @@ exports[`Storyshots Home Home Page 1`] = `
             className="euiSpacer euiSpacer--l"
           />
           <div
-            className="euiTabs euiTabs--condensed euiTabs--large"
+            className="euiTabs euiTabs--large euiTabs--condensed"
             role="tablist"
           >
             <button
diff --git a/yarn.lock b/yarn.lock
index a01d50540aa4..19025452e2c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1430,10 +1430,10 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@37.6.0":
-  version "37.6.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-37.6.0.tgz#dc4fb2431e223047fa52b9035627c05a22197887"
-  integrity sha512-CeaKhwZCbTaq2h0cn3s9t0kGr+P+khVtYNa72zAVsH1Vhb6Ox0Z7cnvmn49qyjb3GnOHSYtQlbyrAcxqstfwbw==
+"@elastic/eui@38.0.1":
+  version "38.0.1"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-38.0.1.tgz#de03c4436cd1b58327f54f57e4248183d681c0f8"
+  integrity sha512-yzV56rGVwhALnLVXsw2LGsFksh7c27BwIQOl2memDfm15VprzX5Fd+u6TpX8TkpFbTTgnYfyhI11W3eKVUYt1g==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"