diff --git a/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap b/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap
index f55fc4c110b11..749ba0d58422e 100644
--- a/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap
+++ b/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap
@@ -53,6 +53,7 @@ exports[`WithSolutionNav renders wrapped component 1`] = `
   pageSideBarProps={
     Object {
       "className": "kbnSolutionNav__sidebar css-c34ez9",
+      "hasEmbellish": true,
       "minWidth": undefined,
       "paddingSize": "none",
     }
@@ -113,6 +114,7 @@ exports[`WithSolutionNav with children 1`] = `
   pageSideBarProps={
     Object {
       "className": "kbnSolutionNav__sidebar css-c34ez9",
+      "hasEmbellish": true,
       "minWidth": undefined,
       "paddingSize": "none",
     }
diff --git a/packages/shared-ux/page/solution_nav/src/solution_nav.scss b/packages/shared-ux/page/solution_nav/src/solution_nav.scss
index 9db81e1b1a062..3456364009e60 100644
--- a/packages/shared-ux/page/solution_nav/src/solution_nav.scss
+++ b/packages/shared-ux/page/solution_nav/src/solution_nav.scss
@@ -1,14 +1,15 @@
-$euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
-@import '@elastic/eui/src/components/side_nav/mixins';
 @import 'variables';
 
 // Put the page background color in the flyout version too
 .kbnSolutionNav__flyout {
   background-color: $euiPageBackgroundColor;
+
+  .kbnSolutionNav {
+    flex: auto; // Override default EuiPageSideBar flex CSS when in a flyout
+  }
 }
 
 .kbnSolutionNav {
-  @include euiSideNavEmbellish;
   @include euiYScroll;
 
   display: flex;
diff --git a/packages/shared-ux/page/solution_nav/src/solution_nav.tsx b/packages/shared-ux/page/solution_nav/src/solution_nav.tsx
index 000176eb371b1..14b03c508fe5c 100644
--- a/packages/shared-ux/page/solution_nav/src/solution_nav.tsx
+++ b/packages/shared-ux/page/solution_nav/src/solution_nav.tsx
@@ -25,6 +25,7 @@ import {
   useIsWithinMinBreakpoint,
   useEuiTheme,
   useEuiThemeCSSVariables,
+  EuiPageSidebar,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
@@ -102,6 +103,7 @@ export const SolutionNav: FC<SolutionNavProps> = ({
   canBeCollapsed = true,
   ...rest
 }) => {
+  const euiThemeContext = useEuiTheme();
   const isSmallerBreakpoint = useIsWithinBreakpoints(mobileBreakpoints);
   const isMediumBreakpoint = useIsWithinBreakpoints(['m']);
   const isLargerBreakpoint = useIsWithinMinBreakpoint('l');
@@ -177,7 +179,7 @@ export const SolutionNav: FC<SolutionNavProps> = ({
     );
   }, [children, headingID, isCustomSideNav, isHidden, items, rest]);
 
-  const { euiTheme } = useEuiTheme();
+  const { euiTheme } = euiThemeContext;
   const navWidth = useMemo(() => {
     if (isLargerBreakpoint) {
       return isOpenOnDesktop ? FLYOUT_SIZE_CSS : euiTheme.size.xxl;
@@ -234,11 +236,11 @@ export const SolutionNav: FC<SolutionNavProps> = ({
               className="kbnSolutionNav__flyout"
               hideCloseButton={!canBeCollapsed}
             >
-              <div className={sideNavClasses}>
+              <EuiPageSidebar className={sideNavClasses} hasEmbellish={true}>
                 {titleText}
                 <EuiSpacer size="l" />
                 {sideNavContent}
-              </div>
+              </EuiPageSidebar>
             </EuiFlyout>
           )}
           {canBeCollapsed && (
diff --git a/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx b/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx
index 2e4879a4093cb..7689a739ebbe9 100644
--- a/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx
+++ b/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx
@@ -76,6 +76,7 @@ export const withSolutionNav = <P extends TemplateProps>(WrappedComponent: Compo
       ...props.pageSideBarProps,
       minWidth: isSidebarShrunk ? euiTheme.size.xxl : undefined,
       className: sideBarClasses,
+      hasEmbellish: !isSidebarShrunk,
     };
 
     return (
diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss
index d0070cef729b7..af40e4d14ff2d 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss
@@ -1,13 +1,9 @@
-$euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
-@import '@elastic/eui/src/components/side_nav/mixins';
-
 // Put the page background color in the flyout version too
 .kbnPageTemplateSolutionNav__flyout {
   background-color: $euiPageBackgroundColor;
 }
 
 .kbnPageTemplateSolutionNav {
-  @include euiSideNavEmbellish;
   @include euiYScroll;
 
   @include euiBreakpoint('m' ,'l', 'xl') {
diff --git a/x-pack/plugins/security_solution/public/app/home/template_wrapper/index.tsx b/x-pack/plugins/security_solution/public/app/home/template_wrapper/index.tsx
index 5213a24172357..c81d17e18ff1e 100644
--- a/x-pack/plugins/security_solution/public/app/home/template_wrapper/index.tsx
+++ b/x-pack/plugins/security_solution/public/app/home/template_wrapper/index.tsx
@@ -35,7 +35,7 @@ const StyledKibanaPageTemplate = styled(KibanaPageTemplate)<
     theme: EuiThemeComputed; // using computed EUI theme to be consistent with user profile theming
   }
 >`
-  .kbnSolutionNav {
+  .kbnSolutionNav__sidebar:not(.kbnSolutionNav__sidebar--shrink) {
     background-color: ${({ theme }) => theme.colors.emptyShade};
   }