diff --git a/changelogs/fragments/8489.yml b/changelogs/fragments/8489.yml
new file mode 100644
index 000000000000..6e31211c8efd
--- /dev/null
+++ b/changelogs/fragments/8489.yml
@@ -0,0 +1,2 @@
+feat:
+- Update border style when new left nav expanded ([#8489](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8489))
\ No newline at end of file
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
index 74dfa496c9cb..c3159005c50b 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
@@ -63,9 +63,6 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
           </nav>
         </div>
       </div>
-      <hr
-        class="euiHorizontalRule euiHorizontalRule--full"
-      />
       <div
         class="bottom-container eui-xScroll bottom-container-expanded"
       />
@@ -87,9 +84,6 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 2`] = `
       <div
         class="flex-1-container"
       />
-      <hr
-        class="euiHorizontalRule euiHorizontalRule--full"
-      />
       <div
         class="bottom-container bottom-container-collapsed"
       />
@@ -161,9 +155,6 @@ exports[`<CollapsibleNavGroupEnabled /> should show use case nav when current na
           </nav>
         </div>
       </div>
-      <hr
-        class="euiHorizontalRule euiHorizontalRule--full"
-      />
       <div
         class="bottom-container eui-xScroll bottom-container-expanded"
       />
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
index e410361bef86..c04d21131e5f 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
@@ -102,11 +102,11 @@
     }
 
     &.bottom-container-expanded {
-      @include euiBottomShadowLarge($euiColorMediumShade, 0.1, true, true);
-
       gap: 16px;
       padding-top: $euiSizeM;
       padding-bottom: $euiSizeM;
+      border-top: $euiBorderThin;
+      border-color: $euiColorMediumShade;
     }
   }
 
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
index c9e2752055e1..66257eb48d7b 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
@@ -4,14 +4,7 @@
  */
 
 import './collapsible_nav_group_enabled.scss';
-import {
-  EuiFlyout,
-  EuiPanel,
-  EuiHorizontalRule,
-  EuiHideFor,
-  EuiFlyoutProps,
-  EuiShowFor,
-} from '@elastic/eui';
+import { EuiFlyout, EuiPanel, EuiHideFor, EuiFlyoutProps, EuiShowFor } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import React, { useMemo } from 'react';
 import useObservable from 'react-use/lib/useObservable';
@@ -250,7 +243,6 @@ export function CollapsibleNavGroupEnabled({
           // This element is used to push icons to the bottom of left navigation when collapsed
           !isNavOpen ? <div className="flex-1-container" /> : null
         }
-        <EuiHorizontalRule margin="none" />
         <div
           className={classNames({
             'bottom-container': true,