diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/app_menu.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/app_menu.tsx
new file mode 100644
index 0000000000000..b1d3dd86494bc
--- /dev/null
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/app_menu.tsx
@@ -0,0 +1,43 @@
+/*
+ * 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 { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { MountPoint } from '@kbn/core-mount-utils-browser';
+import React from 'react';
+import { HeaderActionMenu } from '../header/header_action_menu';
+
+interface AppMenuBarProps {
+  isOpen: boolean;
+  headerActionMenuMounter: { mount: MountPoint<HTMLElement> | undefined };
+}
+export const AppMenuBar = ({ headerActionMenuMounter }: AppMenuBarProps) => {
+  const { euiTheme } = useEuiTheme();
+  return (
+    <div
+      className="header__actionMenu"
+      data-test-subj="kibanaProjectHeaderActionMenu"
+      css={css`
+        z-index: ${euiTheme.levels.header};
+        background: ${euiTheme.colors.emptyShade};
+        border-bottom: ${euiTheme.border.thin};
+        display: flex;
+        justify-content: end;
+        align-items: center;
+        padding: ${euiTheme.size.s};
+        margin-bottom: -${euiTheme.border.width.thin};
+        /* fixates the elements position in the viewport, removes the element from the flow of the page */
+        position: sticky;
+        /* position below the primary fixed EuiHeader in the viewport */
+        top: 48px;
+      `}
+    >
+      <HeaderActionMenu mounter={headerActionMenuMounter} />
+    </div>
+  );
+};
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx
index 8786b9223a2a9..551fa7895795d 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx
@@ -37,12 +37,13 @@ import React, { createRef, useCallback, useState } from 'react';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
 import useObservable from 'react-use/lib/useObservable';
 import { debounceTime, Observable, of } from 'rxjs';
-import { HeaderActionMenu, useHeaderActionMenuMounter } from '../header/header_action_menu';
+import { useHeaderActionMenuMounter } from '../header/header_action_menu';
 import { HeaderBreadcrumbs } from '../header/header_breadcrumbs';
 import { HeaderHelpMenu } from '../header/header_help_menu';
 import { HeaderNavControls } from '../header/header_nav_controls';
 import { HeaderTopBanner } from '../header/header_top_banner';
 import { ScreenReaderRouteAnnouncements, SkipToMainContent } from '../header/screen_reader_a11y';
+import { AppMenuBar } from './app_menu';
 import { ProjectNavigation } from './navigation';
 
 const headerCss = {
@@ -270,23 +271,12 @@ export const ProjectHeader = ({
               </EuiHeaderSectionItem>
             </EuiHeaderSection>
           </EuiHeader>
-
-          <EuiHeader
-            position="fixed"
-            className="header__secondBar"
-            data-test-subj="kibanaProjectHeaderActionMenu"
-          >
-            <EuiHeaderSection />
-            {headerActionMenuMounter.mount && (
-              <EuiHeaderSection side="right">
-                <EuiHeaderSectionItem>
-                  <HeaderActionMenu mounter={headerActionMenuMounter} />
-                </EuiHeaderSectionItem>
-              </EuiHeaderSection>
-            )}
-          </EuiHeader>
         </div>
       </header>
+
+      {headerActionMenuMounter.mount && (
+        <AppMenuBar isOpen={isOpen ?? false} headerActionMenuMounter={headerActionMenuMounter} />
+      )}
     </>
   );
 };
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/navigation.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/navigation.tsx
index f22a8acb067ed..c05e8c3c4b94d 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/navigation.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/navigation.tsx
@@ -40,6 +40,7 @@ export const ProjectNavigation: React.FC<ProjectNavigationProps> = ({
 
   return (
     <EuiCollapsibleNav
+      className="projectLayoutSideNav"
       css={collabsibleNavCSS}
       isOpen={isVisible}
       showButtonIfDocked={true}
diff --git a/src/core/public/styles/chrome/_banner.scss b/src/core/public/styles/chrome/_banner.scss
index 41ec7b08c6c04..9c521da3f30ca 100644
--- a/src/core/public/styles/chrome/_banner.scss
+++ b/src/core/public/styles/chrome/_banner.scss
@@ -12,7 +12,7 @@
   width: 100%;
 }
 
-// overriding `top` positioning of the chrome headers when the top banner is present.
+// overriding `top` positioning of the chrome headers
 .kbnBody--hasHeaderBanner .header__bars {
   .header__firstBar {
     top: $kbnHeaderBannerHeight;
@@ -21,3 +21,22 @@
     top: $kbnHeaderBannerHeight + $euiHeaderHeightCompensation;
   }
 }
+
+// overriding padding on the body element added by EUI
+.kbnBody.kbnBody--hasHeaderBanner.kbnBody--projectLayout.euiBody--headerIsFixed {
+  padding-top: $kbnHeaderBannerHeight + $euiHeaderHeightCompensation;
+
+  // overriding `top` positioning of the project side nav, and flyouts
+  // overriding `top` positioning of the project app menu toolbar
+  &.euiBody--headerIsFixed .euiCollapsibleNav,
+  &.euiBody--headerIsFixed:not(.euiDataGrid__restrictBody) .euiFlyout,
+  .header__actionMenu {
+    top: $kbnHeaderBannerHeight + $euiHeaderHeightCompensation;
+  }
+
+  // overriding `height` calculation of the project side nav, and flyouts
+  &.euiBody--headerIsFixed .euiCollapsibleNav,
+  &.euiBody--headerIsFixed:not(.euiDataGrid__restrictBody) .euiFlyout {
+    height: calc(100% - #{$kbnHeaderBannerHeight + $euiHeaderHeightCompensation});
+  }
+}
diff --git a/src/core/public/styles/rendering/_base.scss b/src/core/public/styles/rendering/_base.scss
index 9d4296ca3b4ef..a9ece9955e6ca 100644
--- a/src/core/public/styles/rendering/_base.scss
+++ b/src/core/public/styles/rendering/_base.scss
@@ -75,6 +75,9 @@
   &.kbnBody--chromeHidden {
     @include kbnAffordForHeader(0);
   }
+  &.kbnBody--projectLayout {
+    @include kbnAffordForHeader($euiHeaderHeightCompensation);
+  }
   &.kbnBody--chromeHidden.kbnBody--hasHeaderBanner {
     @include kbnAffordForHeader($kbnHeaderBannerHeight);
   }
diff --git a/x-pack/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx b/x-pack/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx
index 65780044eb8d3..27b449f841448 100644
--- a/x-pack/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx
+++ b/x-pack/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx
@@ -89,6 +89,17 @@ const PageOverlayGlobalStyles = createGlobalStyle<{ theme: EuiTheme }>`
   body.${PAGE_OVERLAY_DOCUMENT_BODY_FULLSCREEN_CLASSNAME} {
     ${FULL_SCREEN_CONTENT_OVERRIDES_CSS_STYLESHEET}
   }
+
+  //-------------------------------------------------------------------------------------------
+  // Style overrides for when Page Overlay is displayed in serverless project
+  //-------------------------------------------------------------------------------------------
+  // With serverless, there is 1 less header displayed, thus the display of the page overlay
+  // need to be adjusted slightly so that it still display below the header
+  //-------------------------------------------------------------------------------------------
+  body.kbnBody.kbnBody--projectLayout:not(.${PAGE_OVERLAY_DOCUMENT_BODY_FULLSCREEN_CLASSNAME}) .${PAGE_OVERLAY_CSS_CLASSNAME} {
+    top: ${({ theme: { eui } }) => eui.euiHeaderHeightCompensation};
+    height: calc(100% - (${({ theme: { eui } }) => eui.euiHeaderHeightCompensation}));
+  }
 `;
 
 const setDocumentBodyOverlayIsVisible = () => {