diff --git a/package.json b/package.json
index 994bb6929218..0fc7f728ac39 100644
--- a/package.json
+++ b/package.json
@@ -145,7 +145,7 @@
   "dependencies": {
     "@aws-crypto/client-node": "^3.1.1",
     "@elastic/datemath": "5.0.3",
-    "@elastic/eui": "npm:@opensearch-project/oui@1.9.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.10.0",
     "@elastic/good": "^9.0.1-kibana3",
     "@elastic/numeral": "npm:@amoo-miki/numeral@2.6.0",
     "@elastic/request-crypto": "2.0.0",
diff --git a/packages/osd-ui-framework/package.json b/packages/osd-ui-framework/package.json
index 74eb5c34c58b..3088d58f07ec 100644
--- a/packages/osd-ui-framework/package.json
+++ b/packages/osd-ui-framework/package.json
@@ -23,7 +23,7 @@
     "enzyme-adapter-react-16": "^1.9.1"
   },
   "devDependencies": {
-    "@elastic/eui": "npm:@opensearch-project/oui@1.9.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.10.0",
     "@osd/babel-preset": "1.0.0",
     "@osd/optimizer": "1.0.0",
     "comment-stripper": "^0.0.4",
diff --git a/packages/osd-ui-shared-deps/package.json b/packages/osd-ui-shared-deps/package.json
index 23f05e9a2509..fc7da1d3b91f 100644
--- a/packages/osd-ui-shared-deps/package.json
+++ b/packages/osd-ui-shared-deps/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@elastic/charts": "31.1.0",
-    "@elastic/eui": "npm:@opensearch-project/oui@1.9.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.10.0",
     "@elastic/numeral": "npm:@amoo-miki/numeral@2.6.0",
     "@opensearch/datemath": "5.0.3",
     "@osd/i18n": "1.0.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 46dce92ddeac..219c5dd3d389 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
@@ -8923,17 +8923,23 @@ exports[`Header renders application header without title and breadcrumbs 1`] = `
                       <EuiPopover
                         anchorPosition="downCenter"
                         button={
-                          <EuiHeaderSectionItemButton
-                            className="headerRecentItemsButton"
-                            data-test-subj="recentItemsSectionButton"
-                            onClick={[Function]}
-                            size="s"
+                          <EuiToolTip
+                            content="Recents"
+                            delay="long"
+                            position="bottom"
                           >
-                            <EuiIcon
-                              size="m"
-                              type="recentlyViewedApp"
+                            <EuiButtonIcon
+                              aria-expanded={false}
+                              aria-haspopup="true"
+                              aria-label="View recents"
+                              className="headerRecentItemsButton"
+                              color="text"
+                              data-test-subj="recentItemsSectionButton"
+                              iconType="recent"
+                              onClick={[Function]}
+                              size="xs"
                             />
-                          </EuiHeaderSectionItemButton>
+                          </EuiToolTip>
                         }
                         closePopover={[Function]}
                         display="inlineBlock"
@@ -8950,86 +8956,61 @@ exports[`Header renders application header without title and breadcrumbs 1`] = `
                           <div
                             className="euiPopover__anchor"
                           >
-                            <EuiHeaderSectionItemButton
-                              className="headerRecentItemsButton"
-                              data-test-subj="recentItemsSectionButton"
-                              onClick={[Function]}
-                              size="s"
+                            <EuiToolTip
+                              content="Recents"
+                              delay="long"
+                              position="bottom"
                             >
-                              <EuiButtonEmpty
-                                buttonRef={
-                                  Object {
-                                    "current": <button
-                                      class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiHeaderSectionItemButton headerRecentItemsButton"
-                                      data-test-subj="recentItemsSectionButton"
-                                      type="button"
-                                    >
-                                      <span
-                                        class="euiButtonContent euiButtonEmpty__content"
-                                      >
-                                        <span
-                                          class="euiButtonEmpty__text"
-                                        >
-                                          <span
-                                            class="euiHeaderSectionItemButton__content"
-                                          >
-                                            <span
-                                              data-euiicon-type="recentlyViewedApp"
-                                            />
-                                          </span>
-                                        </span>
-                                      </span>
-                                    </button>,
-                                  }
-                                }
-                                className="euiHeaderSectionItemButton headerRecentItemsButton"
-                                color="text"
-                                data-test-subj="recentItemsSectionButton"
-                                onClick={[Function]}
-                                size="s"
+                              <span
+                                className="euiToolTipAnchor"
+                                onKeyUp={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
                               >
-                                <button
-                                  className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiHeaderSectionItemButton headerRecentItemsButton"
+                                <EuiButtonIcon
+                                  aria-expanded={false}
+                                  aria-haspopup="true"
+                                  aria-label="View recents"
+                                  className="headerRecentItemsButton"
+                                  color="text"
                                   data-test-subj="recentItemsSectionButton"
-                                  disabled={false}
+                                  iconType="recent"
+                                  onBlur={[Function]}
                                   onClick={[Function]}
-                                  type="button"
+                                  onFocus={[Function]}
+                                  size="xs"
                                 >
-                                  <EuiButtonContent
-                                    className="euiButtonEmpty__content"
-                                    iconSide="left"
-                                    iconSize="m"
-                                    textProps={
-                                      Object {
-                                        "className": "euiButtonEmpty__text",
-                                      }
-                                    }
+                                  <button
+                                    aria-expanded={false}
+                                    aria-haspopup="true"
+                                    aria-label="View recents"
+                                    className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall headerRecentItemsButton"
+                                    data-test-subj="recentItemsSectionButton"
+                                    disabled={false}
+                                    onBlur={[Function]}
+                                    onClick={[Function]}
+                                    onFocus={[Function]}
+                                    type="button"
                                   >
-                                    <span
-                                      className="euiButtonContent euiButtonEmpty__content"
+                                    <EuiIcon
+                                      aria-hidden="true"
+                                      className="euiButtonIcon__icon"
+                                      color="inherit"
+                                      size="m"
+                                      type="recent"
                                     >
                                       <span
-                                        className="euiButtonEmpty__text"
-                                      >
-                                        <span
-                                          className="euiHeaderSectionItemButton__content"
-                                        >
-                                          <EuiIcon
-                                            size="m"
-                                            type="recentlyViewedApp"
-                                          >
-                                            <span
-                                              data-euiicon-type="recentlyViewedApp"
-                                              size="m"
-                                            />
-                                          </EuiIcon>
-                                        </span>
-                                      </span>
-                                    </span>
-                                  </EuiButtonContent>
-                                </button>
-                              </EuiButtonEmpty>
-                            </EuiHeaderSectionItemButton>
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        color="inherit"
+                                        data-euiicon-type="recent"
+                                        size="m"
+                                      />
+                                    </EuiIcon>
+                                  </button>
+                                </EuiButtonIcon>
+                              </span>
+                            </EuiToolTip>
                           </div>
                         </div>
                       </EuiPopover>
@@ -17428,17 +17409,23 @@ exports[`Header renders page header with application title 1`] = `
                       <EuiPopover
                         anchorPosition="downCenter"
                         button={
-                          <EuiHeaderSectionItemButton
-                            className="headerRecentItemsButton"
-                            data-test-subj="recentItemsSectionButton"
-                            onClick={[Function]}
-                            size="xs"
+                          <EuiToolTip
+                            content="Recents"
+                            delay="long"
+                            position="bottom"
                           >
-                            <EuiIcon
-                              size="m"
-                              type="recentlyViewedApp"
+                            <EuiButtonIcon
+                              aria-expanded={false}
+                              aria-haspopup="true"
+                              aria-label="View recents"
+                              className="headerRecentItemsButton"
+                              color="text"
+                              data-test-subj="recentItemsSectionButton"
+                              iconType="recent"
+                              onClick={[Function]}
+                              size="xs"
                             />
-                          </EuiHeaderSectionItemButton>
+                          </EuiToolTip>
                         }
                         closePopover={[Function]}
                         display="inlineBlock"
@@ -17455,86 +17442,61 @@ exports[`Header renders page header with application title 1`] = `
                           <div
                             className="euiPopover__anchor"
                           >
-                            <EuiHeaderSectionItemButton
-                              className="headerRecentItemsButton"
-                              data-test-subj="recentItemsSectionButton"
-                              onClick={[Function]}
-                              size="xs"
+                            <EuiToolTip
+                              content="Recents"
+                              delay="long"
+                              position="bottom"
                             >
-                              <EuiButtonEmpty
-                                buttonRef={
-                                  Object {
-                                    "current": <button
-                                      class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiHeaderSectionItemButton headerRecentItemsButton"
-                                      data-test-subj="recentItemsSectionButton"
-                                      type="button"
-                                    >
-                                      <span
-                                        class="euiButtonContent euiButtonEmpty__content"
-                                      >
-                                        <span
-                                          class="euiButtonEmpty__text"
-                                        >
-                                          <span
-                                            class="euiHeaderSectionItemButton__content"
-                                          >
-                                            <span
-                                              data-euiicon-type="recentlyViewedApp"
-                                            />
-                                          </span>
-                                        </span>
-                                      </span>
-                                    </button>,
-                                  }
-                                }
-                                className="euiHeaderSectionItemButton headerRecentItemsButton"
-                                color="text"
-                                data-test-subj="recentItemsSectionButton"
-                                onClick={[Function]}
-                                size="xs"
+                              <span
+                                className="euiToolTipAnchor"
+                                onKeyUp={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
                               >
-                                <button
-                                  className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiHeaderSectionItemButton headerRecentItemsButton"
+                                <EuiButtonIcon
+                                  aria-expanded={false}
+                                  aria-haspopup="true"
+                                  aria-label="View recents"
+                                  className="headerRecentItemsButton"
+                                  color="text"
                                   data-test-subj="recentItemsSectionButton"
-                                  disabled={false}
+                                  iconType="recent"
+                                  onBlur={[Function]}
                                   onClick={[Function]}
-                                  type="button"
+                                  onFocus={[Function]}
+                                  size="xs"
                                 >
-                                  <EuiButtonContent
-                                    className="euiButtonEmpty__content"
-                                    iconSide="left"
-                                    iconSize="s"
-                                    textProps={
-                                      Object {
-                                        "className": "euiButtonEmpty__text",
-                                      }
-                                    }
+                                  <button
+                                    aria-expanded={false}
+                                    aria-haspopup="true"
+                                    aria-label="View recents"
+                                    className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall headerRecentItemsButton"
+                                    data-test-subj="recentItemsSectionButton"
+                                    disabled={false}
+                                    onBlur={[Function]}
+                                    onClick={[Function]}
+                                    onFocus={[Function]}
+                                    type="button"
                                   >
-                                    <span
-                                      className="euiButtonContent euiButtonEmpty__content"
+                                    <EuiIcon
+                                      aria-hidden="true"
+                                      className="euiButtonIcon__icon"
+                                      color="inherit"
+                                      size="m"
+                                      type="recent"
                                     >
                                       <span
-                                        className="euiButtonEmpty__text"
-                                      >
-                                        <span
-                                          className="euiHeaderSectionItemButton__content"
-                                        >
-                                          <EuiIcon
-                                            size="m"
-                                            type="recentlyViewedApp"
-                                          >
-                                            <span
-                                              data-euiicon-type="recentlyViewedApp"
-                                              size="m"
-                                            />
-                                          </EuiIcon>
-                                        </span>
-                                      </span>
-                                    </span>
-                                  </EuiButtonContent>
-                                </button>
-                              </EuiButtonEmpty>
-                            </EuiHeaderSectionItemButton>
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        color="inherit"
+                                        data-euiicon-type="recent"
+                                        size="m"
+                                      />
+                                    </EuiIcon>
+                                  </button>
+                                </EuiButtonIcon>
+                              </span>
+                            </EuiToolTip>
                           </div>
                         </div>
                       </EuiPopover>
@@ -17807,22 +17769,22 @@ exports[`Header renders page header with application title 1`] = `
               >
                 <EuiHeaderSectionItem
                   border="none"
-                  className="newTopNavApplicationTitle"
                   data-test-subj="headerApplicationTitle"
                 >
                   <div
-                    className="euiHeaderSectionItem newTopNavApplicationTitle"
+                    className="euiHeaderSectionItem"
                     data-test-subj="headerApplicationTitle"
                   >
-                    <EuiText>
-                      <div
-                        className="euiText euiText--medium"
+                    <EuiTitle
+                      className="newTopNavHeaderTitle"
+                      size="l"
+                    >
+                      <h1
+                        className="euiTitle euiTitle--large newTopNavHeaderTitle"
                       >
-                        <h2>
-                          testTitle
-                        </h2>
-                      </div>
-                    </EuiText>
+                        testTitle
+                      </h1>
+                    </EuiTitle>
                   </div>
                 </EuiHeaderSectionItem>
                 <EuiHeaderSectionItem
diff --git a/src/core/public/chrome/ui/header/__snapshots__/recent_items.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/recent_items.test.tsx.snap
index b9813f1e7d1a..17634ee1c3fd 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/recent_items.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/recent_items.test.tsx.snap
@@ -9,27 +9,25 @@ exports[`Recent items should render base element normally 1`] = `
       <div
         class="euiPopover__anchor"
       >
-        <button
-          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiHeaderSectionItemButton headerRecentItemsButton"
-          data-test-subj="recentItemsSectionButton"
-          type="button"
+        <span
+          class="euiToolTipAnchor"
         >
-          <span
-            class="euiButtonContent euiButtonEmpty__content"
+          <button
+            aria-expanded="false"
+            aria-haspopup="true"
+            aria-label="View recents"
+            class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall headerRecentItemsButton"
+            data-test-subj="recentItemsSectionButton"
+            type="button"
           >
             <span
-              class="euiButtonEmpty__text"
-            >
-              <span
-                class="euiHeaderSectionItemButton__content"
-              >
-                <span
-                  data-euiicon-type="recentlyViewedApp"
-                />
-              </span>
-            </span>
-          </span>
-        </button>
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="recent"
+            />
+          </button>
+        </span>
       </div>
     </div>
   </div>
diff --git a/src/core/public/chrome/ui/header/header.scss b/src/core/public/chrome/ui/header/header.scss
index 334bd76fbc4b..8828679e7284 100644
--- a/src/core/public/chrome/ui/header/header.scss
+++ b/src/core/public/chrome/ui/header/header.scss
@@ -5,24 +5,70 @@
 
 .newTopNavHeader {
   z-index: 1000;
-  padding-left: $euiSizeXS;
+  padding: 0 $euiSizeL $euiSizeS;
   box-shadow: none;
   border-bottom: none;
   background: none;
+  height: auto;
+  gap: $euiSizeS;
 
   &.primaryHeader {
-    height: auto;
-    padding-top: $euiSizeM;
+    margin-top: $euiSizeM;
   }
 
   &.primaryApplicationHeader {
-    height: auto;
     padding-top: $euiSizeM - $euiSizeXS;
+    border-bottom: 1px solid $euiColorLightShade;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .headerAppActionMenu {
+    // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+    & > .euiFlexGroup {
+      gap: $euiSizeS;
+    }
+
+    // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+    & > .euiHeaderLinks > .euiHeaderLinks__list {
+      gap: $euiSizeS;
+
+      & > * {
+        margin: 0;
+      }
+    }
   }
 
   &:has(.headerDescriptionControl, .headerBottomControl) {
     height: auto;
   }
+
+  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+  & > .euiHeaderSection {
+    gap: $euiSizeS;
+
+    // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+    & > .euiHeaderSectionItem:empty {
+      display: none;
+    }
+  }
+
+  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+  &:not(:has(>:not(:empty))),
+  .euiHeaderSectionItem:not(:has(>:not(:empty))) {
+    display: none;
+  }
+}
+
+.headerGlobalNav:has(.newTopNavHeader:not(.primaryApplicationHeader)) {
+  margin-bottom: -1 * $euiSizeS;
+}
+
+.newTopNavHeaderTitle {
+  line-height: 1;
+  font-size: 2rem;
 }
 
 .primaryApplicationHeader {
@@ -40,10 +86,6 @@
   }
 }
 
