diff --git a/app/assets/javascripts/commit/components/notes/diff_discussions.vue b/app/assets/javascripts/commit/components/notes/diff_discussions.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bf9a7fd30cf058bfdead8291237fac8cd4f1efed
--- /dev/null
+++ b/app/assets/javascripts/commit/components/notes/diff_discussions.vue
@@ -0,0 +1,70 @@
+<script>
+import { GlIcon } from '@gitlab/ui';
+import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue';
+import NoteableDiscussion from './noteable_discussion.vue';
+
+export default {
+  components: {
+    NoteableDiscussion,
+    GlIcon,
+    DesignNotePin,
+  },
+  props: {
+    discussions: {
+      type: Array,
+      required: true,
+    },
+    shouldCollapseDiscussions: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  methods: {
+    isExpanded(discussion) {
+      return this.shouldCollapseDiscussions ? discussion.expandedOnDiff : true;
+    },
+    toggleVisibility(discussion) {
+      this.$emit('toggleDiscussionVisibility', discussion);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      v-for="(discussion, index) in discussions"
+      :key="discussion.id"
+      :class="{
+        collapsed: !isExpanded(discussion),
+      }"
+      class="discussion-notes diff-discussions !gl-relative"
+    >
+      <ul :data-discussion-id="discussion.id" class="notes">
+        <template v-if="shouldCollapseDiscussions">
+          <button
+            v-if="discussion.expandedOnDiff"
+            class="diff-notes-collapse js-diff-notes-toggle"
+            type="button"
+            :aria-label="__('Show comments')"
+            @click="toggleVisibility(discussion)"
+          >
+            <gl-icon name="collapse" class="collapse-icon" />
+          </button>
+          <design-note-pin
+            v-else
+            :label="index + 1"
+            size="sm"
+            class="js-diff-notes-toggle -gl-translate-x-1/2"
+            @click="toggleVisibility(discussion)"
+          />
+        </template>
+        <noteable-discussion
+          v-show="isExpanded(discussion)"
+          :discussion="discussion"
+        />
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/commit/components/notes/discussion_notes.vue b/app/assets/javascripts/commit/components/notes/discussion_notes.vue
new file mode 100644
index 0000000000000000000000000000000000000000..33baab481cedcb12ad4ab5d42e2150956ec65c64
--- /dev/null
+++ b/app/assets/javascripts/commit/components/notes/discussion_notes.vue
@@ -0,0 +1,93 @@
+<script>
+import SystemNote from '~/vue_shared/components/notes/system_note.vue';
+import ToggleRepliesWidget from '~/notes/components/toggle_replies_widget.vue';
+import DiscussionNotesRepliesWrapper from '~/notes/components/discussion_notes_replies_wrapper.vue';
+import NoteableNote from './noteable_note.vue';
+
+export default {
+  name: 'DiscussionNotes',
+  components: {
+    SystemNote,
+    NoteableNote,
+    ToggleRepliesWidget,
+    DiscussionNotesRepliesWrapper,
+  },
+  inject: {
+    userPermissions: {
+      type: Object,
+    },
+  },
+  props: {
+    discussion: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    repliesExpanded() {
+      return !this.discussion.repliesCollapsed;
+    },
+    hasReplies() {
+      return Boolean(this.replies.length);
+    },
+    replies() {
+      return this.discussion.notes.slice(1);
+    },
+    firstNote() {
+      return this.discussion.notes.slice(0, 1)[0];
+    },
+    isDiscussionInternal() {
+      return this.discussion.notes[0]?.internal;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="discussion-notes">
+    <ul class="notes">
+      <system-note v-if="firstNote.system" :note="firstNote" />
+      <noteable-note
+        v-else
+        :note="firstNote"
+        :discussion="discussion"
+        :show-reply-button="userPermissions.can_create_note"
+        :internal-note="isDiscussionInternal"
+        @handleDeleteNote="$emit('deleteNote')"
+        @startReplying="$emit('startReplying')"
+      >
+        <template #avatar-badge>
+          <slot name="avatar-badge"></slot>
+        </template>
+      </noteable-note>
+      <discussion-notes-replies-wrapper
+        v-if="hasReplies || userPermissions.can_create_note"
+        is-diff-discussion
+      >
+        <toggle-replies-widget
+          v-if="hasReplies"
+          :collapsed="!repliesExpanded"
+          :replies="replies"
+          @toggle="$emit('toggleDiscussionReplies')"
+        />
+        <template v-if="repliesExpanded">
+          <template v-for="note in replies">
+            <system-note v-if="note.system" :key="`system-${note.id}`" :note="note" />
+            <noteable-note
+              v-else
+              :key="note.id"
+              :note="note"
+              :internal-note="isDiscussionInternal"
+              @handleDeleteNote="$emit('deleteNote')"
+            >
+              <template #avatar-badge>
+                <slot name="avatar-badge"></slot>
+              </template>
+            </noteable-note>
+          </template>
+        </template>
+        <slot :show-replies="repliesExpanded || !hasReplies" name="footer"></slot>
+      </discussion-notes-replies-wrapper>
+    </ul>
+  </div>
+</template>
diff --git a/app/assets/javascripts/commit/components/notes/note_actions.vue b/app/assets/javascripts/commit/components/notes/note_actions.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b1453108442ce00a6643f1ba306bd064becbc7c2
--- /dev/null
+++ b/app/assets/javascripts/commit/components/notes/note_actions.vue
@@ -0,0 +1,260 @@
+<script>
+import {
+  GlTooltipDirective,
+  GlButton,
+  GlDisclosureDropdown,
+  GlDisclosureDropdownItem,
+  GlDisclosureDropdownGroup,
+} from '@gitlab/ui';
+import { __, sprintf } from '~/locale';
+import UserAccessRoleBadge from '~/vue_shared/components/user_access_role_badge.vue';
+import { splitCamelCase } from '~/lib/utils/text_utility';
+import AbuseCategorySelector from '~/abuse_reports/components/abuse_category_selector.vue';
+import Tracking from '~/tracking';
+import ReplyButton from '~/notes/components/note_actions/reply_button.vue';
+import { isLoggedIn } from '~/lib/utils/common_utils';
+
+export default {
+  i18n: {
+    editCommentLabel: __('Edit comment'),
+    deleteCommentLabel: __('Delete comment'),
+    moreActionsLabel: __('More actions'),
+    reportAbuse: __('Report abuse'),
+  },
+  name: 'NoteActions',
+  components: {
+    AbuseCategorySelector,
+    EmojiPicker: () => import('~/emoji/components/picker.vue'),
+    GlButton,
+    GlDisclosureDropdown,
+    GlDisclosureDropdownItem,
+    GlDisclosureDropdownGroup,
+    ReplyButton,
+    UserAccessRoleBadge,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  mixins: [Tracking.mixin()],
+  props: {
+    authorId: {
+      type: Number,
+      required: true,
+    },
+    noteUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    accessLevel: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    isAuthor: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isContributor: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    noteableType: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    projectName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    showReply: {
+      type: Boolean,
+      required: true,
+    },
+    canEdit: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    canAwardEmoji: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    canDelete: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    canReportAsAbuse: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isReportAbuseDrawerOpen: false,
+    };
+  },
+  computed: {
+    shouldShowActionsDropdown() {
+      return isLoggedIn();
+    },
+    showDeleteAction() {
+      return this.canDelete && !this.canReportAsAbuse && !this.noteUrl;
+    },
+    noteableDisplayName() {
+      return splitCamelCase(this.noteableType).toLowerCase();
+    },
+    displayAuthorBadgeText() {
+      return sprintf(__('This user is the author of this %{noteable}.'), {
+        noteable: this.noteableDisplayName,
+      });
+    },
+    displayMemberBadgeText() {
+      return sprintf(__('This user has the %{access} role in the %{name} project.'), {
+        access: this.accessLevel.toLowerCase(),
+        name: this.projectName,
+      });
+    },
+    displayContributorBadgeText() {
+      return sprintf(__('This user has previously committed to the %{name} project.'), {
+        name: this.projectName,
+      });
+    },
+  },
+  methods: {
+    onEdit() {
+      this.$emit('handleEdit');
+    },
+    onDelete() {
+      this.$emit('handleDelete');
+    },
+    onAbuse() {
+      this.toggleReportAbuseDrawer(true);
+    },
+    onCopyUrl() {
+      this.$toast.show(__('Link copied to clipboard.'));
+    },
+    setAwardEmoji(awardName) {
+      this.$emit('award', awardName);
+    },
+    toggleReportAbuseDrawer(isOpen) {
+      this.isReportAbuseDrawerOpen = isOpen;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="note-actions">
+    <user-access-role-badge
+      v-if="isAuthor"
+      v-gl-tooltip
+      class="gl-mr-3 gl-hidden @sm/panel:gl-block"
+      :title="displayAuthorBadgeText"
+    >
+      {{ __('Author') }}
+    </user-access-role-badge>
+    <user-access-role-badge
+      v-if="accessLevel"
+      v-gl-tooltip
+      class="gl-mr-3 gl-hidden @sm/panel:gl-block"
+      :title="displayMemberBadgeText"
+    >
+      {{ accessLevel }}
+    </user-access-role-badge>
+    <user-access-role-badge
+      v-else-if="isContributor"
+      v-gl-tooltip
+      class="gl-mr-3 gl-hidden @sm/panel:gl-block"
+      :title="displayContributorBadgeText"
+    >
+      {{ __('Contributor') }}
+    </user-access-role-badge>
+    <span class="note-actions__mobile-spacer"></span>
+    <emoji-picker
+      v-if="canAwardEmoji"
+      toggle-class="add-reaction-button btn-default-tertiary"
+      data-testid="note-emoji-button"
+      @click="setAwardEmoji"
+    />
+    <reply-button
+      v-if="showReply"
+      ref="replyButton"
+      class="js-reply-button"
+      @startReplying="$emit('startReplying')"
+    />
+    <gl-button
+      v-if="canEdit"
+      v-gl-tooltip
+      :title="$options.i18n.editCommentLabel"
+      :aria-label="$options.i18n.editCommentLabel"
+      icon="pencil"
+      category="tertiary"
+      class="note-action-button js-note-edit"
+      data-testid="note-edit-button"
+      @click="onEdit"
+    />
+    <gl-button
+      v-if="showDeleteAction"
+      v-gl-tooltip
+      :title="$options.i18n.deleteCommentLabel"
+      :aria-label="$options.i18n.deleteCommentLabel"
+      icon="remove"
+      category="tertiary"
+      class="note-action-button js-note-delete"
+      @click="onDelete"
+    />
+    <div v-else-if="shouldShowActionsDropdown" class="more-actions dropdown">
+      <gl-disclosure-dropdown
+        v-gl-tooltip
+        :title="$options.i18n.moreActionsLabel"
+        :toggle-text="$options.i18n.moreActionsLabel"
+        text-sr-only
+        icon="ellipsis_v"
+        category="tertiary"
+        placement="bottom-end"
+        class="note-action-button more-actions-toggle"
+        no-caret
+      >
+        <gl-disclosure-dropdown-item
+          v-if="noteUrl"
+          class="js-btn-copy-note-link"
+          :data-clipboard-text="noteUrl"
+          @action="onCopyUrl"
+        >
+          <template #list-item> {{ __('Copy link') }} </template>
+        </gl-disclosure-dropdown-item>
+        <gl-disclosure-dropdown-group v-if="canReportAsAbuse || canEdit" bordered>
+          <gl-disclosure-dropdown-item
+            v-if="canReportAsAbuse"
+            data-testid="report-abuse-button"
+            @action="onAbuse"
+          >
+            <template #list-item> {{ $options.i18n.reportAbuse }} </template>
+          </gl-disclosure-dropdown-item>
+          <gl-disclosure-dropdown-item
+            v-if="canEdit"
+            class="js-note-delete"
+            variant="danger"
+            @action="onDelete"
+          >
+            <template #list-item> {{ __('Delete comment') }} </template>
+          </gl-disclosure-dropdown-item>
+        </gl-disclosure-dropdown-group>
+      </gl-disclosure-dropdown>
+    </div>
+    <abuse-category-selector
+      v-if="canReportAsAbuse && isReportAbuseDrawerOpen"
+      :reported-user-id="authorId"
+      :reported-from-url="noteUrl"
+      :show-drawer="isReportAbuseDrawerOpen"
+      @close-drawer="toggleReportAbuseDrawer(false)"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/commit/components/notes/note_body.vue b/app/assets/javascripts/commit/components/notes/note_body.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c1a6181ceedbb0721177265b146cf8e937f9b978
--- /dev/null
+++ b/app/assets/javascripts/commit/components/notes/note_body.vue
@@ -0,0 +1,132 @@
+<script>
+import SafeHtml from '~/vue_shared/directives/safe_html';
+import { __ } from '~/locale';
+import { renderGFM } from '~/behaviors/markdown/render_gfm';
+import NoteAttachment from '~/notes/components/note_attachment.vue';
+import NoteEditedText from '~/notes/components/note_edited_text.vue';
+import AwardsList from '~/vue_shared/components/awards_list.vue';
+import NoteForm from './note_form.vue';
+
+export default {
+  components: {
+    AwardsList,
+    NoteEditedText,
+    NoteAttachment,
+    NoteForm,
+  },
+  directives: {
+    SafeHtml,
+  },
+  props: {
+    note: {
+      type: Object,
+      required: true,
+    },
+    canEdit: {
+      type: Boolean,
+      required: true,
+    },
+    isEditing: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    autosaveKey: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    restoreFromAutosave: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    noteBody() {
+      return this.note.note;
+    },
+    saveButtonTitle() {
+      return this.note.internal ? __('Save internal note') : __('Save comment');
+    },
+    currentUserId() {
+      return window.gon?.current_user_id;
+    },
+  },
+  watch: {
+    note: {
+      async handler() {
+        await this.$nextTick();
+        this.renderGFM();
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  methods: {
+    renderGFM() {
+      renderGFM(this.$refs['note-body']);
+    },
+    handleFormUpdate(noteText, parentElement, callback) {
+      this.$emit('handleFormUpdate', { noteText, parentElement, callback });
+    },
+    formCancelHandler(shouldConfirm, isDirty) {
+      this.$emit('cancelForm', { shouldConfirm, isDirty });
+    },
+  },
+  safeHtmlConfig: {
+    ADD_TAGS: ['use', 'gl-emoji', 'copy-code'],
+  },
+};
+</script>
+
+<template>
+  <div
+    ref="note-body"
+    :class="{
+      'js-task-list-container': canEdit,
+    }"
+    class="note-body"
+  >
+    <div v-safe-html:[$options.safeHtmlConfig]="note.note_html" class="note-text md"></div>
+    <note-form
+      v-if="isEditing"
+      ref="noteForm"
+      :note-body="noteBody"
+      :note-id="note.id"
+      :note="note"
+      :save-button-title="saveButtonTitle"
+      :autosave-key="autosaveKey"
+      :restore-from-autosave="restoreFromAutosave"
+      @handleFormUpdate="handleFormUpdate"
+      @cancelForm="formCancelHandler"
+    />
+    <!-- eslint-disable vue/no-mutating-props -->
+    <textarea
+      v-if="canEdit"
+      v-model="note.note"
+      :data-update-url="note.path"
+      class="hidden js-task-list-field"
+      dir="auto"
+    ></textarea>
+    <!-- eslint-enable vue/no-mutating-props -->
+    <note-edited-text
+      v-if="note.last_edited_at && note.last_edited_at !== note.created_at"
+      :edited-at="note.last_edited_at"
+      :edited-by="note.last_edited_by"
+      :action-text="__('Edited')"
+      class="note_edited_ago"
+    />
+    <div v-if="note.award_emoji && note.award_emoji.length" class="note-awards">
+      <awards-list
+        :note-id="note.id"
+        :note-author-id="note.author.id"
+        :awards="note.award_emoji"
+        :can-award-emoji="note.current_user.can_award_emoji"
+        :current-user-id="currentUserId"
+        @award="$emit('award', $event)"
+      />
+    </div>
+    <note-attachment v-if="note.attachment" :attachment="note.attachment" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/commit/components/notes/note_form.vue b/app/assets/javascripts/commit/components/notes/note_form.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c9e62da97621296195a9bc9bdc2b9d0e33bbea61
--- /dev/null
+++ b/app/assets/javascripts/commit/components/notes/note_form.vue
@@ -0,0 +1,245 @@
+<script>
+import { GlButton, GlSprintf, GlLink } from '@gitlab/ui';
+import { mapState } from 'pinia';
+import { __ } from '~/locale';
+import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
+import { trackSavedUsingEditor } from '~/vue_shared/components/markdown/tracking';
+import eventHub from '~/notes/event_hub';
+import { COMMENT_FORM } from '~/notes/i18n';
+import { useDiscussions } from '~/rapid_diffs/stores/discussions';
+
+export default {
+  i18n: COMMENT_FORM,
+  name: 'NoteForm',
+  components: {
+    MarkdownEditor,
+    GlButton,
+    GlSprintf,
+    GlLink,
+  },
+  inject: {
+    endpoints: {
+      type: Object,
+    },
+    noteableType: {
+      type: String,
+    },
+  },
+  props: {
+    noteBody: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    noteId: {
+      type: [String, Number],
+      required: false,
+      default: '',
+    },
+    saveButtonTitle: {
+      type: String,
+      required: false,
+      default: __('Save comment'),
+    },
+    discussion: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    autosaveKey: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    autofocus: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    restoreFromAutosave: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      updatedNoteBody: this.noteBody,
+      conflictWhileEditing: false,
+      isSubmitting: false,
+      isSubmittingWithKeydown: false,
+      formFieldProps: {
+        id: 'note_note',
+        name: 'note[note]',
+        'aria-label': __('Reply to comment'),
+        placeholder: this.$options.i18n.bodyPlaceholder,
+        class: 'note-textarea js-gfm-input js-note-text markdown-area js-vue-issue-note-form',
+        'data-testid': 'reply-field',
+      },
+    };
+  },
+  computed: {
+    ...mapState(useDiscussions, ['getLastEditableNote']),
+    autocompleteDataSources() {
+      return gl.GfmAutoComplete?.dataSources;
+    },
+    noteHash() {
+      if (this.noteId) {
+        return `#note_${this.noteId}`;
+      }
+      return '#';
+    },
+    markdownPreviewPath() {
+      return this.endpoints.previewMarkdown;
+    },
+    markdownDocsPath() {
+      return this.endpoints.markdownDocs;
+    },
+    isDisabled() {
+      return !this.updatedNoteBody.length || this.isSubmitting;
+    },
+    isInternalNote() {
+      return this.discussion.confidential;
+    },
+    changedCommentText() {
+      return {
+        text: __(
+          'This comment changed after you started editing it. Review the %{startTag}updated comment%{endTag} to ensure information is not lost.',
+        ),
+        placeholder: { link: ['startTag', 'endTag'] },
+      };
+    },
+    shouldDisableField() {
+      return this.isSubmitting;
+    },
+  },
+  watch: {
+    noteBody() {
+      if (this.updatedNoteBody === this.noteBody) {
+        this.updatedNoteBody = this.noteBody;
+      } else {
+        this.conflictWhileEditing = true;
+      }
+    },
+  },
+  mounted() {
+    this.updatePlaceholder();
+  },
+  methods: {
+    editMyLastNote() {
+      if (this.updatedNoteBody === '') {
+        const lastNoteInDiscussion = this.getLastEditableNote(this.discussion);
+
+        if (lastNoteInDiscussion) {
+          this.cancelHandler();
+          eventHub.$emit('enterEditMode', {
+            noteId: lastNoteInDiscussion.id,
+          });
+        }
+      }
+    },
+    cancelHandler(shouldConfirm = false) {
+      // check if any dropdowns are active before sending the cancelation event
+      if (
+        !this.$refs.markdownEditor.$el
+          .querySelector('textarea')
+          ?.classList.contains('at-who-active')
+      ) {
+        this.$emit('cancelForm', shouldConfirm, this.noteBody !== this.updatedNoteBody);
+      }
+    },
+    updatePlaceholder() {
+      this.formFieldProps.placeholder = this.isInternalNote
+        ? this.$options.i18n.bodyPlaceholderInternal
+        : this.$options.i18n.bodyPlaceholder;
+    },
+    onInput(value) {
+      this.updatedNoteBody = value;
+    },
+    // eslint-disable-next-line vue/no-unused-properties -- public method
+    append(value) {
+      this.$refs.markdownEditor.append(value);
+    },
+    handleKeySubmit(forceUpdate = false) {
+      if (!forceUpdate) {
+        this.handleAddToReview();
+      } else {
+        this.isSubmittingWithKeydown = true;
+        this.handleUpdate();
+      }
+      this.updatedNoteBody = '';
+    },
+    handleUpdate() {
+      this.isSubmitting = true;
+      trackSavedUsingEditor(
+        this.$refs.markdownEditor.isContentEditorActive,
+        `${this.noteableType}_note`,
+      );
+
+      this.$emit('handleFormUpdate', this.updatedNoteBody, this.$refs.editNoteForm, () => {
+        this.isSubmitting = false;
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div ref="editNoteForm" class="note-edit-form current-note-edit-form js-discussion-note-form">
+    <div v-if="conflictWhileEditing" class="js-conflict-edit-warning alert alert-danger">
+      <gl-sprintf :message="changedCommentText.text" :placeholders="changedCommentText.placeholder">
+        <template #link="{ content }">
+          <gl-link :href="noteHash" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </div>
+    <div class="flash-container"></div>
+    <form class="edit-note common-note-form js-quick-submit gfm-form">
+      <markdown-editor
+        ref="markdownEditor"
+        :value="updatedNoteBody"
+        :render-markdown-path="markdownPreviewPath"
+        :markdown-docs-path="markdownDocsPath"
+        :noteable-type="noteableType"
+        :form-field-props="formFieldProps"
+        :autosave-key="autosaveKey"
+        :autocomplete-data-sources="autocompleteDataSources"
+        :disabled="shouldDisableField"
+        supports-quick-actions
+        :autofocus="autofocus"
+        :restore-from-autosave="restoreFromAutosave"
+        @keydown.shift.meta.enter="handleKeySubmit((forceUpdate = true))"
+        @keydown.shift.ctrl.enter="handleKeySubmit((forceUpdate = true))"
+        @keydown.meta.enter.exact="handleKeySubmit()"
+        @keydown.ctrl.enter.exact="handleKeySubmit()"
+        @keydown.exact.up="editMyLastNote()"
+        @keydown.exact.esc="cancelHandler(true)"
+        @input="onInput"
+        @handleSuggestDismissed="() => $emit('handleSuggestDismissed')"
+      />
+      <div class="note-form-actions gl-font-size-0">
+        <div class="gl-display-sm-flex gl-font-size-0 gl-flex-wrap">
+          <gl-button
+            :disabled="isDisabled"
+            category="primary"
+            variant="confirm"
+            data-testid="reply-comment-button"
+            class="js-vue-issue-save js-comment-button gl-mb-3 @sm/panel:gl-mb-0 @sm/panel:gl-mr-3"
+            @click="handleUpdate()"
+          >
+            {{ saveButtonTitle }}
+          </gl-button>
+          <gl-button
+            class="note-edit-cancel js-close-discussion-note-form"
+            category="secondary"
+            variant="default"
+            data-testid="cancel"
+            @click="cancelHandler(true)"
+          >
+            {{ __('Cancel') }}
+          </gl-button>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/assets/javascripts/commit/components/notes/note_header.vue b/app/assets/javascripts/commit/components/notes/note_header.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0f10395ce1850343a713d2e4022c2653fd58cde9
--- /dev/null
+++ b/app/assets/javascripts/commit/components/notes/note_header.vue
@@ -0,0 +1,205 @@
+<script>
+import { GlBadge, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import { isGid, getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { s__ } from '~/locale';
+import ImportedBadge from '~/vue_shared/components/imported_badge.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+
+export default {
+  components: {
+    ImportedBadge,
+    TimeAgoTooltip,
+    GlBadge,
+    GlLoadingIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    author: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    createdAt: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    actionText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    noteId: {
+      type: [String, Number],
+      required: false,
+      default: null,
+    },
+    showSpinner: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    isInternalNote: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isImported: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isSystemNote: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    noteUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      isUsernameLinkHovered: false,
+    };
+  },
+  computed: {
+    authorId() {
+      return getIdFromGraphQLId(this.author.id);
+    },
+    authorHref() {
+      return this.author.path || this.author.webUrl;
+    },
+    noteTimestampLink() {
+      if (this.noteUrl) return this.noteUrl;
+
+      if (this.noteId) {
+        let { noteId } = this;
+
+        if (isGid(noteId)) noteId = getIdFromGraphQLId(noteId);
+
+        return `#note_${noteId}`;
+      }
+
+      return undefined;
+    },
+    hasAuthor() {
+      return this.author && Object.keys(this.author).length;
+    },
+    authorLinkClasses() {
+      return {
+        hover: this.isUsernameLinkHovered,
+        'text-underline': this.isUsernameLinkHovered,
+        'author-name-link': true,
+        'js-user-link': true,
+        'gl-overflow-hidden': true,
+        'gl-break-words': true,
+      };
+    },
+    authorName() {
+      return this.author.name;
+    },
+    internalNoteTooltip() {
+      return s__('Notes|This internal note will always remain confidential');
+    },
+  },
+  methods: {
+    handleUsernameMouseEnter() {
+      this.$refs.authorNameLink.dispatchEvent(new Event('mouseenter'));
+      this.isUsernameLinkHovered = true;
+    },
+    handleUsernameMouseLeave() {
+      this.$refs.authorNameLink.dispatchEvent(new Event('mouseleave'));
+      this.isUsernameLinkHovered = false;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="note-header-info">
+    <template v-if="hasAuthor">
+      <a
+        ref="authorNameLink"
+        :href="authorHref"
+        :class="authorLinkClasses"
+        :data-user-id="authorId"
+        :data-username="author.username"
+      >
+        <span
+          class="note-header-author-name gl-font-bold"
+          data-testid="author-name"
+          v-text="authorName"
+        ></span>
+      </a>
+      <span
+        v-if="!isSystemNote"
+        class="author-username -gl-m-2 gl-mr-0 gl-hidden gl-truncate !gl-whitespace-nowrap gl-p-2 @md/panel:gl-inline"
+      >
+        <a
+          ref="authorUsernameLink"
+          class="author-username-link focus:gl-focus"
+          :href="authorHref"
+          @mouseenter="handleUsernameMouseEnter"
+          @mouseleave="handleUsernameMouseLeave"
+          ><span class="note-headline-light">@{{ author.username }}</span>
+        </a>
+        <slot name="note-header-info"></slot>
+      </span>
+    </template>
+    <span v-else>{{ __('A deleted user') }}</span>
+    <span class="note-headline-light note-headline-meta">
+      <span
+        v-if="$scopedSlots.default"
+        class="system-note-message"
+        :class="!isSystemNote && 'md:-gl-ml-2'"
+        data-testid="system-note-content"
+      >
+        <slot></slot>
+      </span>
+      <template v-if="createdAt">
+        <span ref="actionText" class="system-note-separator">
+          <template v-if="actionText">{{ actionText }}</template>
+        </span>
+        <time-ago-tooltip
+          v-if="noteTimestampLink"
+          ref="noteTimestampLink"
+          :href="noteTimestampLink"
+          class="note-timestamp system-note-separator"
+          :time="createdAt"
+          tooltip-placement="bottom"
+          @click="$emit('timestampClick', $event)"
+        />
+        <time-ago-tooltip v-else ref="noteTimestamp" :time="createdAt" tooltip-placement="bottom" />
+      </template>
+
+      <template v-if="isImported">
+        <span v-if="isSystemNote">&middot;</span>
+        <imported-badge :text-only="isSystemNote" />
+      </template>
+
+      <gl-badge
+        v-if="isInternalNote"
+        v-gl-tooltip:tooltipcontainer.bottom
+        data-testid="internal-note-indicator"
+        variant="warning"
+        class="gl-ml-2"
+        :title="internalNoteTooltip"
+      >
+        {{ __('Internal note') }}
+      </gl-badge>
+      <slot name="extra-controls"></slot>
+      <gl-loading-icon
+        v-if="showSpinner"
+        ref="spinner"
+        size="sm"
+        class="editing-spinner"
+        :label="__('Comment is being updated')"
+      />
+    </span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/commit/components/notes/note_signed_out_widget.vue b/app/assets/javascripts/commit/components/notes/note_signed_out_widget.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1a0dc8859fe4776ef0f8cb3b547e6cf92ad76e31
--- /dev/null
+++ b/app/assets/javascripts/commit/components/notes/note_signed_out_widget.vue
@@ -0,0 +1,41 @@
+<script>
+import SafeHtml from '~/vue_shared/directives/safe_html';
+import { __, sprintf } from '~/locale';
+
+export default {
+  directives: {
+    SafeHtml,
+  },
+  inject: {
+    endpoints: {
+      type: Object,
+    },
+  },
+  computed: {
+    registerLink() {
+      return this.endpoints.registerPath;
+    },
+    signInLink() {
+      return this.endpoints.signInPath;
+    },
+    signedOutText() {
+      return sprintf(
+        __(
+          'Please %{startTagRegister}register%{endRegisterTag} or %{startTagSignIn}sign in%{endSignInTag} to reply',
+        ),
+        {
+          startTagRegister: `<a href="${this.registerLink}">`,
+          startTagSignIn: `<a href="${this.signInLink}">`,
+          endRegisterTag: '</a>',
+          endSignInTag: '</a>',
+        },
+        false,
+      );
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-safe-html="signedOutText" class="gl-grow gl-text-center gl-text-subtle"></div>
+</template>
diff --git a/app/assets/javascripts/commit/components/notes/noteable_discussion.vue b/app/assets/javascripts/commit/components/notes/noteable_discussion.vue
new file mode 100644
index 0000000000000000000000000000000000000000..08e11d5748cdc319333754f792fb21c92a4ea643
--- /dev/null
+++ b/app/assets/javascripts/commit/components/notes/noteable_discussion.vue
@@ -0,0 +1,226 @@
+<script>
+import { GlTooltipDirective } from '@gitlab/ui';
+import { mapActions } from 'pinia';
+import { createAlert } from '~/alert';
+import { getAutoSaveKeyFromDiscussion } from '~/lib/utils/autosave';
+import { isLoggedIn } from '~/lib/utils/common_utils';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
+import { ignoreWhilePending } from '~/lib/utils/ignore_while_pending';
+import { s__, __, sprintf } from '~/locale';
+import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
+import { detectAndConfirmSensitiveTokens } from '~/lib/utils/secret_detection';
+import eventHub from '~/notes/event_hub';
+import DiscussionReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
+import { createNoteErrorMessages } from '~/notes/utils';
+import { useDiscussions } from '~/rapid_diffs/stores/discussions';
+import DiscussionNotes from './discussion_notes.vue';
+import NoteForm from './note_form.vue';
+import NoteSignedOutWidget from './note_signed_out_widget.vue';
+
+export default {
+  name: 'NoteableDiscussion',
+  components: {
+    DiscussionReplyPlaceholder,
+    NoteSignedOutWidget,
+    NoteForm,
+    TimelineEntryItem,
+    DiscussionNotes,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  inject: {
+    userPermissions: {
+      type: Object,
+    },
+    endpoints: {
+      type: Object,
+    },
+  },
+  props: {
+    discussion: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isReplying: false,
+    };
+  },
+  computed: {
+    isLoggedIn() {
+      return isLoggedIn();
+    },
+    commentType() {
+      return this.discussion.internal ? __('internal note') : __('comment');
+    },
+    autosaveKey() {
+      return getAutoSaveKeyFromDiscussion(this.discussion);
+    },
+    newNotePath() {
+      // TODO: fix after we support adding discussions
+      return this.endpoints.createNote;
+    },
+    saveButtonTitle() {
+      return this.discussion.internal ? __('Reply internally') : __('Reply');
+    },
+    isDiscussionInternal() {
+      return this.discussion.notes[0]?.internal;
+    },
+    discussionHolderClass() {
+      return {
+        'is-replying': this.isReplying,
+        'internal-note': this.isDiscussionInternal,
+      };
+    },
+  },
+  created() {
+    eventHub.$on('startReplying', this.onStartReplying);
+  },
+  beforeDestroy() {
+    eventHub.$off('startReplying', this.onStartReplying);
+  },
+  methods: {
+    ...mapActions(useDiscussions, [
+      'saveNote',
+      'expandDiscussionReplies',
+      'toggleDiscussionReplies',
+    ]),
+    showReplyForm(text) {
+      this.isReplying = true;
+      this.expandDiscussionReplies(this.discussion);
+      if (typeof text !== 'undefined') {
+        this.$nextTick(() => {
+          this.$refs.noteForm.append(text);
+        });
+      }
+    },
+    cancelReplyForm: ignoreWhilePending(async function cancelReplyForm(shouldConfirm, isDirty) {
+      if (shouldConfirm && isDirty) {
+        const msg = sprintf(
+          s__('Notes|Are you sure you want to cancel creating this %{commentType}?'),
+          { commentType: this.commentType },
+        );
+
+        const confirmed = await confirmAction(msg, {
+          primaryBtnText: __('Discard changes'),
+          cancelBtnText: __('Continue editing'),
+        });
+
+        if (!confirmed) {
+          return;
+        }
+      }
+
+      this.isReplying = false;
+    }),
+    async saveReply(noteText, form, callback) {
+      if (!noteText) {
+        this.cancelReplyForm();
+        callback();
+        return;
+      }
+
+      const confirmSubmit = await detectAndConfirmSensitiveTokens({ content: noteText });
+
+      if (!confirmSubmit) {
+        callback();
+        return;
+      }
+
+      const postData = {
+        in_reply_to_discussion_id: this.discussion.reply_id,
+        target_type: this.getNoteableData.targetType,
+        note: { note: noteText },
+      };
+
+      if (this.discussion.for_commit) {
+        postData.note_project_id = this.discussion.project_id;
+      }
+
+      const replyData = {
+        endpoint: this.newNotePath,
+        flashContainer: this.$el,
+        data: postData,
+      };
+
+      this.saveNote(replyData)
+        .then(() => {
+          this.isReplying = false;
+          callback();
+        })
+        .catch((err) => {
+          this.handleSaveError(err); // The 'err' parameter is being used in JH, don't remove it
+          callback(err);
+        });
+    },
+    handleSaveError({ response }) {
+      const errorMessage = createNoteErrorMessages(response.data, response.status)[0];
+
+      createAlert({
+        message: errorMessage,
+        parent: this.$el,
+      });
+    },
+    onStartReplying(discussionId) {
+      if (this.discussion.id === discussionId) {
+        this.showReplyForm();
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <timeline-entry-item class="note note-discussion">
+    <div class="timeline-content">
+      <div
+        :data-discussion-id="discussion.id"
+        class="discussion js-discussion-container"
+        data-testid="discussion-content"
+      >
+        <div class="discussion-body">
+          <div class="card discussion-wrapper">
+            <discussion-notes
+              :discussion="discussion"
+              @toggleDiscussionReplies="toggleDiscussionReplies(discussion)"
+              @startReplying="showReplyForm"
+            >
+              <template #avatar-badge>
+                <slot name="avatar-badge"></slot>
+              </template>
+              <template #footer="{ showReplies }">
+                <li
+                  v-if="showReplies"
+                  data-testid="reply-wrapper"
+                  class="discussion-reply-holder gl-bg-subtle gl-clearfix"
+                  :class="discussionHolderClass"
+                >
+                  <div class="flash-container !gl-mt-0 gl-mb-2"></div>
+                  <div
+                    v-if="!isReplying && userPermissions.can_create_note"
+                    class="discussion-with-resolve-btn gl-clearfix"
+                  >
+                    <discussion-reply-placeholder @focus="showReplyForm" />
+                  </div>
+                  <note-form
+                    v-if="isReplying"
+                    ref="noteForm"
+                    :discussion="discussion"
+                    :save-button-title="saveButtonTitle"
+                    autofocus
+                    :autosave-key="autosaveKey"
+                    @handleFormUpdate="saveReply"
+                    @cancelForm="cancelReplyForm"
+                  />
+                  <note-signed-out-widget v-if="!isLoggedIn" />
+                </li>
+              </template>
+            </discussion-notes>
+          </div>
+        </div>
+      </div>
+    </div>
+  </timeline-entry-item>
+</template>
diff --git a/app/assets/javascripts/commit/components/notes/noteable_note.vue b/app/assets/javascripts/commit/components/notes/noteable_note.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ad44789a167c5c779703e33ebc0b8732c79ecc21
--- /dev/null
+++ b/app/assets/javascripts/commit/components/notes/noteable_note.vue
@@ -0,0 +1,346 @@
+<script>
+import { GlAvatarLink, GlAvatar } from '@gitlab/ui';
+import { mapState, mapActions } from 'pinia';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import SafeHtml from '~/vue_shared/directives/safe_html';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
+import { createAlert } from '~/alert';
+import { HTTP_STATUS_GONE } from '~/lib/utils/http_status';
+import { ignoreWhilePending } from '~/lib/utils/ignore_while_pending';
+import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
+import { __, sprintf } from '~/locale';
+import { renderGFM } from '~/behaviors/markdown/render_gfm';
+import { detectAndConfirmSensitiveTokens } from '~/lib/utils/secret_detection';
+import { useDiscussions } from '~/rapid_diffs/stores/discussions';
+import eventHub from '~/notes/event_hub';
+import { renderMarkdown, updateNoteErrorMessage } from '~/notes/utils';
+import { isCurrentUser } from '~/lib/utils/common_utils';
+import NoteActions from './note_actions.vue';
+import NoteBody from './note_body.vue';
+import NoteHeader from './note_header.vue';
+
+export default {
+  name: 'NoteableNote',
+  components: {
+    NoteHeader,
+    NoteActions,
+    NoteBody,
+    TimelineEntryItem,
+    GlAvatarLink,
+    GlAvatar,
+  },
+  directives: {
+    SafeHtml,
+  },
+  inject: {
+    reportAbusePath: {
+      default: '',
+    },
+  },
+  props: {
+    note: {
+      type: Object,
+      required: true,
+    },
+    showReplyButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    discussion: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    autosaveKey: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    restoreFromAutosave: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isEditingLocal: false,
+      isDeleting: false,
+      isRequesting: false,
+      oldContent: null,
+    };
+  },
+  computed: {
+    ...mapState(useDiscussions, ['targetNoteHash']),
+    isEditing: {
+      get() {
+        return this.note.isEditing ?? this.isEditingLocal;
+      },
+      set(value) {
+        this.isEditingLocal = value;
+        if (value) {
+          this.$emit('handleEdit');
+        } else {
+          this.$emit('cancelForm');
+        }
+      },
+    },
+    author() {
+      return this.note.author;
+    },
+    authorId() {
+      return getIdFromGraphQLId(this.author.id);
+    },
+    commentType() {
+      return this.note.internal ? __('internal note') : __('comment');
+    },
+    classNameBindings() {
+      return {
+        [`note-row-${this.note.id}`]: true,
+        'is-editing': this.isEditing && !this.isRequesting,
+        'is-requesting being-posted': this.isRequesting,
+        'disabled-content': this.isDeleting,
+        target: this.isTarget,
+        'is-editable': this.canEdit,
+      };
+    },
+    canAwardEmoji() {
+      return this.note.current_user?.can_award_emoji ?? false;
+    },
+    canEdit() {
+      return this.note.current_user?.can_edit ?? false;
+    },
+    canReportAsAbuse() {
+      return Boolean(this.reportAbusePath) && !isCurrentUser(this.authorId);
+    },
+    noteAnchorId() {
+      return `note_${this.note.id}`;
+    },
+    isTarget() {
+      return this.targetNoteHash === this.noteAnchorId;
+    },
+    discussionId() {
+      if (this.discussion) {
+        return this.discussion.id;
+      }
+      return '';
+    },
+  },
+  created() {
+    eventHub.$on('enterEditMode', ({ noteId }) => {
+      if (noteId === this.note.id) {
+        this.isEditing = true;
+        this.$el.scrollIntoView();
+      }
+    });
+  },
+
+  methods: {
+    ...mapActions(useDiscussions, ['deleteNote', 'removeNote', 'updateNote', 'toggleNoteAward']),
+    editHandler() {
+      this.isEditing = true;
+    },
+    async deleteHandler() {
+      const { commentType } = this;
+
+      const msg = sprintf(__('Are you sure you want to delete this %{commentType}?'), {
+        commentType,
+      });
+      const confirmed = await confirmAction(msg, {
+        primaryBtnVariant: 'danger',
+        primaryBtnText: this.note.internal ? __('Delete internal note') : __('Delete comment'),
+      });
+
+      if (confirmed) {
+        this.isDeleting = true;
+        this.$emit('handleDeleteNote', this.note);
+
+        this.deleteNote(this.note)
+          .then(() => {
+            this.isDeleting = false;
+          })
+          .catch(() => {
+            createAlert({
+              message: __('Something went wrong while deleting your note. Please try again.'),
+            });
+            this.isDeleting = false;
+          });
+      }
+    },
+    updateSuccess() {
+      this.isEditingLocal = false;
+      this.isRequesting = false;
+      this.oldContent = null;
+      renderGFM(this.$refs.noteBody.$el);
+      this.$emit('updateSuccess');
+    },
+    async formUpdateHandler({ noteText, callback }) {
+      this.$emit('handleUpdateNote', {
+        note: this.note,
+        noteText,
+        flashContainer: this.$el,
+        callback: () => this.updateSuccess(),
+        errorCallback: () => callback(),
+      });
+
+      const confirmSubmit = await detectAndConfirmSensitiveTokens({ content: noteText });
+
+      if (!confirmSubmit) {
+        callback();
+        return;
+      }
+
+      const data = {
+        endpoint: this.note.path,
+        note: {
+          target_id: this.note.noteable_id,
+          note: { note: noteText },
+        },
+      };
+
+      this.isRequesting = true;
+      this.oldContent = this.note.note_html;
+      // eslint-disable-next-line vue/no-mutating-props
+      this.note.note_html = renderMarkdown(noteText);
+
+      this.updateNote(data)
+        .then(() => {
+          this.updateSuccess();
+          callback();
+        })
+        .catch((e) => {
+          if (e.status === HTTP_STATUS_GONE) {
+            this.removeNote(this.note);
+            this.updateSuccess();
+            callback();
+          } else {
+            this.isRequesting = false;
+            this.isEditing = true;
+            this.setSelectedCommentPositionHover();
+            this.$nextTick(() => {
+              this.handleUpdateError(e); // The 'e' parameter is being used in JH, don't remove it
+              this.recoverNoteContent();
+              callback();
+            });
+          }
+        });
+    },
+    handleUpdateError(e) {
+      createAlert({
+        message: updateNoteErrorMessage(e),
+        parent: this.$el,
+      });
+    },
+    formCancelHandler: ignoreWhilePending(async function formCancelHandler({
+      shouldConfirm,
+      isDirty,
+    }) {
+      if (shouldConfirm && isDirty) {
+        const msg = sprintf(__('Are you sure you want to cancel editing this %{commentType}?'), {
+          commentType: this.commentType,
+        });
+        const confirmed = await confirmAction(msg, {
+          primaryBtnText: __('Cancel editing'),
+          primaryBtnVariant: 'danger',
+          secondaryBtnVariant: 'default',
+          secondaryBtnText: __('Continue editing'),
+          hideCancel: true,
+        });
+        if (!confirmed) return;
+      }
+      this.recoverNoteContent();
+      this.isEditing = false;
+    }),
+    recoverNoteContent() {
+      if (this.oldContent) {
+        // eslint-disable-next-line vue/no-mutating-props
+        this.note.note_html = this.oldContent;
+      }
+    },
+    onAward(awardName) {
+      this.toggleNoteAward(this.note, awardName);
+    },
+  },
+};
+</script>
+
+<template>
+  <timeline-entry-item
+    :id="noteAnchorId"
+    :class="{ ...classNameBindings, 'internal-note': note.internal }"
+    :data-award-url="note.toggle_award_path"
+    :data-note-id="note.id"
+    class="note note-wrapper note-comment"
+    data-testid="noteable-note-container"
+  >
+    <div class="timeline-avatar gl-float-left gl-pt-2">
+      <gl-avatar-link
+        :href="author.path"
+        :data-user-id="authorId"
+        :data-username="author.username"
+        class="js-user-link"
+      >
+        <gl-avatar
+          :src="author.avatar_url"
+          :entity-name="author.username"
+          :alt="author.name"
+          :size="24"
+        />
+        <slot name="avatar-badge"></slot>
+      </gl-avatar-link>
+    </div>
+    <div class="timeline-content">
+      <div class="note-header">
+        <note-header
+          :author="author"
+          :created-at="note.created_at"
+          :note-id="note.id"
+          :is-internal-note="note.internal"
+          :is-imported="note.imported"
+        >
+          <template #note-header-info>
+            <slot name="note-header-info"></slot>
+          </template>
+        </note-header>
+        <note-actions
+          :author-id="authorId"
+          :note-url="note.noteable_note_url"
+          :access-level="note.human_access"
+          :is-contributor="note.is_contributor"
+          :is-author="note.is_noteable_author"
+          :project-name="note.project_name"
+          :noteable-type="note.noteable_type"
+          :show-reply="showReplyButton"
+          :can-edit="canEdit"
+          :can-award-emoji="canAwardEmoji"
+          :can-delete="canEdit"
+          :can-report-as-abuse="canReportAsAbuse"
+          :discussion-id="discussionId"
+          @handleEdit="editHandler"
+          @handleDelete="deleteHandler"
+          @startReplying="$emit('startReplying')"
+          @award="onAward"
+        />
+      </div>
+      <div class="timeline-discussion-body">
+        <slot name="note-body">
+          <note-body
+            ref="noteBody"
+            :note="note"
+            :can-edit="canEdit"
+            :is-editing="isEditing"
+            :autosave-key="autosaveKey"
+            :restore-from-autosave="restoreFromAutosave"
+            @handleFormUpdate="formUpdateHandler"
+            @cancelForm="formCancelHandler"
+            @award="onAward"
+          />
+        </slot>
+        <div class="timeline-discussion-body-footer">
+          <slot name="after-note-body"></slot>
+        </div>
+      </div>
+    </div>
+  </timeline-entry-item>
+</template>
diff --git a/app/assets/javascripts/entrypoints/lookbook/rapid_diffs.js b/app/assets/javascripts/entrypoints/lookbook/rapid_diffs.js
index ab7f2f0e059b3c2b1d5dc8bb9403185b71d2547f..ff87777aba2e744e9b0f9e944e3aa60b97a5da1e 100644
--- a/app/assets/javascripts/entrypoints/lookbook/rapid_diffs.js
+++ b/app/assets/javascripts/entrypoints/lookbook/rapid_diffs.js
@@ -1,5 +1,5 @@
 import { DiffFile } from '~/rapid_diffs/web_components/diff_file';
-import { VIEWER_ADAPTERS } from '~/rapid_diffs/app/adapters';
+import { VIEWER_ADAPTERS } from '~/rapid_diffs/app/adapter_configs/base';
 
 customElements.define('diff-file', DiffFile);
 customElements.define(
diff --git a/app/assets/javascripts/pages/projects/commit/rapid_diffs/index.js b/app/assets/javascripts/pages/projects/commit/rapid_diffs/index.js
index f994c4302e0e04617eaa9cc415895ca71c98795f..c752779a0b760b9fda833d41c8841f34efb01249 100644
--- a/app/assets/javascripts/pages/projects/commit/rapid_diffs/index.js
+++ b/app/assets/javascripts/pages/projects/commit/rapid_diffs/index.js
@@ -1,9 +1,10 @@
 import initCommitActions from '~/projects/commit';
 import { initCommitBoxInfo } from '~/projects/commit_box/info';
-import { createRapidDiffsApp } from '~/rapid_diffs';
+import { createRapidDiffsCommitsApp } from '~/rapid_diffs/commits_app';
 
 initCommitBoxInfo();
 initCommitActions();
 
-const app = createRapidDiffsApp();
+const app = createRapidDiffsCommitsApp();
 app.init();
+app.fetchDiscussions();
diff --git a/app/assets/javascripts/rapid_diffs/adapters/discussions.js b/app/assets/javascripts/rapid_diffs/adapters/discussions.js
new file mode 100644
index 0000000000000000000000000000000000000000..33fd42c6aeabdb888de78bbccc07ba4075ae31f8
--- /dev/null
+++ b/app/assets/javascripts/rapid_diffs/adapters/discussions.js
@@ -0,0 +1,148 @@
+import Vue from 'vue';
+import { MOUNTED } from '~/rapid_diffs/adapter_events';
+import { useDiscussions } from '~/rapid_diffs/stores/discussions';
+import { pinia } from '~/pinia/instance';
+import DiffDiscussions from '~/commit/components/notes/diff_discussions.vue';
+
+function findLineRow(element, oldLine, newLine) {
+  return element
+    .querySelector(
+      `[data-position="${oldLine ? 'old' : 'new'}"] [data-line-number="${oldLine || newLine}"]`,
+    )
+    .closest('tr');
+}
+
+function mountVueApp(el, id, appData) {
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    pinia,
+    provide() {
+      return {
+        noteableType: appData.noteableType,
+        userPermissions: appData.userPermissions,
+        endpoints: {
+          previewMarkdown: appData.previewMarkdownEndpoint,
+          markdownDocs: appData.markdownDocsPath,
+          register: appData.registerPath,
+          signIn: appData.signInPath,
+        },
+      };
+    },
+    computed: {
+      // this way we ensure reactivity continues to work without rerendering the whole component
+      discussion() {
+        return useDiscussions().getDiscussionById(id);
+      },
+    },
+    render(h) {
+      return h(DiffDiscussions, {
+        props: {
+          discussions: [this.discussion],
+        },
+      });
+    },
+  });
+}
+
+function addInlineCell(lineRow) {
+  const discussionRow = lineRow.closest('tbody').insertRow(lineRow.rowIndex);
+  discussionRow.classList.add('rd-diff-discussions-row');
+  const cell = document.createElement('td');
+  cell.colSpan = lineRow.querySelectorAll('td').length;
+  cell.classList.add('notes_holder');
+  discussionRow.appendChild(cell);
+  return cell;
+}
+
+function addParallelCells(lineRow) {
+  const discussionRow = lineRow.closest('tbody').insertRow(lineRow.rowIndex);
+  discussionRow.classList.add('rd-diff-discussions-row');
+  discussionRow.classList.add('rd-diff-discussions-row-parallel');
+  const leftCell = document.createElement('td');
+  const rightCell = document.createElement('td');
+  const span = lineRow.querySelectorAll('td').length / 2;
+  leftCell.colSpan = span;
+  rightCell.colSpan = span;
+  leftCell.classList.add('notes_holder');
+  rightCell.classList.add('notes_holder');
+  discussionRow.appendChild(leftCell);
+  discussionRow.appendChild(rightCell);
+  return [leftCell, rightCell];
+}
+
+function mountParallelDiscussion({ element, id, position, appData }) {
+  if (document.querySelector(`[data-discussion-id="${id}"]`)) return;
+  const { old_line: oldLine, new_line: newLine } = position;
+  const lineRow = findLineRow(element, oldLine, newLine);
+  const discussionRow = lineRow.nextElementSibling;
+  let cell;
+  if (!discussionRow || !discussionRow.classList.contains('rd-diff-discussions-row')) {
+    if (oldLine && newLine) {
+      cell = addInlineCell(lineRow);
+    } else if (oldLine) {
+      [cell] = addParallelCells(lineRow);
+    } else {
+      [, cell] = addParallelCells(lineRow);
+    }
+  } else if (oldLine) {
+    cell = discussionRow.querySelector('td');
+  } else {
+    cell = discussionRow.querySelector('td:last-child');
+  }
+  const mountTarget = document.createElement('div');
+  cell.appendChild(mountTarget);
+  mountVueApp(mountTarget, id, appData);
+}
+
+function mountInlineDiscussion({ element, id, position, appData }) {
+  if (document.querySelector(`[data-discussion-id="${id}"]`)) return;
+  const { old_line: oldLine, new_line: newLine } = position;
+  const lineRow = findLineRow(element, oldLine, newLine);
+  const cell = addInlineCell(lineRow);
+  const mountTarget = document.createElement('div');
+  cell.appendChild(mountTarget);
+  mountVueApp(mountTarget, id, appData);
+}
+
+function createDiscussionsWatcher(oldPath, newPath, callback) {
+  const store = useDiscussions(pinia);
+  return store.$subscribe(
+    () => {
+      const matchedDiscussions = store.discussions.filter((discussion) => {
+        if (!discussion.diff_discussion) return false;
+        return discussion.position.old_path === oldPath && discussion.position.new_path === newPath;
+      });
+      matchedDiscussions.forEach(callback);
+    },
+    { immediate: true },
+  );
+}
+
+export const parallelDiscussionsAdapter = {
+  [MOUNTED]() {
+    const { diffElement: element, appData } = this;
+    this.sink.stopWatchingNotes = createDiscussionsWatcher(
+      this.data.oldPath,
+      this.data.newPath,
+      ({ id, position }) => {
+        mountParallelDiscussion({ element, id, position, appData });
+      },
+    );
+    return this.sink.stopWatchingNotes;
+  },
+};
+
+export const inlineDiscussionsAdapter = {
+  [MOUNTED]() {
+    const { diffElement: element, appData } = this;
+    this.sink.stopWatchingNotes = createDiscussionsWatcher(
+      this.data.oldPath,
+      this.data.newPath,
+      ({ id, position }) => {
+        mountInlineDiscussion({ element, id, position, appData });
+      },
+    );
+    return this.sink.stopWatchingNotes;
+  },
+};
diff --git a/app/assets/javascripts/rapid_diffs/app/adapters.js b/app/assets/javascripts/rapid_diffs/app/adapter_configs/base.js
similarity index 100%
rename from app/assets/javascripts/rapid_diffs/app/adapters.js
rename to app/assets/javascripts/rapid_diffs/app/adapter_configs/base.js
diff --git a/app/assets/javascripts/rapid_diffs/app/adapter_configs/commits.js b/app/assets/javascripts/rapid_diffs/app/adapter_configs/commits.js
new file mode 100644
index 0000000000000000000000000000000000000000..594a3a68598cddabd59788f1cfb7267913f0b7c2
--- /dev/null
+++ b/app/assets/javascripts/rapid_diffs/app/adapter_configs/commits.js
@@ -0,0 +1,11 @@
+import { VIEWER_ADAPTERS } from '~/rapid_diffs/app/adapter_configs/base';
+import {
+  inlineDiscussionsAdapter,
+  parallelDiscussionsAdapter,
+} from '~/rapid_diffs/adapters/discussions';
+
+export const adapters = {
+  ...VIEWER_ADAPTERS,
+  text_inline: [...VIEWER_ADAPTERS.text_inline, inlineDiscussionsAdapter],
+  text_parallel: [...VIEWER_ADAPTERS.text_parallel, parallelDiscussionsAdapter],
+};
diff --git a/app/assets/javascripts/rapid_diffs/app/index.js b/app/assets/javascripts/rapid_diffs/app/index.js
index 119f52f8f3a39be25e601584cd443f92c315b729..e7cc6846733a9db88245b484e8cc9955d1a76402 100644
--- a/app/assets/javascripts/rapid_diffs/app/index.js
+++ b/app/assets/javascripts/rapid_diffs/app/index.js
@@ -10,7 +10,7 @@ import { createAlert } from '~/alert';
 import { __ } from '~/locale';
 import { fixWebComponentsStreamingOnSafari } from '~/rapid_diffs/app/quirks/safari_fix';
 import { DIFF_FILE_MOUNTED } from '~/rapid_diffs/dom_events';
-import { VIEWER_ADAPTERS } from '~/rapid_diffs/app/adapters';
+import { VIEWER_ADAPTERS } from '~/rapid_diffs/app/adapter_configs/base';
 import { camelizeKeys } from '~/lib/utils/object_utils';
 import { disableBrokenContentVisibility } from '~/rapid_diffs/app/quirks/content_visibility_fix';
 import { useApp } from '~/rapid_diffs/stores/app';
diff --git a/app/assets/javascripts/rapid_diffs/commits_app.js b/app/assets/javascripts/rapid_diffs/commits_app.js
new file mode 100644
index 0000000000000000000000000000000000000000..e0c0267f5f2c61cb1dc848ae3000ab532797dcf7
--- /dev/null
+++ b/app/assets/javascripts/rapid_diffs/commits_app.js
@@ -0,0 +1,16 @@
+import { RapidDiffsFacade } from '~/rapid_diffs/app';
+import { adapters } from '~/rapid_diffs/app/adapter_configs/commits';
+import { useDiscussions } from '~/rapid_diffs/stores/discussions';
+import { pinia } from '~/pinia/instance';
+
+class RapidDiffsCommitsApp extends RapidDiffsFacade {
+  adapterConfig = adapters;
+
+  fetchDiscussions() {
+    return useDiscussions(pinia).fetchDiscussions(this.appData.notesEndpoint);
+  }
+}
+
+export const createRapidDiffsCommitsApp = (options) => {
+  return new RapidDiffsCommitsApp(options);
+};
diff --git a/app/assets/javascripts/rapid_diffs/stores/discussions.js b/app/assets/javascripts/rapid_diffs/stores/discussions.js
new file mode 100644
index 0000000000000000000000000000000000000000..d3c3f0f553f4aa3ff764d3a777676ad23a74f75b
--- /dev/null
+++ b/app/assets/javascripts/rapid_diffs/stores/discussions.js
@@ -0,0 +1,85 @@
+import { defineStore } from 'pinia';
+import axios from '~/lib/utils/axios_utils';
+import { isCurrentUser } from '~/lib/utils/common_utils';
+
+export const useDiscussions = defineStore('discussions', {
+  state() {
+    return {
+      discussions: [],
+    };
+  },
+  actions: {
+    async fetchDiscussions(url) {
+      const response = await axios.get(url);
+      this.discussions = response.data.discussions;
+    },
+    setDiscussionProperty(discussion, key, value) {
+      const newDiscussions = this.discussions.slice(0);
+      newDiscussions.splice(this.discussions.indexOf(discussion), 1, {
+        ...discussion,
+        [key]: value,
+      });
+      this.discussions = newDiscussions;
+    },
+    setNoteProperty(note, key, value) {
+      const discussion = this.getDiscussionById(note.discussion_id);
+      const newNotes = discussion.notes.slice(0);
+      newNotes.splice(discussion.notes.indexOf(note), 1, {
+        ...note,
+        [key]: value,
+      });
+      this.setDiscussionProperty(discussion, 'notes', newNotes);
+    },
+    toggleDiscussionReplies(discussion) {
+      this.setDiscussionProperty(discussion, 'repliesCollapsed', !discussion.repliesCollapsed);
+    },
+    expandDiscussionReplies(discussion) {
+      this.setDiscussionProperty(discussion, 'repliesCollapsed', false);
+    },
+    saveNote() {
+      return new Promise();
+    },
+    deleteNote() {
+      return new Promise();
+    },
+    removeNote() {
+      return new Promise();
+    },
+    updateNote() {
+      return new Promise();
+    },
+    async toggleNoteAward(note, name) {
+      await axios.post(note.toggle_award_path, { name });
+      const awards = note.award_emoji.slice(0);
+      const existingAwardIndex = awards.findIndex(
+        (emoji) => `${emoji.name}` === name && isCurrentUser(emoji.user.id),
+      );
+      if (existingAwardIndex !== -1) {
+        awards.splice(existingAwardIndex, 1);
+      } else {
+        awards.push({
+          name,
+          user: {
+            id: window.gon?.current_user_id,
+            name: window.gon?.current_user_fullname,
+            username: window.gon?.current_username,
+          },
+        });
+      }
+      this.setNoteProperty(note, 'award_emoji', awards);
+    },
+  },
+  getters: {
+    getDiscussionById() {
+      return (id) => this.discussions.find((discussion) => discussion.id === id);
+    },
+    getLastEditableNote() {
+      return (discussion) => {
+        return discussion.notes.findLast((note) => {
+          return isCurrentUser(note.author.id) && note.current_user?.can_edit;
+        });
+      };
+    },
+    targetNoteHash() {},
+  },
+});
diff --git a/app/assets/stylesheets/components/rapid_diffs/_index.scss b/app/assets/stylesheets/components/rapid_diffs/_index.scss
index f3b639269a2d8366830943d2e703c1ed8147914e..034973e8fa827b07f541006ea16454f66a4e7fde 100644
--- a/app/assets/stylesheets/components/rapid_diffs/_index.scss
+++ b/app/assets/stylesheets/components/rapid_diffs/_index.scss
@@ -4,3 +4,4 @@
 @import './no_preview';
 @import './empty_state';
 @import './image_viewer';
+@import './disucssions';
diff --git a/app/assets/stylesheets/components/rapid_diffs/diff_file_component.scss b/app/assets/stylesheets/components/rapid_diffs/diff_file_component.scss
index fc419df9d4bf90a6161f3246a15a3a166c9e5a85..c72617e7f3c24dc8c4236ea24b8118f3c73177d2 100644
--- a/app/assets/stylesheets/components/rapid_diffs/diff_file_component.scss
+++ b/app/assets/stylesheets/components/rapid_diffs/diff_file_component.scss
@@ -39,7 +39,7 @@
 
 // content-visibility: auto; applies paint containment, which means you can not draw outside a diff file
 // we need to disable this when we show dropdowns and other elements which extend past a diff file
-.rd-diff-file[data-virtual]:has([data-options-toggle] button[aria-expanded='true']) {
+.rd-diff-file[data-virtual]:has(button[aria-controls*="base-dropdown"][aria-expanded='true']) {
   --rd-content-visibility-auto: visible;
 }
 
diff --git a/app/assets/stylesheets/components/rapid_diffs/disucssions.scss b/app/assets/stylesheets/components/rapid_diffs/disucssions.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a91fdee3cdde8e7d75f0538bc05fadd1e8040894
--- /dev/null
+++ b/app/assets/stylesheets/components/rapid_diffs/disucssions.scss
@@ -0,0 +1,15 @@
+@import '../../page_bundles/notes/diff_comments';
+
+.rd-diff-discussions-row {
+  display: block;
+  background-color: var(--code-empty-background);
+}
+
+.rd-diff-discussions-row-parallel {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.rd-diff-discussions-row td {
+  display: block;
+}
diff --git a/app/assets/stylesheets/page_bundles/notes/_diff_comments.scss b/app/assets/stylesheets/page_bundles/notes/_diff_comments.scss
index e9e6553acdd561d71f53d2bd497e13aed2cbf82a..426726c4b8832194d941c20e4815cac9be00bc6f 100644
--- a/app/assets/stylesheets/page_bundles/notes/_diff_comments.scss
+++ b/app/assets/stylesheets/page_bundles/notes/_diff_comments.scss
@@ -76,7 +76,7 @@
 }
 
 // Vue refactored diff discussion adjustments
-.files {
+.files, .rd-diff-discussions-row {
   .diff-discussions {
     .note-discussion.timeline-entry {
       padding-left: 0;
@@ -207,7 +207,7 @@
   }
 }
 
-.diff-file {
+.diff-file, .rd-diff-discussions-row {
   .diff-grid-left:hover,
   .diff-grid-right:hover,
   .is-over {
diff --git a/app/components/rapid_diffs/app_component.html.haml b/app/components/rapid_diffs/app_component.html.haml
index c7f80b61ae2c344218a42d67ad3a00093d2de350..a5cf2e86fca0d52dfea4bc478602382a06dfae86 100644
--- a/app/components/rapid_diffs/app_component.html.haml
+++ b/app/components/rapid_diffs/app_component.html.haml
@@ -1,6 +1,6 @@
 - if !lazy?
-  - helpers.add_page_startup_api_call diffs_stats_endpoint
-  - helpers.add_page_startup_api_call diff_files_endpoint
+  - prefetch_endpoints.each do |endpoint|
+    - helpers.add_page_startup_api_call endpoint
   - if diffs_stream_url
     - helpers.content_for :startup_js do
       - javascript_tag nonce: content_security_policy_nonce do
diff --git a/app/components/rapid_diffs/app_component.rb b/app/components/rapid_diffs/app_component.rb
index 8cd2652c60ebd076b6b2ea41a3d0b436bf28bf6f..c91c1176d5449c537e7942c53724c9f8232f10db 100644
--- a/app/components/rapid_diffs/app_component.rb
+++ b/app/components/rapid_diffs/app_component.rb
@@ -15,6 +15,8 @@ def initialize(presenter)
       @presenter = presenter
     end
 
+    protected
+
     def app_data
       {
         diffs_stream_url: diffs_stream_url,
@@ -30,6 +32,10 @@ def app_data
       }
     end
 
+    def prefetch_endpoints
+      [diffs_stats_endpoint, diff_files_endpoint]
+    end
+
     def update_user_endpoint
       helpers.expose_path(helpers.api_v4_user_preferences_path)
     end
diff --git a/app/components/rapid_diffs/commit_app_component.rb b/app/components/rapid_diffs/commit_app_component.rb
new file mode 100644
index 0000000000000000000000000000000000000000..8b51902b651a06eb3238fcf5a16d3635c2af7390
--- /dev/null
+++ b/app/components/rapid_diffs/commit_app_component.rb
@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module RapidDiffs
+  class CommitAppComponent < AppComponent
+    delegate :user_permissions, :notes_endpoint, :preview_markdown_endpoint, :markdown_docs_path, :register_path,
+      :sign_in_path, :noteable_type, to: :presenter
+
+    protected
+
+    def app_data
+      {
+        **super,
+        user_permissions: user_permissions,
+        notes_endpoint: notes_endpoint,
+        preview_markdown_endpoint: preview_markdown_endpoint,
+        markdown_docs_path: markdown_docs_path,
+        register_path: register_path,
+        sign_in_path: sign_in_path,
+        noteable_type: noteable_type
+      }
+    end
+
+    def prefetch_endpoints
+      [*super, notes_endpoint]
+    end
+  end
+end
diff --git a/app/components/rapid_diffs/diff_file_component.rb b/app/components/rapid_diffs/diff_file_component.rb
index 63e32688911778d7d4dd009e9584905f66acf50d..6735be9229a6d9de43dd9fca5125700bb051be23 100644
--- a/app/components/rapid_diffs/diff_file_component.rb
+++ b/app/components/rapid_diffs/diff_file_component.rb
@@ -21,7 +21,9 @@ def file_data
       params = tree_join(@diff_file.content_sha, @diff_file.file_path)
       {
         viewer: viewer_component.viewer_name,
-        diff_lines_path: project_blob_diff_lines_path(project, params)
+        diff_lines_path: project_blob_diff_lines_path(project, params),
+        old_path: @diff_file.old_path,
+        new_path: @diff_file.new_path
       }
     end
 
diff --git a/app/controllers/concerns/notes_actions.rb b/app/controllers/concerns/notes_actions.rb
index 43e90e52a83c40a99c49b6550d79b92aa2d45c5f..bf1fd1af740e45d8f5412e5e45dba2a11d29a79a 100644
--- a/app/controllers/concerns/notes_actions.rb
+++ b/app/controllers/concerns/notes_actions.rb
@@ -144,6 +144,14 @@ def note_json(note)
         attrs[:discussion] = discussion_serializer.represent(discussion, context: self)
       elsif use_note_serializer?
         attrs.merge!(note_serializer.represent(note))
+      elsif params[:return_commit_notes] == 'true'
+        discussion = note.discussion
+        prepare_notes_for_rendering(discussion.notes)
+
+        attrs[:discussion] = commit_discussion_serializer.represent(
+          discussion,
+          context: self
+        )
       else
         attrs.merge!(
           id: note.id,
@@ -302,6 +310,15 @@ def discussion_serializer
     )
   end
 
+  def commit_discussion_serializer
+    CommitDiscussionSerializer.new(
+      project: project,
+      noteable: noteable,
+      current_user: current_user,
+      note_entity: CommitNoteEntity
+    )
+  end
+
   def note_project
     return unless project
 
diff --git a/app/controllers/projects/commit_controller.rb b/app/controllers/projects/commit_controller.rb
index c7a95dbd539e6d917717f80b448e1ebf3418a0c5..83cb7b5bd24f9d90ebf9d88516c9145b6adabb9f 100644
--- a/app/controllers/projects/commit_controller.rb
+++ b/app/controllers/projects/commit_controller.rb
@@ -50,6 +50,14 @@ def diff_for_path
     render_diff_for_path(@commit.diffs(diff_options))
   end
 
+  def discussions
+    define_note_vars
+
+    all_discussions = (@grouped_diff_discussions.values.flatten + @discussions)
+
+    render json: { discussions: discussion_serializer.represent(all_discussions) }
+  end
+
   def diff_files
     respond_to do |format|
       format.html do
@@ -152,7 +160,9 @@ def rapid_diffs
     @rapid_diffs_presenter = RapidDiffs::CommitPresenter.new(
       @commit,
       diff_view,
-      commit_diff_options
+      commit_diff_options,
+      nil,
+      current_user
     )
 
     show
@@ -160,6 +170,15 @@ def rapid_diffs
 
   private
 
+  def discussion_serializer
+    CommitDiscussionSerializer.new(
+      project: project,
+      noteable: commit,
+      current_user: current_user,
+      note_entity: CommitNoteEntity
+    )
+  end
+
   def commit_diff_options
     opts = diff_options
     opts[:ignore_whitespace_change] = true if params[:format] == 'diff'
diff --git a/app/presenters/rapid_diffs/base_presenter.rb b/app/presenters/rapid_diffs/base_presenter.rb
index e41a63fb02bf313b21ef9256c847ed175252f639..96a9addb51a5c3cafb8bf7280048808dae771557 100644
--- a/app/presenters/rapid_diffs/base_presenter.rb
+++ b/app/presenters/rapid_diffs/base_presenter.rb
@@ -38,6 +38,10 @@ def diff_file_endpoint
       raise NotImplementedError
     end
 
+    def notes_endpoint
+      nil
+    end
+
     def should_sort_metadata_files?
       false
     end
diff --git a/app/presenters/rapid_diffs/commit_presenter.rb b/app/presenters/rapid_diffs/commit_presenter.rb
index ca9c724e5b6a04a4ae956ae316ae23798f51a984..c01e460d44a77cdcad21ddeefe238c8ac7292634 100644
--- a/app/presenters/rapid_diffs/commit_presenter.rb
+++ b/app/presenters/rapid_diffs/commit_presenter.rb
@@ -6,6 +6,11 @@ class CommitPresenter < BasePresenter
 
     presents ::Commit, as: :resource
 
+    def initialize(subject, diff_view, diff_options, request_params = nil, current_user = nil)
+      super(subject, diff_view, diff_options, request_params)
+      @current_user = current_user
+    end
+
     def diffs_stats_endpoint
       diffs_stats_project_commit_path(resource.project, resource.id)
     end
@@ -18,6 +23,10 @@ def diff_file_endpoint
       diff_file_project_commit_path(resource.project, resource.id)
     end
 
+    def notes_endpoint
+      discussions_project_commit_path(resource.project, resource.id)
+    end
+
     override(:reload_stream_url)
     def reload_stream_url(offset: nil, diff_view: nil)
       diffs_stream_project_commit_path(
@@ -27,5 +36,31 @@ def reload_stream_url(offset: nil, diff_view: nil)
         view: diff_view
       )
     end
+
+    def user_permissions
+      {
+        can_create_note: can?(@current_user, :create_note, resource.project)
+      }
+    end
+
+    def preview_markdown_endpoint
+      project_preview_markdown_path(resource.project)
+    end
+
+    def markdown_docs_path
+      help_page_path('user/markdown.md')
+    end
+
+    def register_path
+      new_user_registration_path(redirect_to_referer: 'yes')
+    end
+
+    def sign_in_path
+      new_user_session_path(redirect_to_referer: 'yes')
+    end
+
+    def noteable_type
+      'Commit'
+    end
   end
 end
diff --git a/app/serializers/commit_discussion_entity.rb b/app/serializers/commit_discussion_entity.rb
new file mode 100644
index 0000000000000000000000000000000000000000..39fc207d03a87419b969bb55cc282fc778a5af6b
--- /dev/null
+++ b/app/serializers/commit_discussion_entity.rb
@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+class CommitDiscussionEntity < DiscussionEntity
+  unexpose :diff_file
+  unexpose :truncated_diff_lines
+end
diff --git a/app/serializers/commit_discussion_serializer.rb b/app/serializers/commit_discussion_serializer.rb
new file mode 100644
index 0000000000000000000000000000000000000000..6d325af08818ad2edd09efba4359be31ac103626
--- /dev/null
+++ b/app/serializers/commit_discussion_serializer.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class CommitDiscussionSerializer < DiscussionSerializer
+  entity CommitDiscussionEntity
+end
diff --git a/app/serializers/commit_note_entity.rb b/app/serializers/commit_note_entity.rb
new file mode 100644
index 0000000000000000000000000000000000000000..e3c738743ad7b4feddc5ffd72802ebc05da7226f
--- /dev/null
+++ b/app/serializers/commit_note_entity.rb
@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class CommitNoteEntity < ProjectNoteEntity
+  expose :position
+  expose :original_position
+  unexpose :discussion
+end
diff --git a/app/views/projects/commit/rapid_diffs.html.haml b/app/views/projects/commit/rapid_diffs.html.haml
index 51256b628a37d52b7583fe482eb64b829ede3612..9511c3f053c03ebc3b245c192de4f0f24606866f 100644
--- a/app/views/projects/commit/rapid_diffs.html.haml
+++ b/app/views/projects/commit/rapid_diffs.html.haml
@@ -9,8 +9,9 @@
 -# required for file browser styles, remove when .diff-tree-list is refactored into Rapid Diffs
 - add_page_specific_style 'page_bundles/merge_requests'
 - add_page_specific_style 'page_bundles/commit_rapid_diffs'
+- add_issuable_stylesheet
 
 .container-fluid{ class: [container_class] }
   = render "commit_box"
   = render "ci_menu"
-  = render ::RapidDiffs::AppComponent.new(@rapid_diffs_presenter)
+  = render ::RapidDiffs::CommitAppComponent.new(@rapid_diffs_presenter)
diff --git a/config/routes/repository.rb b/config/routes/repository.rb
index 1699df23cbe877f40fa9877ec4259de9ea38c4d3..d747ac6ca117b0970be456d24fbe225e64d19c4b 100644
--- a/config/routes/repository.rb
+++ b/config/routes/repository.rb
@@ -121,6 +121,7 @@
     get :diff_files_metadata
     get :diffs_stats
     get :diff_file
+    get :discussions
   end
 end