diff --git a/changelogs/fragments/8140.yml b/changelogs/fragments/8140.yml
new file mode 100644
index 000000000000..10b904e18356
--- /dev/null
+++ b/changelogs/fragments/8140.yml
@@ -0,0 +1,2 @@
+feat:
+- [navigation] Adjust the appearances of the left navigation menu and the landing page ([#8140](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8140))
\ 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 b3a010659c21..dbe7ac3f0d96 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
@@ -22,6 +22,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
       </div>
       <div
         class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPanel--noBorder eui-yScroll flex-1-container"
+        style="padding-top: 0px;"
       >
         <div
           class="euiFlexItem"
@@ -30,7 +31,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
             class="euiSideNav euiSideNav-isOpenMobile"
           >
             <div
-              class="euiSideNav__content euiSideNav__contentMobile-xs euiSideNav__contentMobile-s"
+              class="euiSideNav__content"
               id="euiSideNavContent_generated-id"
             >
               <div
@@ -50,7 +51,8 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                       title="link-in-all"
                     >
                       <div
-                        class="euiText euiText--extraSmall"
+                        class="euiText euiText--small euiTitle euiTitle--xsmall"
+                        style="letter-spacing: 0;"
                       >
                         link-in-all
                       </div>
@@ -59,7 +61,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                 </button>
               </div>
               <div
-                class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
+                class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems nav-link-item-category-item"
               >
                 <div
                   aria-label="Observability"
@@ -73,7 +75,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                       title="Observability"
                     >
                       <div
-                        class="nav-link-item"
+                        class="nav-link-item nav-link-item-category-title"
                       >
                         Observability
                       </div>
@@ -100,7 +102,8 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                           title="link-in-observability"
                         >
                           <div
-                            class="euiText euiText--extraSmall"
+                            class="euiText euiText--small euiTitle euiTitle--xsmall"
+                            style="letter-spacing: 0;"
                           >
                             link-in-observability
                           </div>
@@ -131,7 +134,8 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                               class="euiTextColor euiTextColor--success"
                             >
                               <div
-                                class="euiText euiText--extraSmall"
+                                class="euiText euiText--small euiTitle euiTitle--xsmall"
+                                style="letter-spacing: 0;"
                               >
                                 See all...
                               </div>
@@ -144,7 +148,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                 </div>
               </div>
               <div
-                class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
+                class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems nav-link-item-category-item"
               >
                 <div
                   aria-label="Essentials"
@@ -158,7 +162,7 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                       title="Essentials"
                     >
                       <div
-                        class="nav-link-item"
+                        class="nav-link-item nav-link-item-category-title"
                       >
                         Essentials
                       </div>
@@ -185,7 +189,8 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                           title="link-in-essentials"
                         >
                           <div
-                            class="euiText euiText--extraSmall"
+                            class="euiText euiText--small euiTitle euiTitle--xsmall"
+                            style="letter-spacing: 0;"
                           >
                             link-in-essentials
                           </div>
@@ -216,7 +221,8 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
                               class="euiTextColor euiTextColor--success"
                             >
                               <div
-                                class="euiText euiText--extraSmall"
+                                class="euiText euiText--small euiTitle euiTitle--xsmall"
+                                style="letter-spacing: 0;"
                               >
                                 See all...
                               </div>
@@ -289,6 +295,7 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case by default and
       </div>
       <div
         class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPanel--noBorder eui-yScroll flex-1-container"
+        style="padding-top: 0px;"
       >
         <div
           class="euiFlexItem"
@@ -297,7 +304,7 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case by default and
             class="euiSideNav euiSideNav-isOpenMobile"
           >
             <div
-              class="euiSideNav__content euiSideNav__contentMobile-xs euiSideNav__contentMobile-s"
+              class="euiSideNav__content"
               id="euiSideNavContent_generated-id"
             >
               <div
@@ -317,7 +324,8 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case by default and
                       title="link-in-essentials"
                     >
                       <div
-                        class="euiText euiText--extraSmall"
+                        class="euiText euiText--small euiTitle euiTitle--xsmall"
+                        style="letter-spacing: 0;"
                       >
                         link-in-essentials
                       </div>
@@ -362,6 +370,7 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case when current na
       </div>
       <div
         class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPanel--noBorder eui-yScroll flex-1-container"
+        style="padding-top: 0px;"
       >
         <div
           class="euiFlexItem"
@@ -370,7 +379,7 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case when current na
             class="euiSideNav euiSideNav-isOpenMobile"
           >
             <div
-              class="euiSideNav__content euiSideNav__contentMobile-xs euiSideNav__contentMobile-s"
+              class="euiSideNav__content"
               id="euiSideNavContent_generated-id"
             >
               <div
@@ -390,7 +399,8 @@ exports[`<CollapsibleNavGroupEnabled /> should show all use case when current na
                       title="link-in-essentials"
                     >
                       <div
-                        class="euiText euiText--extraSmall"
+                        class="euiText euiText--small euiTitle euiTitle--xsmall"
+                        style="letter-spacing: 0;"
                       >
                         link-in-essentials
                       </div>
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
index 3d923a49dd80..c428f7f774b8 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
       class="euiSideNav euiSideNav-isOpenMobile"
     >
       <div
-        class="euiSideNav__content euiSideNav__contentMobile-xs euiSideNav__contentMobile-s"
+        class="euiSideNav__content"
         id="euiSideNavContent_generated-id"
       >
         <div
@@ -34,7 +34,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
             >
               <button
                 aria-label="pure link"
-                class="euiSideNavItemButton euiSideNavItemButton-isOpen nav-link-item-btn nav-link-parent-item-button"
+                class="euiSideNavItemButton euiSideNavItemButton-isOpen nav-link-item-btn"
                 data-test-subj="collapsibleNavAppLink-pure"
                 type="button"
               >
@@ -46,7 +46,8 @@ exports[`<NavGroups /> should render correctly 1`] = `
                     title="pure link"
                   >
                     <div
-                      class="euiText euiText--extraSmall"
+                      class="euiText euiText--small euiTitle euiTitle--xsmall"
+                      style="letter-spacing: 0;"
                     >
                       pure link
                     </div>
@@ -76,7 +77,8 @@ exports[`<NavGroups /> should render correctly 1`] = `
                         title="subLink"
                       >
                         <div
-                          class="euiText euiText--extraSmall"
+                          class="euiText euiText--small euiTitle euiTitle--xsmall"
+                          style="letter-spacing: 0;"
                         >
                           subLink
                         </div>
@@ -89,7 +91,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
           </div>
         </div>
         <div
-          class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
+          class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems nav-link-item-category-item"
         >
           <div
             aria-label="category-1"
@@ -103,7 +105,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
                 title="category-1"
               >
                 <div
-                  class="nav-link-item"
+                  class="nav-link-item nav-link-item-category-title"
                 >
                   category-1
                 </div>
@@ -118,7 +120,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
             >
               <button
                 aria-label="link-in-category"
-                class="euiSideNavItemButton euiSideNavItemButton-isOpen nav-link-item-btn nav-link-parent-item-button"
+                class="euiSideNavItemButton euiSideNavItemButton-isOpen nav-link-item-btn"
                 data-test-subj="collapsibleNavAppLink-link-in-category"
                 type="button"
               >
@@ -130,7 +132,8 @@ exports[`<NavGroups /> should render correctly 1`] = `
                     title="link-in-category"
                   >
                     <div
-                      class="euiText euiText--extraSmall"
+                      class="euiText euiText--small euiTitle euiTitle--xsmall"
+                      style="letter-spacing: 0;"
                     >
                       link-in-category
                     </div>
@@ -160,7 +163,8 @@ exports[`<NavGroups /> should render correctly 1`] = `
                         title="sub-link-in-category"
                       >
                         <div
-                          class="euiText euiText--extraSmall"
+                          class="euiText euiText--small euiTitle euiTitle--xsmall"
+                          style="letter-spacing: 0;"
                         >
                           sub-link-in-category
                         </div>
@@ -187,7 +191,8 @@ exports[`<NavGroups /> should render correctly 1`] = `
                     title="link-in-category-2"
                   >
                     <div
-                      class="euiText euiText--extraSmall"
+                      class="euiText euiText--small euiTitle euiTitle--xsmall"
+                      style="letter-spacing: 0;"
                     >
                       link-in-category-2
                     </div>
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 27537d9af8eb..48eab41e7cf1 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
@@ -2,32 +2,29 @@
   border: none !important;
 
   .nav-link-item {
-    padding: calc($euiSize / 4) $euiSize;
-    border-radius: $euiSize;
+    padding: $euiSizeXS $euiSizeS;
+    border-radius: $euiSizeS;
     box-shadow: none;
     margin-bottom: 0;
     margin-top: 0;
 
     .nav-link-item-btn {
       margin-bottom: 0;
-
-      &::after {
-        display: none;
-      }
     }
   }
 
-  .nav-link-parent-item-button {
-    > span {
-      flex-direction: row-reverse;
+  .nav-link-item-category-item {
+    margin-top: $euiSizeL;
 
-      > * {
-        margin-right: $euiSizeS;
-        margin-left: 2px;
-      }
+    > * {
+      margin-bottom: 0;
     }
   }
 
+  .nav-link-item-category-title {
+    padding: 0;
+  }
+
   .nav-link-fake-item {
     margin-top: 0;
   }
@@ -37,15 +34,11 @@
   }
 
   .nav-nested-item {
-    margin-bottom: 4px;
+    padding: $euiSizeS 0;
 
-    &::after {
-      height: unset;
-    }
-
-    .nav-link-item-btn {
-      padding-left: 0;
-      padding-right: 0;
+    // The height is used to comply with the extra padding
+    &:last-of-type::after {
+      height: 50%;
     }
   }
 
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 d08e2a413d42..913a3bf811ab 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
@@ -324,6 +324,7 @@ export function CollapsibleNavGroupEnabled({
             paddingSize={!isNavOpen ? 's' : 'l'}
             hasShadow={false}
             className="eui-yScroll flex-1-container"
+            style={{ paddingTop: 0 }}
           >
             {shouldShowCollapsedNavHeaderContent && collapsibleNavHeaderRender ? (
               <>
@@ -369,17 +370,17 @@ export function CollapsibleNavGroupEnabled({
   return (
     <>
       <EuiHideFor sizes={['xs', 's', 'm']}>{rendeLeftNav()}</EuiHideFor>
-      <EuiShowFor sizes={['xs', 's', 'm']}>
-        {isNavOpen
-          ? rendeLeftNav({
-              type: 'overlay',
-              size: undefined,
-              outsideClickCloses: true,
-              paddingSize: undefined,
-              ownFocus: true,
-            })
-          : null}
-      </EuiShowFor>
+      {isNavOpen ? (
+        <EuiShowFor sizes={['xs', 's', 'm']}>
+          {rendeLeftNav({
+            type: 'overlay',
+            size: undefined,
+            outsideClickCloses: true,
+            paddingSize: undefined,
+            ownFocus: true,
+          })}
+        </EuiShowFor>
+      ) : null}
     </>
   );
 }
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.scss
deleted file mode 100644
index 25f4385775ec..000000000000
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.leftNavTopIcon {
-  color: $euiColorMediumShade;
-}
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
index 3d1535992a3f..7ec738874686 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
@@ -22,7 +22,6 @@ import { ChromeNavGroupServiceStartContract, NavGroupItemInMap } from '../../nav
 import { ChromeNavLink } from '../../nav_links';
 import { ALL_USE_CASE_ID } from '../../../../../core/utils';
 import { fulfillRegistrationLinksToChromeNavLinks } from '../../utils';
-import './collapsible_nav_group_enabled_top.scss';
 
 export interface CollapsibleNavTopProps {
   homeLink?: ChromeNavLink;
@@ -131,8 +130,8 @@ export const CollapsibleNavTop = ({
               <EuiIcon
                 type={icon}
                 size="l"
-                className="leftNavTopIcon"
                 data-test-subj={`collapsibleNavIcon-${icon}`}
+                color={currentWorkspace?.color}
               />
             </EuiButtonEmpty>
           </EuiFlexItem>
@@ -151,7 +150,9 @@ export const CollapsibleNavTop = ({
       {currentNavGroup?.title && (
         <>
           <EuiSpacer />
-          <EuiText>{currentNavGroup?.title}</EuiText>
+          <EuiText size="s">
+            <h3>{currentNavGroup?.title}</h3>
+          </EuiText>
         </>
       )}
     </EuiPanel>
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
index 53a75aeaaddd..603cfce6e299 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
@@ -4,7 +4,7 @@
  */
 
 import './collapsible_nav_group_enabled.scss';
-import { EuiFlexItem, EuiSideNavItemType, EuiSideNav, EuiText } from '@elastic/eui';
+import { EuiFlexItem, EuiSideNavItemType, EuiSideNav, EuiText, EuiTitle } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import React from 'react';
 import classNames from 'classnames';
@@ -58,7 +58,13 @@ export function NavGroups({
 
     return {
       id: `${link.id}-${link.title}`,
-      name: <EuiText size="xs">{link.title}</EuiText>,
+      name: (
+        <EuiTitle size="xs">
+          <EuiText size="s">
+            <h4>{link.title}</h4>
+          </EuiText>
+        </EuiTitle>
+      ),
       onClick: euiListItem.onClick,
       href: euiListItem.href,
       emphasize: euiListItem.isActive,
@@ -103,7 +109,6 @@ export function NavGroups({
         href: undefined,
         onClick: undefined,
         className: classNames(props.className, 'nav-link-parent-item'),
-        buttonClassName: classNames(props.buttonClassName, 'nav-link-parent-item-button'),
         items: navLink.links.map((subNavLink) =>
           createSideNavItem(subNavLink, level + 1, 'nav-nested-item')
         ),
@@ -128,9 +133,16 @@ export function NavGroups({
     if (navLink.itemType === LinkItemType.CATEGORY) {
       return {
         id: navLink.category?.id ?? '',
-        name: <div className="nav-link-item">{navLink.category?.label ?? ''}</div>,
+        name: (
+          <div className="nav-link-item">
+            <h3 className="euiCollapsibleNavGroup__heading nav-link-item-category-title">
+              {navLink.category?.label ?? ''}
+            </h3>
+          </div>
+        ),
         items: navLink.links?.map((link) => createSideNavItem(link, level + 1)),
         'aria-label': navLink.category?.label,
+        className: 'nav-link-item-category-item',
       };
     }
 
@@ -143,7 +155,7 @@ export function NavGroups({
 
   return (
     <EuiFlexItem style={style}>
-      <EuiSideNav items={sideNavItems} isOpenOnMobile />
+      <EuiSideNav items={sideNavItems} isOpenOnMobile mobileBreakpoints={[]} />
       {suffix}
     </EuiFlexItem>
   );
diff --git a/src/plugins/management/public/components/feature_cards/__snapshots__/feature_cards.test.tsx.snap b/src/plugins/management/public/components/feature_cards/__snapshots__/feature_cards.test.tsx.snap
index e5f9a1975d83..1a1c2249537a 100644
--- a/src/plugins/management/public/components/feature_cards/__snapshots__/feature_cards.test.tsx.snap
+++ b/src/plugins/management/public/components/feature_cards/__snapshots__/feature_cards.test.tsx.snap
@@ -11,15 +11,15 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
         class="euiSpacer euiSpacer--m"
       />
       <div
-        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-        data-test-subj="landingPageRow_0"
+        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
       >
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_1"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -29,29 +29,23 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title1
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title1
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_2"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -61,29 +55,23 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title2
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title2
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_3"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -93,29 +81,23 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title3
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title3
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_4"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -125,34 +107,23 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title4
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title4
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-        data-test-subj="landingPageRow_1"
-      >
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_5"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -162,32 +133,16 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title5
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title5
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>
-        <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
-        />
-        <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
-        />
-        <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
-        />
       </div>
       <div
         class="euiSpacer euiSpacer--l"
@@ -203,15 +158,15 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
         class="euiSpacer euiSpacer--m"
       />
       <div
-        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-        data-test-subj="landingPageRow_0"
+        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
       >
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_category-1"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -221,29 +176,23 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title1
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title1
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_category-2"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -253,29 +202,23 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title2
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title2
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_category-3"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -285,29 +228,23 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title3
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title3
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_category-4"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -317,34 +254,23 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title4
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title4
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-        data-test-subj="landingPageRow_1"
-      >
         <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
             data-test-subj="landingPageFeature_category-5"
+            style="max-width: 240px;"
           >
             <div
               class="euiCard__content"
@@ -354,32 +280,16 @@ exports[`<FeatureCards /> render with complex navLinks 1`] = `
                 id="generated-idTitle"
               >
                 <button
-                  aria-describedby=" generated-idDescription"
+                  aria-describedby=" "
                   class="euiCard__titleButton"
                 >
                   title5
                 </button>
               </span>
-              <div
-                class="euiText euiText--small euiCard__description"
-                id="generated-idDescription"
-              >
-                <p>
-                  title5
-                </p>
-              </div>
+              
             </div>
           </div>
         </div>
-        <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
-        />
-        <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
-        />
-        <div
-          class="euiFlexItem euiFlexItem--flexGrow1"
-        />
       </div>
       <div
         class="euiSpacer euiSpacer--l"
diff --git a/src/plugins/management/public/components/feature_cards/feature_cards.test.tsx b/src/plugins/management/public/components/feature_cards/feature_cards.test.tsx
index 95d1ba5a64f3..108db8c98861 100644
--- a/src/plugins/management/public/components/feature_cards/feature_cards.test.tsx
+++ b/src/plugins/management/public/components/feature_cards/feature_cards.test.tsx
@@ -103,7 +103,7 @@ describe('<FeatureCards />', () => {
   });
 
   it('render with complex navLinks', () => {
-    const { container, getAllByTestId } = render(
+    const { container } = render(
       <FeatureCards
         pageDescription=""
         navLinks={navLinks}
@@ -113,7 +113,6 @@ describe('<FeatureCards />', () => {
       />
     );
     expect(container).toMatchSnapshot();
-    expect(getAllByTestId('landingPageRow_1').length).toEqual(2);
   });
 
   it('click item', () => {
diff --git a/src/plugins/management/public/components/feature_cards/feature_cards.tsx b/src/plugins/management/public/components/feature_cards/feature_cards.tsx
index d308f185d602..4c28ea9036d4 100644
--- a/src/plugins/management/public/components/feature_cards/feature_cards.tsx
+++ b/src/plugins/management/public/components/feature_cards/feature_cards.tsx
@@ -30,26 +30,20 @@ export const FeatureCards = ({
   pageDescription,
   navigationUI: { HeaderControl },
 }: FeatureCardsProps) => {
-  const itemsPerRow = 4;
   const groupedCardForDisplay = useMemo(() => {
-    const grouped: Array<{ category?: AppCategory; navLinks: ChromeNavLink[][] }> = [];
+    const grouped: Array<{ category?: AppCategory; navLinks: ChromeNavLink[] }> = [];
     // The navLinks has already been sorted based on link / category's order,
     // so it is safe to group the links here.
     navLinks.forEach((link) => {
       let lastGroup = grouped.length ? grouped[grouped.length - 1] : undefined;
       if (!lastGroup || lastGroup.category?.id !== link.category?.id) {
-        lastGroup = { category: link.category, navLinks: [[]] };
+        lastGroup = { category: link.category, navLinks: [] };
         grouped.push(lastGroup);
       }
-      const lastRow = lastGroup.navLinks[lastGroup.navLinks.length - 1];
-      if (lastRow.length < itemsPerRow) {
-        lastRow.push(link);
-      } else {
-        lastGroup.navLinks.push([link]);
-      }
+      lastGroup.navLinks.push(link);
     });
     return grouped;
-  }, [itemsPerRow, navLinks]);
+  }, [navLinks]);
   if (!navLinks.length) {
     return null;
   }
@@ -72,30 +66,23 @@ export const FeatureCards = ({
               </EuiTitle>
             )}
             <EuiSpacer size="m" />
-            {group.navLinks.map((row, rowIndex) => {
-              return (
-                <EuiFlexGroup data-test-subj={`landingPageRow_${rowIndex}`} key={rowIndex}>
-                  {Array.from({ length: itemsPerRow }).map((item, itemIndexInRow) => {
-                    const link = row[itemIndexInRow];
-                    const content = link ? (
-                      <EuiCard
-                        data-test-subj={`landingPageFeature_${link.id}`}
-                        textAlign="left"
-                        title={link.title}
-                        description={link.description || link.title}
-                        onClick={() => navigateToApp(link.id)}
-                        titleSize="xs"
-                      />
-                    ) : null;
-                    return (
-                      <EuiFlexItem key={link?.id || itemIndexInRow} grow={1}>
-                        {content}
-                      </EuiFlexItem>
-                    );
-                  })}
-                </EuiFlexGroup>
-              );
-            })}
+            <EuiFlexGroup wrap>
+              {group.navLinks.map((link, index) => {
+                return (
+                  <EuiFlexItem key={link?.id || index} grow={false}>
+                    <EuiCard
+                      data-test-subj={`landingPageFeature_${link.id}`}
+                      textAlign="left"
+                      title={link.title}
+                      description={link.description || ''}
+                      onClick={() => navigateToApp(link.id)}
+                      titleSize="xs"
+                      style={{ maxWidth: 240 }}
+                    />
+                  </EuiFlexItem>
+                );
+              })}
+            </EuiFlexGroup>
             <EuiSpacer />
           </div>
         ))}