diff --git a/app/assets/javascripts/issues/list/components/issue_card_statistics.vue b/app/assets/javascripts/issues/list/components/issue_card_statistics.vue
index 2d00c3e549da99c0c362dc87ff21d93ef482d1db..4906cec526a2007e6961955c11faaece72c2808b 100644
--- a/app/assets/javascripts/issues/list/components/issue_card_statistics.vue
+++ b/app/assets/javascripts/issues/list/components/issue_card_statistics.vue
@@ -21,20 +21,10 @@ export default {
 
 <template>
   <ul class="gl-display-contents">
-    <li
-      v-if="issue.mergeRequestsCount"
-      v-gl-tooltip
-      class="gl-display-none gl-sm-display-block gl-mr-3"
-      :title="$options.i18n.relatedMergeRequests"
-      data-testid="merge-requests"
-    >
-      <gl-icon name="merge-request" />
-      {{ issue.mergeRequestsCount }}
-    </li>
     <li
       v-if="issue.upvotes"
       v-gl-tooltip
-      class="gl-display-none gl-sm-display-block gl-mr-3"
+      class="gl-display-none gl-sm-display-block"
       :title="$options.i18n.upvotes"
       data-testid="issuable-upvotes"
     >
@@ -44,13 +34,23 @@ export default {
     <li
       v-if="issue.downvotes"
       v-gl-tooltip
-      class="gl-display-none gl-sm-display-block gl-mr-3"
+      class="gl-display-none gl-sm-display-block"
       :title="$options.i18n.downvotes"
       data-testid="issuable-downvotes"
     >
       <gl-icon name="thumb-down" />
       {{ issue.downvotes }}
     </li>
+    <li
+      v-if="issue.mergeRequestsCount"
+      v-gl-tooltip
+      class="gl-display-none gl-sm-display-block"
+      :title="$options.i18n.relatedMergeRequests"
+      data-testid="merge-requests"
+    >
+      <gl-icon name="merge-request" />
+      {{ issue.mergeRequestsCount }}
+    </li>
     <slot></slot>
   </ul>
 </template>
diff --git a/app/assets/javascripts/merge_requests/list/components/merge_request_statistics.vue b/app/assets/javascripts/merge_requests/list/components/merge_request_statistics.vue
index 2bce8314a0cde2802e0e4b844c59767f5032608b..53d5b2be327bb88080c637600aa108834ec3bc91 100644
--- a/app/assets/javascripts/merge_requests/list/components/merge_request_statistics.vue
+++ b/app/assets/javascripts/merge_requests/list/components/merge_request_statistics.vue
@@ -24,7 +24,7 @@ export default {
     <li
       v-if="mergeRequest.upvotes"
       v-gl-tooltip
-      class="gl-display-none gl-sm-display-block gl-mr-3"
+      class="gl-display-none gl-sm-display-block"
       :title="$options.i18n.upvotes"
       data-testid="issuable-upvotes"
     >
@@ -34,7 +34,7 @@ export default {
     <li
       v-if="mergeRequest.downvotes"
       v-gl-tooltip
-      class="gl-display-none gl-sm-display-block gl-mr-3"
+      class="gl-display-none gl-sm-display-block"
       :title="$options.i18n.downvotes"
       data-testid="issuable-downvotes"
     >
diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue
index 4dce443b709fc3c12d54ae9f0572a56bf53f7007..e06abfbfc772a5e6ea27603c30318596d2d48824 100644
--- a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue
+++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue
@@ -376,41 +376,38 @@ export default {
       </div>
     </div>
     <div class="issuable-meta">
-      <ul v-if="showIssuableMeta" class="controls">
+      <ul v-if="showIssuableMeta" class="controls gl-gap-3">
         <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
-        <li v-if="$slots.status" data-testid="issuable-status">
+        <li v-if="$slots.status" data-testid="issuable-status" class="gl-mr-0!">
           <gl-badge v-if="isNotOpen" size="sm" :variant="statusBadgeVariant">
             <slot name="status"></slot>
           </gl-badge>
           <slot v-else name="status"></slot>
         </li>
         <slot name="pipeline-status"></slot>
-        <li v-if="assignees.length">
+        <li v-if="assignees.length" class="gl-mr-0!">
           <issuable-assignees
             :assignees="assignees"
             :icon-size="16"
             :max-visible="4"
-            img-css-classes="gl-mr-2!"
             class="gl-align-items-center gl-display-flex"
           />
         </li>
-        <slot name="statistics"></slot>
         <li
-          v-if="showDiscussions"
-          class="gl-display-none gl-sm-display-block"
+          v-if="showDiscussions && notesCount"
+          class="gl-display-none gl-sm-display-block gl-mr-0!"
           data-testid="issuable-comments"
         >
-          <gl-link
+          <div
             v-gl-tooltip.top
             :title="__('Comments')"
-            :href="issuableNotesLink"
-            :class="{ 'no-comments': !notesCount }"
-            class="gl-reset-color!"
+            class="gl-reset-color! gl-display-flex gl-align-items-center"
           >
-            <gl-icon name="comments" />
+            <gl-icon name="comments" class="gl-mr-2" />
             {{ notesCount }}
-          </gl-link>
+          </div>
         </li>
+        <slot name="statistics"></slot>
       </ul>
       <div
         v-gl-tooltip.bottom
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index b319354edfbf27d1833d947b76ea2000e5089a51..c1dc29de84f040df995e2be332c1274c937143d0 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -168,10 +168,6 @@ ul.content-list {
   }
 }
 
-.no-comments {
-  opacity: 0.5;
-}
-
 // Content list using flexbox
 .flex-list {
   .flex-row {
diff --git a/app/views/projects/merge_requests/_approvals_count.html.haml b/app/views/projects/merge_requests/_approvals_count.html.haml
index 35d0eb4cdd49615a6096af06267b27f60ae39017..c8638398337a46396f4dc2222a154b99ad74db7c 100644
--- a/app/views/projects/merge_requests/_approvals_count.html.haml
+++ b/app/views/projects/merge_requests/_approvals_count.html.haml
@@ -10,4 +10,4 @@
   - badge_variant = :success
   - badge_label = _("Approved")
 
-  %li.gl-display-flex= render Pajamas::BadgeComponent.new(badge_label, size: 'sm', variant: badge_variant, icon: approval_icon, title: approval_tooltip, class: 'has-tooltip', data: { 'testid': 'mr-appovals' })
+  %li.gl-display-flex{ class: 'gl-mr-0!' }= render Pajamas::BadgeComponent.new(badge_label, size: 'sm', variant: badge_variant, icon: approval_icon, title: approval_tooltip, class: 'has-tooltip', data: { 'testid': 'mr-appovals' })
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index 0b90b7409aad5501bf545b7d92ea3beb5152b81a..94e5bb4fb656f4e378372562ef79e2691fae959b 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -43,29 +43,28 @@
               = link_to_label(label, type: :merge_request, small: true)
 
     .issuable-meta
-      %ul.controls.d-flex.gl-align-items-center
+      %ul.controls.gl-gap-3
         - if merge_request.merged?
           - merged_at = merge_request.merged_at ? l(merge_request.merged_at.to_time) : _("Merge date & time could not be determined")
-          %li.d-none.d-sm-flex
+          %li.gl-display-none.gl-sm-display-flex{ class: 'gl-mr-0!' }
             %a.has-tooltip{ href: "#{merge_request_path(merge_request)}#widget-state", title: merged_at }
               = render Pajamas::BadgeComponent.new(_('Merged'), size: 'sm', variant: 'info')
         - elsif merge_request.closed?
-          %li.d-none.d-sm-flex
+          %li.gl-display-none.gl-sm-display-flex{ class: 'gl-mr-0!' }
             = render Pajamas::BadgeComponent.new(_('Closed'), size: 'sm', variant: 'danger')
-        = render 'shared/merge_request_pipeline_status', merge_request: merge_request
         - if merge_request.open? && merge_request.broken?
-          %li.issuable-pipeline-broken.d-none.d-sm-flex
+          %li.issuable-pipeline-broken.gl-display-none.gl-sm-display-flex{ class: 'gl-mr-0!' }
             = link_to merge_request_path(merge_request), class: "has-tooltip", title: _('Cannot be merged automatically') do
               = sprite_icon('warning-solid')
         - if merge_request.assignees.any?
-          %li.gl-display-flex.gl-align-items-center
+          %li.gl-display-flex{ class: 'gl-mr-0!' }
             = render 'shared/issuable/assignees', project: merge_request.project, issuable: merge_request
         - if merge_request.reviewers.any?
-          %li.gl-display-flex.issuable-reviewers
+          %li.gl-display-flex.issuable-reviewers{ class: 'gl-mr-0!' }
             = render 'shared/issuable/reviewers', project: merge_request.project, issuable: merge_request
-        = render 'projects/merge_requests/approvals_count', merge_request: merge_request
-
         = render 'shared/issuable_meta_data', issuable: merge_request
+        = render 'projects/merge_requests/approvals_count', merge_request: merge_request
+        = render 'shared/merge_request_pipeline_status', merge_request: merge_request
 
       - if merge_request.updated_at != merge_request.created_at
         .gl-float-right.issuable-updated-at.gl-display-none.gl-sm-display-inline-block.gl-text-gray-500
diff --git a/app/views/shared/_issuable_meta_data.html.haml b/app/views/shared/_issuable_meta_data.html.haml
index 982d3b687929d0eac7c8b9d32970893544e80413..e1b83f45d3d5ad4e73c6a115eef1f2a189a78b05 100644
--- a/app/views/shared/_issuable_meta_data.html.haml
+++ b/app/views/shared/_issuable_meta_data.html.haml
@@ -2,27 +2,27 @@
 - issue_votes        = @issuable_meta_data[issuable.id]
 - upvotes            = issue_votes.upvotes
 - downvotes          = issue_votes.downvotes
-- issuable_path      = issuable_path(issuable, anchor: 'notes')
 - issuable_mr        = @issuable_meta_data[issuable.id].merge_requests_count
 
 - if issuable_mr > 0
-  %li.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Related merge requests'), data: { testid: 'merge-requests' } }
+  %li.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Related merge requests'), data: { testid: 'merge-requests' }, class: 'gl-mr-0!' }
     = sprite_icon('merge-request', css_class: "gl-vertical-align-middle")
     = issuable_mr
 
+- if note_count > 0
+  %li.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Comments'), data: { testid: 'issuable-comments' }, class: 'gl-mr-0!' }
+    = sprite_icon('comments', css_class: "gl-vertical-align-middle")
+    = note_count
+
 - if upvotes > 0
-  %li.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Upvotes'), data: { testid: 'issuable-upvotes' } }
+  %li.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Upvotes'), data: { testid: 'issuable-upvotes' }, class: 'gl-mr-0!' }
     = sprite_icon('thumb-up', css_class: "gl-vertical-align-middle")
     = upvotes
 
 - if downvotes > 0
-  %li.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Downvotes'), data: { testid: 'issuable-downvotes' } }
+  %li.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Downvotes'), data: { testid: 'issuable-downvotes' }, class: 'gl-mr-0!' }
     = sprite_icon('thumb-down', css_class: "gl-vertical-align-middle")
     = downvotes
 
 = render_if_exists 'shared/issuable/blocking_issues_count', issuable: issuable
 
-%li.gl-display-none.gl-sm-display-block
-  = link_to issuable_path, class: ['has-tooltip', ('no-comments' if note_count == 0)], title: _('Comments'), data: { testid: 'issuable-comments' } do
-    = sprite_icon('comments', css_class: 'gl-vertical-align-text-bottom')
-    = note_count
diff --git a/app/views/shared/snippets/_snippet.html.haml b/app/views/shared/snippets/_snippet.html.haml
index a61d49f30cfc94ff6fed044615d9d8f6e32e5a7f..753350f5c97eeb79b7c44a8592adf1ccb7516be4 100644
--- a/app/views/shared/snippets/_snippet.html.haml
+++ b/app/views/shared/snippets/_snippet.html.haml
@@ -14,8 +14,8 @@
         %span{ class: 'has-tooltip gl-bg-orange-50 gl-text-orange-600 border-radius-default gl-p-2', title: s_("Snippets|This snippet is hidden because its author has been banned") }
           = sprite_icon('spam', size: '16')
 
-      .snippet-info
-        .gl-display-inline.gl-text-secondary{ data: { testid: 'snippet-created-at'} }
+      .snippet-info.gl-font-sm.gl-text-gray-500!
+        .gl-display-inline{ data: { testid: 'snippet-created-at'} }
           - created_at = time_ago_with_tooltip(snippet.created_at, placement: 'bottom')
           - author = link_to(snippet.author_name, user_snippets_path(snippet.author), data: { user_id: snippet.author.id }, class: 'gl-text-black-normal')
           #{snippet.to_reference} &middot;
@@ -27,10 +27,11 @@
 
     .gl-sm-display-flex.gl-flex-direction-column.gl-align-items-flex-end{ data: { testid: 'snippet-file-count-content', qa_snippet_files: snippet.statistics&.file_count } }
       .gl-display-flex.gl-gap-4.gl-align-items-center
+        - if notes_count > 0
+          %span.has-tooltip{ title: _('Comments') }
+            = sprite_icon('comments')
+            = notes_count
         = snippet_file_count(snippet)
-        = link_to gitlab_snippet_path(snippet, anchor: 'notes'), class: "#{'no-comments' if notes_count == 0} gl-text-black-normal" do
-          = sprite_icon('comments', css_class: 'gl-vertical-align-text-bottom')
-          = notes_count
         %span.has-tooltip{ title: visibility_level_label(snippet.visibility_level), data: { testid: 'snippet-visibility-content', qa_snippet_visibility: visibility_level_label(snippet.visibility_level) } }
           = visibility_level_icon(snippet.visibility_level)
-      .gl-white-space-nowrap.gl-text-secondary= _('updated %{timeAgo}').html_safe % { timeAgo: time_ago_with_tooltip(snippet.updated_at, placement: 'bottom') }
+      .gl-white-space-nowrap.gl-font-sm.gl-text-secondary= _('updated %{timeAgo}').html_safe % { timeAgo: time_ago_with_tooltip(snippet.updated_at, placement: 'bottom') }
diff --git a/ee/app/assets/javascripts/issues/list/components/issue_card_statistics.vue b/ee/app/assets/javascripts/issues/list/components/issue_card_statistics.vue
index ce1f3f6506f69a554423288fcd4f771137cf7e99..4c6ccec4ab57b601eb2147029ec82166eaf18b02 100644
--- a/ee/app/assets/javascripts/issues/list/components/issue_card_statistics.vue
+++ b/ee/app/assets/javascripts/issues/list/components/issue_card_statistics.vue
@@ -19,7 +19,7 @@ export default {
 <template>
   <issue-card-statistics :issue="issue">
     <blocking-issues-count
-      class="gl-display-none gl-sm-display-block gl-mr-3"
+      class="gl-display-none gl-sm-display-inline-block"
       :blocking-issues-count="issue.blockingCount"
       is-list-item
       data-testid="blocking-issues"
diff --git a/ee/app/views/projects/merge_requests/_approvals_count.html.haml b/ee/app/views/projects/merge_requests/_approvals_count.html.haml
index 147bcc706c7c488bf00ecad77b40b33b0ad8982a..8b856d169134baf48875ba3cd922c61c4729ca53 100644
--- a/ee/app/views/projects/merge_requests/_approvals_count.html.haml
+++ b/ee/app/views/projects/merge_requests/_approvals_count.html.haml
@@ -14,6 +14,6 @@
   - badge_variant = approved ? :success : :muted
   - badge_label = approved ? _("Approved") : _("%{approvals_given} of %{required} Approvals") % { approvals_given: total_given, required: required }
 
-  %li.gl-display-flex= render Pajamas::BadgeComponent.new(badge_label, size: 'sm', variant: badge_variant, icon: approval_icon, title: approval_tooltip, class: 'has-tooltip', data: { 'testid': 'mr-appovals' })
+  %li.gl-display-flex{ class: 'gl-mr-0!' }= render Pajamas::BadgeComponent.new(badge_label, size: 'sm', variant: badge_variant, icon: approval_icon, title: approval_tooltip, class: 'has-tooltip', data: { 'testid': 'mr-appovals' })
 - else
   = render_ce "projects/merge_requests/approvals_count", merge_request: merge_request
diff --git a/spec/features/issues/user_sees_breadcrumb_links_spec.rb b/spec/features/issues/user_sees_breadcrumb_links_spec.rb
index 632999c5d4919dab56923ea1097455c084a772eb..1612da17f5b91c2d684ebd7110f5c9e7d44ba10e 100644
--- a/spec/features/issues/user_sees_breadcrumb_links_spec.rb
+++ b/spec/features/issues/user_sees_breadcrumb_links_spec.rb
@@ -34,6 +34,6 @@
     visit project_issues_path(project, assignee_id: user.id)
 
     expect(page).to have_content 'foobar'
-    expect(page.all('.no-comments').first.text).to eq "0"
+    expect(page).not_to have_selector("[data-testid='issuable-comments']")
   end
 end
diff --git a/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js b/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js
index fccf4ae4258752dcc39da78489753931a75078d8..c75ef0eb642a29d3913cc83e7bda7a5b52d01b2e 100644
--- a/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js
+++ b/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js
@@ -227,7 +227,7 @@ describe('IssuableItem', () => {
     describe('showDiscussions', () => {
       it.each`
         userDiscussionsCount | returnValue
-        ${0}                 | ${true}
+        ${0}                 | ${false}
         ${1}                 | ${true}
         ${undefined}         | ${false}
         ${null}              | ${false}
@@ -555,12 +555,9 @@ describe('IssuableItem', () => {
       const discussionsEl = wrapper.findByTestId('issuable-comments');
 
       expect(discussionsEl.exists()).toBe(true);
-      expect(discussionsEl.findComponent(GlLink).attributes()).toMatchObject({
-        title: 'Comments',
-        href: `${mockIssuable.webUrl}#notes`,
-      });
+
       expect(discussionsEl.findComponent(GlIcon).props('name')).toBe('comments');
-      expect(discussionsEl.findComponent(GlLink).text()).toContain('2');
+      expect(discussionsEl.text()).toBe('2');
     });
 
     it('renders issuable-assignees component', () => {