diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
index d6fcdeb9e139306347429b3a1564882aba1b4907..7b169b68d2070349554460a8458d792e6e8d1d38 100644
--- a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
@@ -1,5 +1,6 @@
 <script>
 /* eslint-disable vue/require-default-prop, vue/no-v-html */
+import { GlButton } from '@gitlab/ui';
 import highlight from '~/lib/utils/highlight';
 import { truncateNamespace } from '~/lib/utils/text_utility';
 import { mapVuexModuleState } from '~/lib/utils/vuex_module_mappers';
@@ -11,6 +12,7 @@ const trackingMixin = Tracking.mixin();
 export default {
   components: {
     Identicon,
+    GlButton,
   },
   mixins: [trackingMixin],
   inject: ['vuexModule'],
@@ -56,9 +58,10 @@ export default {
 
 <template>
   <li class="frequent-items-list-item-container">
-    <a
+    <gl-button
+      category="tertiary"
       :href="webUrl"
-      class="clearfix dropdown-item"
+      class="gl-text-left gl-justify-content-start!"
       @click="track('click_link', { label: `${dropdownType}_dropdown_frequent_items_list_item` })"
     >
       <div
@@ -90,6 +93,6 @@ export default {
           {{ truncatedNamespace }}
         </div>
       </div>
-    </a>
+    </gl-button>
   </li>
 </template>
diff --git a/app/assets/javascripts/nav/components/top_nav_menu_item.vue b/app/assets/javascripts/nav/components/top_nav_menu_item.vue
index 08b2fbf2ed1ca6ed8173ae3979462d1447ba0f4f..07c6fa7773af45cc0221870cab02078c8d7bfc4e 100644
--- a/app/assets/javascripts/nav/components/top_nav_menu_item.vue
+++ b/app/assets/javascripts/nav/components/top_nav_menu_item.vue
@@ -42,7 +42,7 @@ export default {
     v-on="$listeners"
   >
     <span class="gl-display-flex">
-      <gl-icon v-if="menuItem.icon" :name="menuItem.icon" :class="{ 'gl-mr-2!': !iconOnly }" />
+      <gl-icon v-if="menuItem.icon" :name="menuItem.icon" :class="{ 'gl-mr-3!': !iconOnly }" />
       <template v-if="!iconOnly">
         {{ menuItem.title }}
         <gl-icon v-if="menuItem.view" name="chevron-right" class="gl-ml-auto" />
diff --git a/app/assets/javascripts/nav/components/top_nav_menu_sections.vue b/app/assets/javascripts/nav/components/top_nav_menu_sections.vue
index 442af512350a2b4f23a18758ebe56d24047973fd..b8555df53df10d66aa164902a51e70bed668a300 100644
--- a/app/assets/javascripts/nav/components/top_nav_menu_sections.vue
+++ b/app/assets/javascripts/nav/components/top_nav_menu_sections.vue
@@ -1,7 +1,7 @@
 <script>
 import TopNavMenuItem from './top_nav_menu_item.vue';
 
-const BORDER_CLASSES = 'gl-pt-3 gl-border-1 gl-border-t-solid gl-border-gray-100';
+const BORDER_CLASSES = 'gl-pt-3 gl-border-1 gl-border-t-solid gl-border-gray-50';
 
 export default {
   components: {
diff --git a/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js b/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js
index 9a68115e4f6940c47c0888df9dbd38cd8a5731c5..a6aa1ece0328fab0d6098405f11db6c0b5398d86 100644
--- a/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js
+++ b/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js
@@ -1,3 +1,4 @@
+import { GlButton } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import { trimText } from 'helpers/text_helper';
@@ -18,7 +19,7 @@ describe('FrequentItemsListItemComponent', () => {
   const findAvatar = () => wrapper.find({ ref: 'frequentItemsItemAvatar' });
   const findAllTitles = () => wrapper.findAll({ ref: 'frequentItemsItemTitle' });
   const findNamespace = () => wrapper.find({ ref: 'frequentItemsItemNamespace' });
-  const findAllAnchors = () => wrapper.findAll('a');
+  const findAllButtons = () => wrapper.findAllComponents(GlButton);
   const findAllNamespace = () => wrapper.findAll({ ref: 'frequentItemsItemNamespace' });
   const findAvatarContainer = () => wrapper.findAll({ ref: 'frequentItemsItemAvatarContainer' });
   const findAllMetadataContainers = () =>
@@ -109,7 +110,7 @@ describe('FrequentItemsListItemComponent', () => {
 
     it.each`
       name                    | selector                     | expected
-      ${'anchor'}             | ${findAllAnchors}            | ${1}
+      ${'button'}             | ${findAllButtons}            | ${1}
       ${'avatar container'}   | ${findAvatarContainer}       | ${1}
       ${'metadata container'} | ${findAllMetadataContainers} | ${1}
       ${'title'}              | ${findAllTitles}             | ${1}
@@ -119,13 +120,10 @@ describe('FrequentItemsListItemComponent', () => {
     });
 
     it('tracks when item link is clicked', () => {
-      const link = wrapper.find('a');
-      // NOTE: this listener is required to prevent the click from going through and causing:
-      //   `Error: Not implemented: navigation ...`
-      link.element.addEventListener('click', (e) => {
-        e.preventDefault();
-      });
-      link.trigger('click');
+      const link = wrapper.findComponent(GlButton);
+
+      link.vm.$emit('click');
+
       expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_link', {
         label: 'projects_dropdown_frequent_items_list_item',
       });
diff --git a/spec/frontend/nav/components/top_nav_menu_item_spec.js b/spec/frontend/nav/components/top_nav_menu_item_spec.js
index fd2b4d3b0565e277458c220d26a0879ca3b3cf07..71154e18915b3e318022747509e89403b813ec72 100644
--- a/spec/frontend/nav/components/top_nav_menu_item_spec.js
+++ b/spec/frontend/nav/components/top_nav_menu_item_spec.js
@@ -73,7 +73,7 @@ describe('~/nav/components/top_nav_menu_item.vue', () => {
       expect(findButtonIcons()).toEqual([
         {
           name: TEST_MENU_ITEM.icon,
-          classes: ['gl-mr-2!'],
+          classes: ['gl-mr-3!'],
         },
         {
           name: 'chevron-right',