diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
index 7c1ac389632d430b6c882b113e97f9b9798c7b77..06ca90fa8c633a5cdf6e19baf3cd85d70e6f1da2 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -30,9 +30,9 @@ import TimelineEntryItem from './timeline_entry_item.vue';
 
 const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
 const MR_ICON_COLORS = {
-  approval: 'gl-bg-green-100 gl-text-green-700',
-  'issue-close': 'gl-bg-red-100 gl-text-red-700',
-  'git-merge': 'gl-bg-blue-100 gl-text-blue-700',
+  check: 'gl-bg-green-100 gl-text-green-700',
+  'merge-request-close': 'gl-bg-red-100 gl-text-red-700',
+  merge: 'gl-bg-blue-100 gl-text-blue-700',
 };
 const ICON_COLORS = {
   'issue-close': 'gl-bg-blue-100 gl-text-blue-700',
@@ -91,9 +91,16 @@ export default {
     descriptionVersion() {
       return this.descriptionVersions[this.note.description_version_id];
     },
+    isMergeRequest() {
+      return this.getNoteableData.noteableType === 'MergeRequest';
+    },
+    hasIconColors() {
+      if (!this.isMergeRequest) return true;
+
+      return this.isMergeRequest && MR_ICON_COLORS[this.note.system_note_icon_name];
+    },
     iconBgClass() {
-      const colors =
-        this.getNoteableData.noteableType === 'MergeRequest' ? MR_ICON_COLORS : ICON_COLORS;
+      const colors = this.isMergeRequest ? MR_ICON_COLORS : ICON_COLORS;
 
       return colors[this.note.system_note_icon_name] || 'gl-bg-gray-50 gl-text-gray-600';
     },
@@ -129,12 +136,20 @@ export default {
     class="note system-note note-wrapper"
   >
     <div
-      :class="iconBgClass"
-      class="gl-float-left gl--flex-center gl-rounded-full gl-mt-n1 gl-ml-2 gl-w-6 gl-h-6 timeline-icon"
+      :class="[
+        iconBgClass,
+        {
+          'mr-system-note-empty gl-bg-gray-900!': !hasIconColors,
+          'gl-w-6 gl-h-6 gl-mt-n1 gl-ml-2': !isMergeRequest,
+          'mr-system-note-icon': isMergeRequest,
+        },
+      ]"
+      class="gl-float-left gl--flex-center gl-rounded-full gl-relative timeline-icon"
     >
       <gl-icon
-        v-if="note.system_note_icon_name"
+        v-if="note.system_note_icon_name && hasIconColors"
         :name="note.system_note_icon_name"
+        :size="isMergeRequest ? 12 : 16"
         data-testid="timeline-icon"
       />
     </div>
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index b01ff498ad3844f0bea9aebeb6291f4e855dd75f..6375664768d1fbf224f0114f479fe43c33f880ad 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -1249,3 +1249,60 @@ $tabs-holder-z-index: 250;
     vertical-align: middle;
   }
 }
