diff --git a/app/assets/javascripts/super_sidebar/components/help_center.vue b/app/assets/javascripts/super_sidebar/components/help_center.vue
index 61919a7bdd0ba890592e8d7220063e445d26b303..1a2ddefbc000020dfbfae447b2aa80724f352ca5 100644
--- a/app/assets/javascripts/super_sidebar/components/help_center.vue
+++ b/app/assets/javascripts/super_sidebar/components/help_center.vue
@@ -236,7 +236,7 @@ export default {
   <div class="gl-flex gl-flex-col gl-gap-2">
     <gl-button
       v-if="showWhatsNewNotification"
-      class="super-sidebar-nav-item gl-w-full !gl-justify-start gl-gap-3 !gl-pr-3"
+      class="super-sidebar-nav-item gl-w-full !gl-justify-start gl-gap-3 !gl-px-[0.375rem]"
       category="tertiary"
       icon="compass"
       data-testid="sidebar-whatsnew-button"
@@ -252,7 +252,12 @@ export default {
     >
       {{ $options.i18n.whatsnew }}
 
-      <gl-badge variant="neutral" aria-hidden="true" data-testid="notification-count">
+      <gl-badge
+        variant="neutral"
+        aria-hidden="true"
+        data-testid="notification-count"
+        class="gl-mr-1"
+      >
         <span class="gl-m-1 gl-min-w-3">
           {{ whatsNewMostRecentReleaseUnreadCount }}
         </span>
@@ -262,6 +267,7 @@ export default {
     <gl-disclosure-dropdown
       class="super-sidebar-help-center-dropdown"
       :dropdown-offset="$options.dropdownOffset"
+      block
       @shown="trackDropdownToggle(true)"
       @hidden="trackDropdownToggle(false)"
     >
@@ -269,7 +275,7 @@ export default {
         <gl-button
           category="tertiary"
           icon="question-o"
-          class="super-sidebar-help-center-toggle !gl-justify-start gl-gap-3 !gl-py-2 gl-font-semibold"
+          class="super-sidebar-help-center-toggle super-sidebar-nav-item gl-w-full !gl-justify-start gl-gap-3 !gl-px-[0.375rem] !gl-py-2 gl-font-semibold"
           :button-text-classes="{ '!gl-text-default': !isIconOnly, 'gl-hidden': isIconOnly }"
           data-testid="sidebar-help-button"
         >
diff --git a/app/assets/javascripts/super_sidebar/components/icon_only_toggle.vue b/app/assets/javascripts/super_sidebar/components/icon_only_toggle.vue
index 43bc28c608efde40190b759c03967f91e7995e37..4fbb3e8dfd916b633046f75cbc973fad9c302205 100644
--- a/app/assets/javascripts/super_sidebar/components/icon_only_toggle.vue
+++ b/app/assets/javascripts/super_sidebar/components/icon_only_toggle.vue
@@ -35,11 +35,15 @@ export default {
   >
     <gl-button
       v-gl-tooltip.right="isIconOnly ? text : ''"
-      :class="['gl-mx-2 gl-my-2 !gl-justify-start gl-font-semibold', { 'gl-gap-3': !isIconOnly }]"
+      :class="[
+        'super-sidebar-nav-item !gl-mx-3 !-gl-mt-2 !gl-mb-2 !gl-justify-start !gl-px-[0.375rem] !gl-py-2 gl-font-semibold',
+        { 'gl-gap-3': !isIconOnly },
+      ]"
+      :button-text-classes="isIconOnly ? 'gl-hidden' : null"
       :icon="icon"
       category="tertiary"
       @click="emitToggle"
-      >{{ isIconOnly ? '' : text }}</gl-button
+      >{{ text }}</gl-button
     >
   </local-storage-sync>
 </template>
diff --git a/app/assets/javascripts/super_sidebar/components/menu_section.vue b/app/assets/javascripts/super_sidebar/components/menu_section.vue
index eb0a0e4c28eb3c2dc99018692d151e1621715cf4..97b157a5c909f31161dc3cd2f2b3425523842ff5 100644
--- a/app/assets/javascripts/super_sidebar/components/menu_section.vue
+++ b/app/assets/javascripts/super_sidebar/components/menu_section.vue
@@ -141,7 +141,7 @@ export default {
     <button
       :id="`menu-section-button-${itemId}`"
       v-outside="handleClickOutside"
-      class="super-sidebar-nav-item gl-relative gl-flex gl-w-full gl-appearance-none gl-items-center gl-gap-3 gl-rounded-base gl-border-0 gl-bg-transparent gl-px-3 gl-py-2 gl-text-left gl-font-semibold !gl-text-default !gl-no-underline focus:gl-focus"
+      class="super-sidebar-nav-item gl-relative gl-flex gl-w-full gl-appearance-none gl-items-center gl-gap-3 gl-rounded-base gl-border-0 gl-bg-transparent gl-p-2 gl-text-left gl-font-semibold !gl-text-default !gl-no-underline focus:gl-focus"
       :class="computedLinkClasses"
       data-testid="menu-section-button"
       :data-qa-section-name="item.title"
@@ -150,12 +150,6 @@ export default {
       @pointerover="handlePointerover"
       @pointerleave="handlePointerleave"
     >
-      <span
-        :class="[isActive ? 'active-indicator gl-bg-blue-500' : 'gl-bg-transparent']"
-        class="gl-absolute gl-bottom-2 gl-left-2 gl-top-2 gl-transition-all gl-duration-slow"
-        aria-hidden="true"
-        style="width: 3px; border-radius: 3px; margin-right: 1px"
-      ></span>
       <span class="gl-flex gl-h-6 gl-w-6 gl-shrink-0">
         <slot name="icon">
           <gl-icon
@@ -170,7 +164,7 @@ export default {
         {{ item.title }}
       </span>
 
-      <span v-if="!isIconOnly" class="gl-mr-1 gl-text-right gl-text-subtle">
+      <span v-if="!isIconOnly" class="gl-mr-2 gl-text-right gl-text-subtle">
         <gl-animated-chevron-right-down-icon :is-on="showExpanded" />
       </span>
     </button>
diff --git a/app/assets/javascripts/super_sidebar/components/nav_item.vue b/app/assets/javascripts/super_sidebar/components/nav_item.vue
index 5bde4038378903524d53d5f4b4cf3d5b42420570..7026776fa6fde12a8390789cb9c498a2c05e2aae 100644
--- a/app/assets/javascripts/super_sidebar/components/nav_item.vue
+++ b/app/assets/javascripts/super_sidebar/components/nav_item.vue
@@ -149,7 +149,7 @@ export default {
     computedLinkClasses() {
       return {
         'gl-px-2 gl-mx-2 gl-leading-normal': this.isSubitem,
-        'gl-px-3': !this.isSubitem,
+        'gl-px-2': !this.isSubitem,
         '!gl-pl-5 gl-rounded-small': this.isFlyout,
         'gl-rounded-base': !this.isFlyout,
         [this.item.link_classes]: this.item.link_classes,
@@ -178,22 +178,6 @@ export default {
         title: this.item.title,
       });
     },
-    activeIndicatorStyle() {
-      const style = {
-        width: '3px',
-        borderRadius: '3px',
-        marginRight: '1px',
-      };
-
-      // The active indicator is too close to the avatar for items with one, so shift
-      // it left by 1px.
-      //
-      // The indicator is absolutely positioned using rem units. This tweak for this
-      // edge case is in pixel units, so that it does not scale with root font size.
-      if (this.hasAvatar) style.transform = 'translateX(-1px)';
-
-      return style;
-    },
   },
   mounted() {
     if (this.item.is_active) {
@@ -238,7 +222,6 @@ export default {
   >
     <component
       :is="navItemLinkComponent"
-      #default="{ isActive }"
       v-bind="linkProps"
       class="super-sidebar-nav-item show-on-focus-or-hover--control hide-on-focus-or-hover--control gl-relative gl-mb-1 gl-flex gl-items-center gl-gap-3 gl-py-2 gl-font-semibold gl-text-default !gl-no-underline focus:gl-focus"
       :class="computedLinkClasses"
@@ -246,18 +229,10 @@ export default {
       :aria-label="item.title"
       @nav-link-click="$emit('nav-link-click')"
     >
-      <div
-        v-if="!isFlyout"
-        :class="[isActive ? 'gl-opacity-10' : 'gl-opacity-0']"
-        class="active-indicator gl-absolute gl-bottom-2 gl-left-2 gl-top-2 gl-transition-all gl-duration-slow"
-        aria-hidden="true"
-        :style="activeIndicatorStyle"
-        data-testid="active-indicator"
-      ></div>
       <div
         v-if="!isFlyout"
         class="gl-flex gl-h-6 gl-w-6 gl-shrink-0"
-        :class="{ 'gl-self-start': hasAvatar }"
+        :class="{ 'gl-w-6 gl-self-start': hasAvatar, '-gl-mr-2': hasAvatar && isIconOnly }"
       >
         <slot name="icon">
           <gl-icon
@@ -300,6 +275,7 @@ export default {
         <gl-badge
           v-if="hasPill"
           variant="neutral"
+          class="gl-mr-1"
           :class="{
             'hide-on-focus-or-hover--target transition-opacity-on-hover--target': isPinnable,
           }"
diff --git a/app/assets/javascripts/super_sidebar/components/scroll_scrim.vue b/app/assets/javascripts/super_sidebar/components/scroll_scrim.vue
index db45edd4f5e1df8eddc5077c062831d5a3b928cc..723314ebd029e537b2b08c00bda02b2a564dabcc 100644
--- a/app/assets/javascripts/super_sidebar/components/scroll_scrim.vue
+++ b/app/assets/javascripts/super_sidebar/components/scroll_scrim.vue
@@ -56,7 +56,10 @@ export default {
 </script>
 
 <template>
-  <div class="gl-scroll-scrim gl-overflow-auto" :class="scrimClasses">
+  <div
+    class="super-sidebar-inner-scrollbar gl-scroll-scrim gl-overflow-y-auto gl-overflow-x-hidden"
+    :class="scrimClasses"
+  >
     <div class="top-scrim-wrapper">
       <div class="top-scrim"></div>
     </div>
diff --git a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
index de134e0a64d27e5feb2d437ca47f3cbeb7662611..9362c5e74267a15198591113eb89262f056a5b21 100644
--- a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
+++ b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
@@ -287,7 +287,7 @@ export default {
           v-if="canIconOnly"
           ref="helpCenter"
           :sidebar-data="sidebarData"
-          class="gl-p-2"
+          class="gl-p-3"
         />
         <div v-else class="gl-p-2">
           <div class="gl-flex gl-flex-col gl-justify-end">
diff --git a/app/assets/javascripts/super_sidebar/components/super_topbar.vue b/app/assets/javascripts/super_sidebar/components/super_topbar.vue
index 79ddcc921d35bfb3533b1b57e207d8456b20e4d3..cf8c558366dee9ee0b46d995b694dd4e66960cd9 100644
--- a/app/assets/javascripts/super_sidebar/components/super_topbar.vue
+++ b/app/assets/javascripts/super_sidebar/components/super_topbar.vue
@@ -66,7 +66,7 @@ export default {
     class="super-topbar gl-grid gl-w-full gl-grid-cols-[1fr_auto_1fr] gl-items-center gl-gap-4"
   >
     <div class="gl-contents gl-items-center gl-gap-5 md:gl-flex">
-      <div class="gl-flex gl-items-center gl-gap-2">
+      <div class="gl-flex gl-items-center gl-gap-3">
         <brand-logo :logo-url="sidebarData.logo_url" class="!gl-p-0" />
 
         <gl-badge
diff --git a/app/assets/stylesheets/framework/application-chrome.scss b/app/assets/stylesheets/framework/application-chrome.scss
index dc5eafdaac481a3ec505e4d2467a4a553c232a77..1b34874187f5640292e50fd34f7278cdd817e31b 100644
--- a/app/assets/stylesheets/framework/application-chrome.scss
+++ b/app/assets/stylesheets/framework/application-chrome.scss
@@ -32,7 +32,7 @@
 
   // Super topbar
   .super-topbar {
-    @apply gl-fixed gl-w-screen gl-left-0 gl-py-0 gl-pl-5 gl-pr-5 sm:gl-pr-3;
+    @apply gl-fixed gl-w-screen gl-left-0 gl-py-0 gl-pl-4 gl-pr-5 sm:gl-pr-3;
     top: $calc-system-headers-height;
     height: var(--header-height);
     z-index: calc($super-sidebar-z-index + 1);
@@ -70,11 +70,6 @@
   // Super sidebar active item
   .super-sidebar-nav-item {
     @apply gl-rounded-lg #{!important};
-
-    // Hide indicator
-    .active-indicator {
-      display: none;
-    }
   }
 
   // Search button
@@ -190,6 +185,12 @@
     }
   }
 
+  // Super sidebar scollbar.
+  .super-sidebar-inner-scrollbar {
+    scrollbar-color: var(--gl-color-neutral-400) transparent;
+    scrollbar-width: thin;
+  }
+
   // Panels container
   .panels-container {
     @apply gl-relative gl-grow gl-flex gl-pr-0 gl-pb-0;
@@ -200,7 +201,7 @@
       height: calc(100% - #{$header-height} - #{$gl-spacing-scale-3});
 
       @apply gl-overflow-y-auto gl-overflow-x-hidden;
-      scrollbar-color: var(--gl-color-neutral-400) var(--gl-background-color-default);
+      scrollbar-color: var(--gl-color-neutral-400) transparent;
       scrollbar-width: thin;
 
       .container-fluid {
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index b34126c14cab803c47eeec66d7052ed0916ec9cb..dfc29a4d60ce7011c3e3f18514b8b51b5b7454e5 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -347,6 +347,10 @@ $command-palette-spacing: px-to-rem(14px);
       background-color: var(--super-sidebar-nav-item-hover-bg);
     }
 
+    &:has(.gl-button-text.gl-hidden) .gl-button-icon {
+      @apply gl-mr-0 #{!important};
+    }
+
     .badge {
       font-size: 10px;
       @apply gl-font-semibold;
@@ -392,10 +396,6 @@ $command-palette-spacing: px-to-rem(14px);
     mix-blend-mode: var(--super-sidebar-hr-mix-blend-mode);
   }
 
-  .active-indicator {
-    background-color: var(--super-sidebar-accent-color-fg);
-  }
-
   .super-sidebar-help-center-toggle[aria-expanded='true'] {
     background-color: $gray-50 !important;
   }
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/router/dom_utils.js b/ee/app/assets/javascripts/ai/duo_agents_platform/router/dom_utils.js
index 3a6fcbec0c2c68979d0bccf187e6b2118ab2cb2a..e2fab13945f251f70eb7ce4c8bdbfa763df9b0f3 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/router/dom_utils.js
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/router/dom_utils.js
@@ -7,28 +7,18 @@ export const updateActiveNavigation = (href) => {
   }
 
   const activeClass = 'super-sidebar-nav-item-current';
-  const activeIndicatorClass = 'active-indicator';
 
   const currentActiveNavItems = el.querySelectorAll(`.${activeClass}`);
-  const currentActiveIndicators = el.querySelectorAll(`.${activeIndicatorClass}`);
 
   if (currentActiveNavItems.length) {
     currentActiveNavItems.forEach((foundEl) => foundEl.classList.remove(activeClass));
   }
 
-  if (currentActiveIndicators.length) {
-    currentActiveIndicators.forEach((foundEl) => foundEl.classList.add('gl-hidden'));
-  }
-
   const newActiveNavItems = el.querySelectorAll(`[href*="${href}"]`);
 
   if (newActiveNavItems) {
     newActiveNavItems.forEach((foundEl) => {
       foundEl.classList.add(activeClass);
-      const newIndicator = foundEl.querySelector(`.${activeIndicatorClass}`);
-      if (newIndicator) {
-        newIndicator.classList.remove('gl-hidden');
-      }
     });
   }
 };
diff --git a/ee/spec/frontend/ai/duo_agents_platform/router/dom_utils_spec.js b/ee/spec/frontend/ai/duo_agents_platform/router/dom_utils_spec.js
index c0560d7ca497f40eab715897fcc9bc7a64b63418..fe38cf0fb24468ecece20311af692b3b922df225 100644
--- a/ee/spec/frontend/ai/duo_agents_platform/router/dom_utils_spec.js
+++ b/ee/spec/frontend/ai/duo_agents_platform/router/dom_utils_spec.js
@@ -3,7 +3,6 @@ import { updateActiveNavigation } from 'ee/ai/duo_agents_platform/router/dom_uti
 // Test constants
 const CSS_CLASSES = {
   activeClass: 'super-sidebar-nav-item-current',
-  activeIndicatorClass: 'active-indicator',
   hiddenClass: 'gl-hidden',
 };
 
@@ -22,11 +21,6 @@ const createMockElement = (methods = {}) => ({
   ...methods,
 });
 
-const createMockNavItem = (indicator = null) => ({
-  ...createMockElement(),
-  querySelector: jest.fn().mockReturnValue(indicator),
-});
-
 const createMockSuperSidebar = (queryResults = {}) => ({
   querySelectorAll: jest.fn().mockImplementation((selector) => {
     return queryResults[selector] || [];
@@ -38,11 +32,10 @@ describe('updateActiveNavigation', () => {
   let mockElements;
 
   const setupMockSuperSidebar = (config = {}) => {
-    const { activeNavItems = [], activeIndicators = [], newNavItems = [] } = config;
+    const { activeNavItems = [], newNavItems = [] } = config;
 
     const queryResults = {
       [`.${CSS_CLASSES.activeClass}`]: activeNavItems,
-      [`.${CSS_CLASSES.activeIndicatorClass}`]: activeIndicators,
     };
 
     // Add dynamic href-based queries
@@ -72,14 +65,9 @@ describe('updateActiveNavigation', () => {
     // Create reusable mock elements
     mockElements = {
       activeNavItems: [createMockElement(), createMockElement()],
-      activeIndicators: [createMockElement(), createMockElement()],
-      newIndicators: [createMockElement(), createMockElement()],
     };
 
-    mockElements.newNavItems = [
-      createMockNavItem(mockElements.newIndicators[0]),
-      createMockNavItem(mockElements.newIndicators[1]),
-    ];
+    mockElements.newNavItems = [createMockElement()];
 
     mockSuperSidebar = createMockSuperSidebar();
     setupDocumentMock();
@@ -93,7 +81,6 @@ describe('updateActiveNavigation', () => {
     beforeEach(() => {
       setupMockSuperSidebar({
         activeNavItems: mockElements.activeNavItems,
-        activeIndicators: mockElements.activeIndicators,
         newNavItems: mockElements.newNavItems,
       });
     });
@@ -106,14 +93,6 @@ describe('updateActiveNavigation', () => {
       });
     });
 
-    it('hides current active indicators', () => {
-      updateActiveNavigation('/test-href');
-
-      mockElements.activeIndicators.forEach((indicator) => {
-        expect(indicator.classList.add).toHaveBeenCalledWith(CSS_CLASSES.hiddenClass);
-      });
-    });
-
     it('adds active class to new nav items matching href', () => {
       updateActiveNavigation('/test-href');
 
@@ -123,17 +102,6 @@ describe('updateActiveNavigation', () => {
       });
     });
 
-    it('shows indicators for new active nav items', () => {
-      updateActiveNavigation('/test-href');
-
-      mockElements.newNavItems.forEach((item, index) => {
-        expect(item.querySelector).toHaveBeenCalledWith(`.${CSS_CLASSES.activeIndicatorClass}`);
-        expect(mockElements.newIndicators[index].classList.remove).toHaveBeenCalledWith(
-          CSS_CLASSES.hiddenClass,
-        );
-      });
-    });
-
     it('handles href with special characters', () => {
       const specialHref = '/agents/test-agent-123';
       updateActiveNavigation(specialHref);
@@ -145,7 +113,6 @@ describe('updateActiveNavigation', () => {
       beforeEach(() => {
         setupMockSuperSidebar({
           activeNavItems: [],
-          activeIndicators: [],
           newNavItems: [mockElements.newNavItems[0]],
         });
       });
@@ -167,42 +134,20 @@ describe('updateActiveNavigation', () => {
       });
     });
 
-    describe('when no current active indicators exist', () => {
-      beforeEach(() => {
-        setupMockSuperSidebar({
-          activeNavItems: [mockElements.activeNavItems[0]],
-          activeIndicators: [],
-          newNavItems: [mockElements.newNavItems[0]],
-        });
-      });
-
-      it('does not attempt to hide non-existent indicators', () => {
-        updateActiveNavigation('/test-href');
-
-        mockElements.activeIndicators.forEach((indicator) => {
-          expect(indicator.classList.add).not.toHaveBeenCalled();
-        });
-      });
-    });
-
     describe('when no new nav items match the href', () => {
       beforeEach(() => {
         setupMockSuperSidebar({
           activeNavItems: [mockElements.activeNavItems[0]],
-          activeIndicators: [mockElements.activeIndicators[0]],
           newNavItems: [],
         });
       });
 
-      it('still removes current active classes and hides indicators', () => {
+      it('still removes current active classes', () => {
         updateActiveNavigation('/non-matching-href');
 
         expect(mockElements.activeNavItems[0].classList.remove).toHaveBeenCalledWith(
           CSS_CLASSES.activeClass,
         );
-        expect(mockElements.activeIndicators[0].classList.add).toHaveBeenCalledWith(
-          CSS_CLASSES.hiddenClass,
-        );
       });
 
       it('does not attempt to add classes to non-existent new nav items', () => {
@@ -214,17 +159,16 @@ describe('updateActiveNavigation', () => {
       });
     });
 
-    describe('when new nav items exist but have no indicators', () => {
+    describe('when new nav items exist', () => {
       beforeEach(() => {
-        const navItemWithoutIndicator = createMockNavItem(null);
+        const navItems = createMockElement();
         setupMockSuperSidebar({
           activeNavItems: [],
-          activeIndicators: [],
-          newNavItems: [navItemWithoutIndicator],
+          newNavItems: [navItems],
         });
       });
 
-      it('adds active class to nav items but does not attempt to show indicators', () => {
+      it('adds active class to nav items', () => {
         expect(() => updateActiveNavigation('/test-href')).not.toThrow();
       });
     });
diff --git a/spec/frontend/super_sidebar/components/icon_only_toggle_spec.js b/spec/frontend/super_sidebar/components/icon_only_toggle_spec.js
index 4f2e3b6d1713e79baa0ccacc962b27f81723389b..9a2f4bb8aacdc25ad565a583a2c4ac36540fc2e2 100644
--- a/spec/frontend/super_sidebar/components/icon_only_toggle_spec.js
+++ b/spec/frontend/super_sidebar/components/icon_only_toggle_spec.js
@@ -48,7 +48,8 @@ describe('IconOnlyToggle', () => {
     });
 
     it('does not display text content', () => {
-      expect(findButton().text()).toBe('');
+      expect(findButton().text()).toBe('Expand sidebar');
+      expect(findButton().props('buttonTextClasses')).toBe('gl-hidden');
     });
 
     it('shows tooltip with expand text', () => {
diff --git a/spec/frontend/super_sidebar/components/nav_item_spec.js b/spec/frontend/super_sidebar/components/nav_item_spec.js
index 40580f0fbad70848e5fe4a2dee60874438dc36ed..449bd31bb4cdc2591e10ef373cb7d01c4f88ae69 100644
--- a/spec/frontend/super_sidebar/components/nav_item_spec.js
+++ b/spec/frontend/super_sidebar/components/nav_item_spec.js
@@ -3,9 +3,9 @@ import { GlBadge, GlButton, GlAvatar } from '@gitlab/ui';
 import { RouterLinkStub } from '@vue/test-utils';
 import { mountExtended, extendedWrapper } from 'helpers/vue_test_utils_helper';
 import NavItem from '~/super_sidebar/components/nav_item.vue';
-import NavItemRouterLink from '~/super_sidebar/components/nav_item_router_link.vue';
 import NavItemLink from '~/super_sidebar/components/nav_item_link.vue';
 import {
+  NAV_ITEM_LINK_ACTIVE_CLASS,
   CLICK_MENU_ITEM_ACTION,
   TRACKING_UNKNOWN_ID,
   TRACKING_UNKNOWN_PANEL,
@@ -19,7 +19,6 @@ describe('NavItem component', () => {
   const findLink = () => wrapper.findByTestId('nav-item-link');
   const findPill = () => wrapper.findComponent(GlBadge);
   const findPinButton = () => wrapper.findComponent(GlButton);
-  const findNavItemRouterLink = () => extendedWrapper(wrapper.findComponent(NavItemRouterLink));
   const findNavItemLink = () => extendedWrapper(wrapper.findComponent(NavItemLink));
 
   const createWrapper = ({ item, props = {}, provide = {}, routerLinkSlotProps = {} }) => {
@@ -298,49 +297,20 @@ describe('NavItem component', () => {
     );
   });
 
-  describe('when `item` prop has `to` attribute', () => {
-    describe('when `RouterLink` is not active', () => {
-      it('renders `NavItemRouterLink` with active indicator hidden', () => {
-        createWrapper({ item: { title: 'Foo', to: { name: 'foo' } } });
-
-        expect(findNavItemRouterLink().findByTestId('active-indicator').classes()).toContain(
-          'gl-opacity-0',
-        );
-      });
-    });
-
-    describe('when `RouterLink` is active', () => {
-      it('renders `NavItemRouterLink` with active indicator shown', () => {
-        createWrapper({
-          item: { title: 'Foo', to: { name: 'foo' } },
-          routerLinkSlotProps: { isActive: true },
-        });
-
-        expect(findNavItemRouterLink().findByTestId('active-indicator').classes()).toContain(
-          'gl-opacity-10',
-        );
-      });
-    });
-  });
-
   describe('when `item` prop has `link` attribute', () => {
     describe('when `item` has `is_active` set to `false`', () => {
-      it('renders `NavItemLink` with active indicator hidden', () => {
+      it('renders `NavItemLink` with no active class', () => {
         createWrapper({ item: { title: 'Foo', link: '/foo', is_active: false } });
 
-        expect(findNavItemLink().findByTestId('active-indicator').classes()).toContain(
-          'gl-opacity-0',
-        );
+        expect(findNavItemLink().classes()).not.toContain(NAV_ITEM_LINK_ACTIVE_CLASS);
       });
     });
 
     describe('when `item` has `is_active` set to `true`', () => {
-      it('renders `NavItemLink` with active indicator shown', () => {
+      it('renders `NavItemLink` with active class', () => {
         createWrapper({ item: { title: 'Foo', link: '/foo', is_active: true } });
 
-        expect(findNavItemLink().findByTestId('active-indicator').classes()).toContain(
-          'gl-opacity-10',
-        );
+        expect(findNavItemLink().classes()).toContain(NAV_ITEM_LINK_ACTIVE_CLASS);
       });
     });
   });