diff --git a/app/assets/javascripts/notes/components/discussion_notes.vue b/app/assets/javascripts/notes/components/discussion_notes.vue
index 79157c3f99cb6380006da967d1e042eac56da4d8..71674169af0083744d29ef53b9228e6c80c5b2ef 100644
--- a/app/assets/javascripts/notes/components/discussion_notes.vue
+++ b/app/assets/javascripts/notes/components/discussion_notes.vue
@@ -201,6 +201,7 @@ export default {
           :is-overview-tab="isOverviewTab"
           :should-scroll-to-note="shouldScrollToNote"
           :internal-note="isDiscussionInternal"
+          :variant="diffLine ? 'diff' : ''"
           @handleDeleteNote="$emit('deleteNote')"
         >
           <template #avatar-badge>
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 c10a4e4c58e51449c72730ce9122a21a1ee2ad40..20879a8cdfb3a17e073262c37e2b3c7fcbc78b00 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -31,12 +31,12 @@ import TimelineEntryItem from './timeline_entry_item.vue';
 
 const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
 const ICON_COLORS = {
-  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',
-  'issue-close': 'gl-bg-blue-100 gl-text-blue-700',
-  issues: 'gl-bg-green-100 gl-text-green-700',
-  error: 'gl-bg-red-100 gl-text-red-700',
+  check: 'gl-bg-green-100 gl-text-green-700 icon-success',
+  'merge-request-close': 'gl-bg-red-100 gl-text-red-700 icon-danger',
+  merge: 'gl-bg-blue-100 gl-text-blue-700 icon-info',
+  'issue-close': 'gl-bg-blue-100 gl-text-blue-700 icon-info',
+  issues: 'gl-bg-green-100 gl-text-green-700 icon-success',
+  error: 'gl-bg-red-100 gl-text-red-700 icon-danger',
 };
 
 export default {
@@ -61,6 +61,11 @@ export default {
       type: Object,
       required: true,
     },
+    variant: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -147,28 +152,33 @@ export default {
 <template>
   <timeline-entry-item
     :id="noteAnchorId"
-    :class="{ target: isTargetNote, 'pr-0': shouldShowDescriptionVersion }"
-    class="note system-note note-wrapper"
+    :class="{
+      target: isTargetNote,
+      'pr-0': shouldShowDescriptionVersion,
+      [`system-note-variant-${variant}`]: variant,
+    }"
+    class="system-note-v2"
   >
     <div
       :class="[
         iconBgClass,
         {
-          'system-note-icon': isAllowedIcon,
-          'system-note-tiny-dot !gl-bg-gray-900': !isAllowedIcon,
+          'system-note-icon-v2 gl-h-6 gl-w-6 gl-ml-2 -gl-mt-1': isAllowedIcon,
+          'system-note-dot gl-h-3 gl-w-3 gl-mt-3 -gl-top-1 gl-ml-4 gl-border-2 gl-border-gray-50 gl-border-solid gl-bg-gray-900':
+            !isAllowedIcon,
         },
       ]"
-      class="timeline-icon gl-relative gl-float-left gl-flex gl-items-center gl-justify-center gl-rounded-full"
+      class="gl-relative gl-float-left gl-flex gl-items-center gl-justify-center gl-rounded-full"
     >
       <gl-icon
         v-if="isAllowedIcon"
         :name="systemNoteIconName"
-        :size="12"
+        :size="14"
         data-testid="timeline-icon"
       />
     </div>
-    <div class="timeline-content">
-      <div class="note-header">
+    <div class="gl-ml-7">
+      <div class="gl-flex gl-justify-between gl-items-start">
         <note-header
           :author="note.author"
           :created-at="note.created_at"
@@ -203,29 +213,36 @@ export default {
           </template>
         </note-header>
       </div>
-      <div class="note-body">
+      <div class="note-body-v2 gl-pl-3 gl-pb-3">
         <div
           v-safe-html="note.note_html"
-          :class="{ 'system-note-commit-list': hasMoreCommits, 'hide-shade': expanded }"
-          class="note-text md"
+          :class="{
+            'gl-block gl-overflow-hidden': hasMoreCommits,
+            'system-note-commit-list-v2': hasMoreCommits && !expanded,
+          }"
+          class="note-text-v2 md"
         ></div>
         <div v-if="hasMoreCommits" class="flex-list">
           <div
-            class="system-note-commit-list-toggler flex-row gl-pl-4 gl-pt-3"
+            class="flex-row gl-pl-4 gl-pt-3 gl-text-blue-500 gl-cursor-pointer hover:gl-underline gl-relative gl-z-2"
             @click="expanded = !expanded"
           >
             <gl-icon :name="toggleIcon" :size="12" class="gl-mr-2" />
             <span>{{ __('Toggle commit list') }}</span>
           </div>
         </div>
-        <div v-if="shouldShowDescriptionVersion" class="description-version gl-relative !gl-pt-3">
+        <div
+          v-if="shouldShowDescriptionVersion"
+          class="gl-relative !gl-pt-3"
+          data-testid="description-version"
+        >
           <pre v-if="isLoadingDescriptionVersion" class="loading-state">
             <gl-skeleton-loader />
           </pre>
           <pre
             v-else
             v-safe-html="descriptionVersion"
-            class="wrapper gl-mt-3 gl-whitespace-pre-wrap gl-pr-7"
+            class="gl-mt-3 gl-whitespace-pre-wrap gl-pr-7"
           ></pre>
           <gl-button
             v-if="displayDeleteButton"
@@ -243,7 +260,7 @@ export default {
         </div>
         <div
           v-if="lines.length && showLines"
-          class="diff-content outdated-lines-wrapper gl-mt-4 gl-overflow-hidden gl-rounded-small gl-border-1 gl-border-solid gl-border-gray-200"
+          class="gl-pl-0 gl-overflow-visible gl-my-2 gl-mr-5 gl-overflow-hidden gl-rounded-small gl-border-1 gl-border-solid gl-border-gray-200"
         >
           <table
             :class="$options.userColorSchemeClass"
@@ -268,7 +285,7 @@ export default {
             </tr>
           </table>
         </div>
-        <div v-else-if="showLines" class="mt-4">
+        <div v-else-if="showLines" class="gl-mt-4">
           <gl-skeleton-loader />
         </div>
       </div>
diff --git a/app/assets/stylesheets/page_bundles/issuable.scss b/app/assets/stylesheets/page_bundles/issuable.scss
index 526c5bc86f25918f67522c224c8f4bc898befd83..cde0103b4db66d5ca9993b0518e90ad0e13abcf0 100644
--- a/app/assets/stylesheets/page_bundles/issuable.scss
+++ b/app/assets/stylesheets/page_bundles/issuable.scss
@@ -1,5 +1,6 @@
 @import 'mixins_and_variables_and_functions';
 @import 'system_note_styles';
+@import './notes/system_notes_v2';
 
 .issuable-details {
   section {
diff --git a/app/assets/stylesheets/page_bundles/notes/_system_notes_v2.scss b/app/assets/stylesheets/page_bundles/notes/_system_notes_v2.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c61125eaa5dc41f4d51c15158a3a9c66880d86ca
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/notes/_system_notes_v2.scss
@@ -0,0 +1,94 @@
+// System notes on main activity feed
+
+@mixin activity-line-gradient($color-1, $color-2) {
+  content: '';
+  display: block;
+  position: absolute;
+  left: calc(50% - 1px);
+  width: 2px;
+  height: 20px;
+  background: linear-gradient(to bottom, $color-1, $color-2);
+}
+
+.system-note-v2 {
+  .note-text-v2 {
+    p:first-child {
+      display: none;
+    }
+
+    ul {
+      margin: $gl-spacing-scale-2 0;
+    }
+  }
+
+  .note-body-v2 {
+    p {
+      margin-left: $gl-spacing-scale-5;
+    }
+  }
+
+  .system-note-message {
+    a {
+      color: $blue-500;
+    }
+
+    .gfm-project_member {
+      color: $blue-700;
+    }
+  }
+}
+
+.system-note-icon-v2 {
+  &.icon-success{
+    --bg-color: var(--green-100, #{$green-100});
+  }
+
+  &.icon-danger {
+    --bg-color: var(--red-100, #{$red-100});
+  }
+
+  &.icon-info {
+    --bg-color: var(--blue-100, #{$blue-100});
+  }
+
+  &:not(.mr-system-note-empty) {
+    &::before {
+      @include activity-line-gradient(transparent, var(--bg-color));
+      bottom: 100%;
+    }
+
+    &::after {
+      @include activity-line-gradient(var(--bg-color), transparent);
+      top: 100%;
+    }
+  }
+}
+
+.system-note-v2:first-child :is(.system-note-icon-v2::before, .system-note-icon-v2::after) {
+  display: none;
+}
+
+.system-note-commit-list-v2 {
+  max-height: 70px;
+
+  &::after {
+    content: '';
+    height: 70px;
+    position: absolute;
+    left: $gl-spacing-scale-2;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(rgba($white, 0.1) -50px, $body-bg 100%);
+  }
+}
+
+
+// System notes on diffs
+
+.system-note-variant-diff {
+  .system-note-dot {
+    top: 0;
+    margin-top: $gl-spacing-scale-4;
+    margin-left: $gl-spacing-scale-5;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss
index ec872b6842582d4ad7f252389932f93501e1e544..9c1c0b79c2f254214b7f6969f084e6865d64be7a 100644
--- a/app/assets/stylesheets/page_bundles/work_items.scss
+++ b/app/assets/stylesheets/page_bundles/work_items.scss
@@ -1,5 +1,6 @@
 @import 'mixins_and_variables_and_functions';
 @import 'system_note_styles';
+@import './notes/system_notes_v2';
 
 $work-item-field-inset-shadow: inset 0 0 0 $gl-border-size-1 var(--gray-200, $gray-200) !important;
 $work-item-overview-right-sidebar-width: 20rem;
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index b53c368c53981a7f87489b49bf25fada6971f82c..5f1d26bb4ad2a109da6a1e615bb3f8ba899bc88d 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -496,10 +496,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
   .diff-content {
     margin-left: 2.5rem;
 
-    &.outdated-lines-wrapper {
-      margin-left: 0;
-    }
-
     .line_holder td:first-of-type {
       @include gl-border-l;
     }
diff --git a/ee/spec/features/epics/referencing_epics_spec.rb b/ee/spec/features/epics/referencing_epics_spec.rb
index 56519d607e40d30d57efb59a7ec81f50c00a79ec..f02b19c6e078f8df82a6a3cfc46ec4bdc9bbf2f9 100644
--- a/ee/spec/features/epics/referencing_epics_spec.rb
+++ b/ee/spec/features/epics/referencing_epics_spec.rb
@@ -114,7 +114,7 @@
 
         find('div#notes li.note div.note-text a').click
 
-        page.within('div#notes li.note .system-note-message') do
+        page.within('div#notes li.system-note-v2 .system-note-message') do
           expect(page).to have_content('mentioned in issue')
           expect(page.find('a')).to have_content(issue.to_reference(full: true))
         end
@@ -140,7 +140,7 @@
 
           find('div#notes li.note div.note-text a').click
 
-          page.within('div#notes li.note.system-note .system-note-message') do
+          page.within('div#notes li.system-note-v2 .system-note-message') do
             expect(page).to have_content('mentioned in epic')
             expect(page.find('a')).to have_content(epic.to_reference(full: true))
           end
diff --git a/ee/spec/frontend/vue_shared/components/notes/system_note_spec.js b/ee/spec/frontend/vue_shared/components/notes/system_note_spec.js
index e20958136bf99bbf3c770444bee948d0295c6581..931a8623bec465ed13eb06cb0432a86ffc703fa2 100644
--- a/ee/spec/frontend/vue_shared/components/notes/system_note_spec.js
+++ b/ee/spec/frontend/vue_shared/components/notes/system_note_spec.js
@@ -17,9 +17,9 @@ describe('system note component', () => {
 
   </span><span class="idiff addition">dsaf</span><span class="idiff">
   more text
-  
+
   hello
-  
+
   foobar</span>`;
 
   function mockFetchDiff() {
@@ -35,7 +35,7 @@ describe('system note component', () => {
 
   const findBlankBtn = () => wrapper.find('[data-testid="compare-btn"]');
 
-  const findDescriptionVersion = () => wrapper.find('.description-version');
+  const findDescriptionVersion = () => wrapper.find('[data-testid="description-version"]');
 
   const findDeleteDescriptionVersionButton = () =>
     wrapper.find('[data-testid="delete-description-version-button"]');
diff --git a/spec/features/issues/notes_on_issues_spec.rb b/spec/features/issues/notes_on_issues_spec.rb
index 00ad3c89c86c8fd523fae9b199033d846a92ffb7..41657a11702ec81f218a2ccf0f7194f0b2b241a7 100644
--- a/spec/features/issues/notes_on_issues_spec.rb
+++ b/spec/features/issues/notes_on_issues_spec.rb
@@ -31,7 +31,7 @@ def submit_comment(text)
 
       find('div#notes li.note div.note-text a').click
 
-      page.within('div#notes li.note .system-note-message') do
+      page.within('div#notes li.system-note-v2 .system-note-message') do
         expect(page).to have_content('mentioned in issue')
         expect(page.find('a')).to have_content(issue.to_reference)
       end
@@ -120,7 +120,7 @@ def submit_comment(text)
       it 'shows the user the reference' do
         visit project_issue_path(project, issue)
 
-        page.within('div#notes li.note .system-note-message') do
+        page.within('div#notes li.system-note-v2 .system-note-message') do
           expect(page).to have_content('closed with')
           expect(page.find('a')).to have_content(reference_content)
         end
diff --git a/spec/features/merge_request/user_sees_system_notes_spec.rb b/spec/features/merge_request/user_sees_system_notes_spec.rb
index d547aa84bdd12f2f50f31a1726604e1f8687e4df..b05a8ec3ce29ac3ef9fa78a40bfd8963bdcd133c 100644
--- a/spec/features/merge_request/user_sees_system_notes_spec.rb
+++ b/spec/features/merge_request/user_sees_system_notes_spec.rb
@@ -19,7 +19,7 @@
     it 'shows the system note' do
       visit project_merge_request_path(public_project, merge_request)
 
-      expect(page).to have_css('.system-note')
+      expect(page).to have_css('.system-note-v2')
     end
   end
 
@@ -27,7 +27,7 @@
     it 'hides the system note' do
       visit project_merge_request_path(public_project, merge_request)
 
-      expect(page).not_to have_css('.system-note')
+      expect(page).not_to have_css('.system-note-v2')
     end
   end
 end
diff --git a/spec/support/shared_examples/features/discussion_comments_shared_example.rb b/spec/support/shared_examples/features/discussion_comments_shared_example.rb
index 3e8b86cd8abbe5ca198306d7b244a7b7b67f0d43..e6d745a2b68b1641b8a0a6593f99ee7801d9b5b4 100644
--- a/spec/support/shared_examples/features/discussion_comments_shared_example.rb
+++ b/spec/support/shared_examples/features/discussion_comments_shared_example.rb
@@ -309,7 +309,7 @@ def submit_reply(text)
           expect(page).to have_content(comment)
           expect(page).to have_content "#{user.name} closed"
 
-          new_discussion = all(comments_selector)[-2]
+          new_discussion = all(comments_selector)[-1]
 
           expect(new_discussion).to have_selector '.discussion'
         end