+
+.mr-system-note-icon {
+  width: 20px;
+  height: 20px;
+  margin-left: 6px;
+
+  &.gl-bg-green-100 {
+    --bg-color: var(--green-100, #{$green-100});
+  }
+
+  &.gl-bg-red-100 {
+    --bg-color: var(--red-100, #{$red-100});
+  }
+
+  &.gl-bg-blue-100 {
+    --bg-color: var(--blue-100, #{$blue-100});
+  }
+}
+
+.mr-system-note-icon:not(.mr-system-note-empty)::before {
+  content: '';
+  display: block;
+  position: absolute;
+  left: calc(50% - 1px);
+  bottom: 100%;
+  width: 2px;
+  height: 20px;
+  background: linear-gradient(to bottom, transparent, var(--bg-color));
+
+  .system-note:first-child & {
+    display: none;
+  }
+}
+
+.mr-system-note-icon:not(.mr-system-note-empty)::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: calc(50% - 1px);
+  top: 100%;
+  width: 2px;
+  height: 20px;
+  background: linear-gradient(to bottom, var(--bg-color), transparent);
+
+  .system-note:last-child & {
+    display: none;
+  }
+}
+
+.mr-system-note-empty {
+  width: 8px;
+  height: 8px;
+  margin-top: 6px;
+  margin-left: 12px;
+  margin-right: 8px;
+  border: 2px solid var(--gray-50, $gray-50);
+}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index b66af09a8df6e32631ec73f359d0dd8edaf6bc1e..1a86b72d01a19938e74dd4768d47069ae6c324ff 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -7,7 +7,7 @@ $system-note-icon-size: 1.5rem;
 $system-note-svg-size: 1rem;
 $icon-size-diff: $avatar-icon-size - $system-note-icon-size;
 
-$system-note-icon-m-top: $avatar-m-top + $icon-size-diff - 0.3rem;
+$system-note-icon-m-top: $avatar-m-top + $icon-size-diff - 1.3rem;
 $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 
 @mixin vertical-line($left) {
@@ -15,10 +15,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
     content: '';
     border-left: 2px solid var(--gray-50, $gray-50);
     position: absolute;
-    top: $gl-padding-6;
+    top: 16px;
     bottom: 0;
     left: calc(#{$left} - 1px);
-    height: calc(100% + 1.5rem);
+    height: calc(100% + 20px);
   }
 }
 
@@ -30,8 +30,30 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 
 .issuable-discussion:not(.incident-timeline-events),
 .limited-width-notes {
-  .main-notes-list > li.timeline-entry:not(:last-of-type) {
-    @include vertical-line(1rem);
+  .main-notes-list::before,
+  .timeline-entry:last-child::before {
+    content: '';
+    position: absolute;
+    width: 2px;
+    left: 15px;
+    top: 15px;
+    height: calc(100% - 15px);
+  }
+
+  .main-notes-list::before {
+    background: var(--gray-50, $gray-50);
+  }
+
+  .timeline-entry:last-child::before {
+    background: var(--white);
+
+    .gl-dark & {
+      background: var(--gray-10);
+    }
+
+    &.note-comment {
+      top: 30px;
+    }
   }
 }
 
@@ -63,6 +85,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
       height: 2rem;
     }
 
+    .gl-avatar {
+      border-color: var(--gray-50, $gray-50);
+    }
+
     &.note-comment,
     &.note-skeleton,
     .draft-note {
@@ -265,7 +291,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 
     &.being-posted {
       pointer-events: none;
-      opacity: 0.5;
+
+      .timeline-entry-inner {
+        opacity: 0.5;
+      }
 
       .dummy-avatar {
         background-color: $gray-100;
@@ -370,9 +399,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
     }
 
     .timeline-content {
-      @include notes-media('min', map-get($grid-breakpoints, sm)) {
-        margin-left: 30px;
-      }
+      margin-left: 30px;
     }
 
     .note-header {
@@ -460,7 +487,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
   }
 
   .timeline-icon {
-    margin: 12px 0 0 20px;
+    margin: 20px 0 0 28px;
   }
 }
 
@@ -570,15 +597,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
     .system-note {
       background-color: transparent;
       padding: 0;
-
-      .timeline-icon {
-        margin-top: -2px;
-      }
-
-      .timeline-entry-inner .timeline-icon {
-        margin-top: $system-note-icon-m-top;
-        margin-left: $system-note-icon-m-left;
-      }
     }
   }
 
diff --git a/app/controllers/concerns/issuable_actions.rb b/app/controllers/concerns/issuable_actions.rb
index b8d47586a155b56f11949443f43a47382dbf81bc..a86a8a0415ab16cd54401ab7525a4a76ca348eb7 100644
--- a/app/controllers/concerns/issuable_actions.rb
+++ b/app/controllers/concerns/issuable_actions.rb
@@ -190,7 +190,7 @@ def notes_filter_updated?
   end
 
   def discussion_cache_context
-    [current_user&.cache_key, project.team.human_max_access(current_user&.id)].join(':')
+    [current_user&.cache_key, project.team.human_max_access(current_user&.id), 'v2'].join(':')
   end
 
   def discussion_serializer
diff --git a/app/helpers/system_note_helper.rb b/app/helpers/system_note_helper.rb
index a1b6e8964759e58705675dc8188da382b342f476..3d31d697452fb37e435f3675fb34b2ea046d3bf7 100644
--- a/app/helpers/system_note_helper.rb
+++ b/app/helpers/system_note_helper.rb
@@ -2,13 +2,13 @@
 
 module SystemNoteHelper
   ICON_NAMES_BY_ACTION = {
-    'approved' => 'approval',
+    'approved' => 'check',
     'unapproved' => 'unapproval',
     'cherry_pick' => 'cherry-pick-commit',
     'commit' => 'commit',
     'description' => 'pencil',
-    'merge' => 'git-merge',
-    'merged' => 'git-merge',
+    'merge' => 'merge',
+    'merged' => 'merge',
     'opened' => 'issues',
     'closed' => 'issue-close',
     'time_tracking' => 'timer',
@@ -51,7 +51,11 @@ module SystemNoteHelper
   }.freeze
 
   def system_note_icon_name(note)
-    ICON_NAMES_BY_ACTION[note.system_note_metadata&.action]
+    if note.system_note_metadata&.action == 'closed' && note.for_merge_request?
+      'merge-request-close'
+    else
+      ICON_NAMES_BY_ACTION[note.system_note_metadata&.action]
+    end
   end
 
   def icon_for_system_note(note)
diff --git a/spec/requests/api/graphql/project/alert_management/alert/notes_spec.rb b/spec/requests/api/graphql/project/alert_management/alert/notes_spec.rb
index 16dd0dfcfcba8cb186c182923eae9939f3cb8698..c1ac0367853d659f179f69bbe572d65b4817db33 100644
--- a/spec/requests/api/graphql/project/alert_management/alert/notes_spec.rb
+++ b/spec/requests/api/graphql/project/alert_management/alert/notes_spec.rb
@@ -51,7 +51,7 @@
 
     expect(first_notes_result.first).to include(
       'id' => first_system_note.to_global_id.to_s,
-      'systemNoteIconName' => 'git-merge',
+      'systemNoteIconName' => 'merge',
       'body' => first_system_note.note
     )
   end