diff --git a/app/assets/javascripts/notes/components/issue_notes.vue b/app/assets/javascripts/notes/components/issue_notes.vue
index 4ff9525661c..890252fc54c 100644
--- a/app/assets/javascripts/notes/components/issue_notes.vue
+++ b/app/assets/javascripts/notes/components/issue_notes.vue
@@ -4,6 +4,7 @@ import Vuex from 'vuex';
 import storeOptions from '../stores/issue_notes_store';
 import IssueNote from './issue_note.vue';
 import IssueDiscussion from './issue_discussion.vue';
+import IssueSystemNote from './issue_system_note.vue';
 
 Vue.use(Vuex);
 const store = new Vuex.Store(storeOptions);
@@ -19,10 +20,15 @@ export default {
   components: {
     IssueNote,
     IssueDiscussion,
+    IssueSystemNote,
   },
   methods: {
     component(note) {
-      return note.individual_note ? IssueNote : IssueDiscussion;
+      if (note.individual_note) {
+        return note.notes[0].system ? IssueSystemNote : IssueNote;
+      }
+
+      return IssueDiscussion;
     },
     componentData(note) {
       return note.individual_note ? note.notes[0] : note;
diff --git a/app/assets/javascripts/notes/components/issue_system_note.vue b/app/assets/javascripts/notes/components/issue_system_note.vue
new file mode 100644
index 00000000000..6748cd4332c
--- /dev/null
+++ b/app/assets/javascripts/notes/components/issue_system_note.vue
@@ -0,0 +1,3 @@
+<template>
+  <p>System note</p>
+</template>