-.newTopNavApplicationTitle {
-  padding: 0 $euiSizeM;
-}
-
 .newAppTopNavExpander {
   position: fixed;
   left: 0;
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
index 939a36911de9..492d9c7b3e78 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/src/core/public/chrome/ui/header/header.tsx
@@ -36,7 +36,7 @@ import {
   EuiHideFor,
   EuiIcon,
   EuiShowFor,
-  EuiText,
+  EuiTitle,
   htmlIdGenerator,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
@@ -412,12 +412,10 @@ export function Header({
       {/* Secondary header */}
       <EuiHeader className="newTopNavHeader">
         <EuiHeaderSection side="left">
-          <EuiHeaderSectionItem
-            border="none"
-            className="newTopNavApplicationTitle"
-            data-test-subj="headerApplicationTitle"
-          >
-            <EuiText>{breadcrumbs && <h2>{breadcrumbs[breadcrumbs.length - 1]?.text}</h2>}</EuiText>
+          <EuiHeaderSectionItem border="none" data-test-subj="headerApplicationTitle">
+            <EuiTitle size="l" className="newTopNavHeaderTitle">
+              {breadcrumbs && <h1>{breadcrumbs[breadcrumbs.length - 1]?.text}</h1>}
+            </EuiTitle>
           </EuiHeaderSectionItem>
 
           {renderBadge()}
diff --git a/src/core/public/chrome/ui/header/header_controls_container.scss b/src/core/public/chrome/ui/header/header_controls_container.scss
index bba07ef60fbd..472dab2005de 100644
--- a/src/core/public/chrome/ui/header/header_controls_container.scss
+++ b/src/core/public/chrome/ui/header/header_controls_container.scss
@@ -4,19 +4,21 @@
 */
 
 .headerControl {
-  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
-  & > .euiHeaderSectionItem {
-    margin: 0 $euiSizeXS;
-  }
+  gap: $euiSizeS;
 
   &.headerDescriptionControl {
-    padding: 0 $euiSizeM;
-    color: $euiTextSubduedColor;
-  }
+    .descriptionHeaderControl {
+      max-width: $euiLegibilityMaxWidth;
+      line-height: 1.5;
+      color: $euiTextSubduedColor;
 
-  &.headerBottomControl {
-    padding: $euiSizeM;
-    max-width: 725px;
+      // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+      .euiHeaderLink {
+        vertical-align: unset;
+        border: 0;
+        height: auto;
+      }
+    }
   }
 
   &:empty {
diff --git a/src/core/public/chrome/ui/header/recent_items.scss b/src/core/public/chrome/ui/header/recent_items.scss
index f8ba65393149..b82a533ca1c4 100644
--- a/src/core/public/chrome/ui/header/recent_items.scss
+++ b/src/core/public/chrome/ui/header/recent_items.scss
@@ -4,19 +4,7 @@
  */
 
 .headerRecentItemsButton {
-  margin-left: $euiSizeM;
-  margin-right: $euiSizeS;
-  min-width: $euiSizeL;
-  font-size: 0 !important;
-
-  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
-  .euiHeaderSectionItemButton__content,
-  .euiButtonEmpty__text {
-    line-height: 1;
-  }
-
-  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
-  .euiButtonEmpty__content {
-    padding: 0;
+  .primaryApplicationHeader & {
+    margin-top: $euiSizeXS;
   }
 }
diff --git a/src/core/public/chrome/ui/header/recent_items.tsx b/src/core/public/chrome/ui/header/recent_items.tsx
index 8224753dfd82..c7894104f163 100644
--- a/src/core/public/chrome/ui/header/recent_items.tsx
+++ b/src/core/public/chrome/ui/header/recent_items.tsx
@@ -6,16 +6,17 @@ import React, { useMemo, useState } from 'react';
 import * as Rx from 'rxjs';
 import {
   EuiPopover,
-  EuiHeaderSectionItemButton,
   EuiTextColor,
   EuiListGroup,
   EuiListGroupItem,
   EuiTitle,
-  EuiIcon,
   EuiText,
   EuiSpacer,
   EuiHeaderSectionItemButtonProps,
+  EuiButtonIcon,
+  EuiToolTip,
 } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
 import useObservable from 'react-use/lib/useObservable';
 import { ChromeRecentlyAccessedHistoryItem } from '../..';
 import { WorkspaceObject } from '../../../workspace';
@@ -67,21 +68,35 @@ export const RecentItems = ({
     setIsPopoverOpen(false);
   };
 
+  const button = (
+    <EuiToolTip
+      content={i18n.translate('core.ui.chrome.headerGlobalNav.viewRecentItemsTooltip', {
+        defaultMessage: 'Recents',
+      })}
+      delay="long"
+      position="bottom"
+    >
+      <EuiButtonIcon
+        iconType="recent"
+        color="text"
+        size="xs"
+        aria-expanded={isPopoverOpen}
+        aria-haspopup="true"
+        aria-label={i18n.translate('core.ui.chrome.headerGlobalNav.viewRecentItemsAriaLabel', {
+          defaultMessage: 'View recents',
+        })}
+        onClick={() => {
+          setIsPopoverOpen((prev) => !prev);
+        }}
+        data-test-subj="recentItemsSectionButton"
+        className="headerRecentItemsButton"
+      />
+    </EuiToolTip>
+  );
+
   return (
     <EuiPopover
-      button={
-        <EuiHeaderSectionItemButton
-          onClick={() => {
-            setIsPopoverOpen((prev) => !prev);
-          }}
-          data-test-subj="recentItemsSectionButton"
-          size={buttonSize}
-          className="headerRecentItemsButton"
-        >
-          {/* TODO: replace this icon once there is a new icon added to OUI https://github.com/opensearch-project/OpenSearch-Dashboards/issues/7354 */}
-          <EuiIcon type="recentlyViewedApp" size="m" />
-        </EuiHeaderSectionItemButton>
-      }
+      button={button}
       isOpen={isPopoverOpen}
       closePopover={() => {
         setIsPopoverOpen(false);
diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
index 96e6e4d6c97c..598d2f57b3a4 100644
--- a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
+++ b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
@@ -18,7 +18,8 @@
 
 .headerAppActionMenu .globalQueryBar,
 .headerAppActionMenu .globalDatePicker {
-  padding-top: 0;
+  // The left-padding is a magic number just to add some space to the left that reduces with screen width
+  padding: 0 0 0 calc(100vw - 1600px);
 }
 
 .globalFilterGroup__filterBar {
diff --git a/src/plugins/navigation/public/top_nav_menu/_index.scss b/src/plugins/navigation/public/top_nav_menu/_index.scss
index 556b58ff6454..b8b2b7646eb3 100644
--- a/src/plugins/navigation/public/top_nav_menu/_index.scss
+++ b/src/plugins/navigation/public/top_nav_menu/_index.scss
@@ -2,11 +2,19 @@
 
 .osdTopNavMenu {
   margin-right: $euiSizeXS;
+
+  .newTopNavHeader & {
+    margin-right: 0;
+  }
 }
 
 .osdTopNavMenuGroupedActions {
   background-color: $euiColorEmptyShade;
 
+  .newTopNavHeader & {
+    margin: 0;
+  }
+
   // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
   & > .euiSwitch,
   & > .euiButton,
diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_control_item.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_control_item.tsx
index 4b2d7b948170..fee4df701668 100644
--- a/src/plugins/navigation/public/top_nav_menu/top_nav_control_item.tsx
+++ b/src/plugins/navigation/public/top_nav_menu/top_nav_control_item.tsx
@@ -52,7 +52,10 @@ export function TopNavControlItem(props: TopNavControlData) {
       <EuiText className="descriptionHeaderControl" size="s">
         {props.description}
         {links?.map((linkProps) => (
-          <TopNavControlItem {...linkProps} />
+          <>
+            {/* @ts-ignore using an undefined property to prevent abuse */}
+            <TopNavControlItem {...linkProps} sizeOverride="xs" />
+          </>
         ))}
       </EuiText>
     );
@@ -102,7 +105,8 @@ export function TopNavControlItem(props: TopNavControlData) {
     case 'link':
       component = (
         <EuiHeaderLink
-          size="s"
+          // @ts-ignore using an undefined property to prevent abuse
+          size={props.sizeOverride || 's'}
           iconType={props.iconType}
           iconSide={props.iconSide}
           iconSize={props.iconSize}
diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
index 4abf5a4cd8bc..49db1401c7ea 100644
--- a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
+++ b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
@@ -172,7 +172,7 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
             return (
               <>
                 <MountPointPortal setMountPoint={setMenuMountPoint}>
-                  <EuiFlexGroup alignItems="stretch" gutterSize="s">
+                  <EuiFlexGroup alignItems="stretch" gutterSize="none">
                     <EuiFlexItem grow={false} className="osdTopNavMenuScreenTitle">
                       <EuiText size="s">{screenTitle}</EuiText>
                     </EuiFlexItem>
@@ -187,7 +187,7 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
           case TopNavMenuItemRenderType.OMITTED:
             return screenTitle ? (
               <MountPointPortal setMountPoint={setMenuMountPoint}>
-                <EuiFlexGroup alignItems="stretch" gutterSize="s">
+                <EuiFlexGroup alignItems="stretch" gutterSize="none">
                   <EuiFlexItem grow={false} className="osdTopNavMenuScreenTitle">
                     <EuiText size="s">{screenTitle}</EuiText>
                   </EuiFlexItem>
@@ -206,7 +206,7 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
               return (
                 <>
                   <MountPointPortal setMountPoint={setMenuMountPoint}>
-                    <EuiFlexGroup alignItems="stretch" gutterSize="s">
+                    <EuiFlexGroup alignItems="stretch" gutterSize="none">
                       <EuiFlexItem grow={false} className="osdTopNavMenuScreenTitle">
                         <EuiText size="s">{screenTitle}</EuiText>
                       </EuiFlexItem>
diff --git a/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json
index f7f34b3bf070..0764735d83c6 100644
--- a/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json
+++ b/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json
@@ -12,7 +12,7 @@
     "build": "../../../../scripts/use_node ../../../../scripts/remove.js './target' && tsc"
   },
   "devDependencies": {
-    "@elastic/eui": "npm:@opensearch-project/oui@1.9.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.10.0",
     "@osd/plugin-helpers": "1.0.0",
     "react": "^16.14.0",
     "react-dom": "^16.12.0",
diff --git a/test/plugin_functional/plugins/osd_sample_panel_action/package.json b/test/plugin_functional/plugins/osd_sample_panel_action/package.json
index acffe3bf4dc7..ceb81578a79b 100644
--- a/test/plugin_functional/plugins/osd_sample_panel_action/package.json
+++ b/test/plugin_functional/plugins/osd_sample_panel_action/package.json
@@ -12,7 +12,7 @@
     "build": "../../../../scripts/use_node ../../../../scripts/remove.js './target' && tsc"
   },
   "devDependencies": {
-    "@elastic/eui": "npm:@opensearch-project/oui@1.9.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.10.0",
     "react": "^16.14.0",
     "typescript": "4.0.2"
   }
diff --git a/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json b/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json
index 7e5deeb8955c..0726234c29a1 100644
--- a/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json
+++ b/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json
@@ -12,7 +12,7 @@
     "build": "../../../../scripts/use_node ../../../../scripts/remove.js './target' && tsc"
   },
   "devDependencies": {
-    "@elastic/eui": "npm:@opensearch-project/oui@1.9.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.10.0",
     "@osd/plugin-helpers": "1.0.0",
     "react": "^16.14.0",
     "typescript": "4.0.2"
diff --git a/yarn.lock b/yarn.lock
index 6ac8cb8ece0c..6be9df8a6e58 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1431,10 +1431,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@npm:@opensearch-project/oui@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@opensearch-project/oui/-/oui-1.9.0.tgz#c31ceffaf2a5e6dc9b51bc44eb8029f1dfd74a94"
-  integrity sha512-iHgS8HA5u2YdDI6IcesoO/wzeFdEiQwm51scGIJPvk+nxMyU2eX1s3SHs0xJd9gpNc2VSY97CgF6yK6tT52eUA==
+"@elastic/eui@npm:@opensearch-project/oui@1.10.0":
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/@opensearch-project/oui/-/oui-1.10.0.tgz#111a400f5c04ba4088c0266bad7ab4306cc30d94"
+  integrity sha512-T1de6McK0YkXPjUUe0bYBHL58b7fJ43Bk/0ohpVn2ss5XkIPkFv7JE3diTCmr0cD1SsRfbM6lRNig4XBCOPflw==
   dependencies:
     "@types/chroma-js" "^2.4.0"
     "@types/react-beautiful-dnd" "^13.1.3"
@@ -15689,7 +15689,7 @@ string-similarity@^4.0.1:
   resolved "https://registry.yarnpkg.com/string-similarity/-/string-similarity-4.0.4.tgz#42d01ab0b34660ea8a018da8f56a3309bb8b2a5b"
   integrity sha512-/q/8Q4Bl4ZKAPjj8WerIBJWALKkaPRfrvhfF8k/B23i4nzrlRj2/go1m90In7nG/3XDSbOo0+pu6RvCTM9RGMQ==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -15724,6 +15724,15 @@ string-width@^3.0.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -15802,7 +15811,7 @@ stringify-entities@^3.0.1:
     character-entities-legacy "^1.0.0"
     xtend "^4.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -15844,6 +15853,13 @@ strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -17989,7 +18005,7 @@ workerpool@6.2.1:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343"
   integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -18015,6 +18031,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"