diff --git a/src/contentScripts/communityConsole/flattenThreads/flattenThreads.js b/src/contentScripts/communityConsole/flattenThreads/flattenThreads.js
new file mode 100644
index 0000000..91bcfbb
--- /dev/null
+++ b/src/contentScripts/communityConsole/flattenThreads/flattenThreads.js
@@ -0,0 +1,55 @@
+export const kAdditionalInfoPrefix = '__TWPT_FLATTENTHREADS_ADDITIONALINFO__';
+export const kAdditionalInfoRegex =
+    /^__TWPT_FLATTENTHREADS_ADDITIONALINFO__(.*)/;
+
+export const kReplyPayloadSelector =
+    '.scTailwindThreadMessageMessagecardcontent:not(.scTailwindThreadMessageMessagecardpromoted) .scTailwindThreadPostcontentroot html-blob';
+
+export default class FlattenThreads {
+  construct() {}
+
+  getExtraInfo(node) {
+    let rawExtraInfo = null;
+    const possibleExtraInfoNodes =
+        node.querySelectorAll('span[style*=\'display\'][style*=\'none\']');
+    for (const candidate of possibleExtraInfoNodes) {
+      const content = candidate.textContent;
+      const matches = content.match(kAdditionalInfoRegex);
+      if (matches) {
+        rawExtraInfo = matches?.[1] ?? null;
+        break;
+      }
+    }
+    if (!rawExtraInfo) return null;
+    return JSON.parse(rawExtraInfo);
+  }
+
+  injectId(node, extraInfo) {
+    const root = node.closest('.scTailwindThreadMessageMessagecardcontent');
+    if (!root) return false;
+    root.setAttribute('data-twpt-message-id', extraInfo.id);
+    return true;
+  }
+
+  injectQuote(node, extraInfo) {
+    const content = node.closest('.scTailwindThreadPostcontentroot');
+    // @TODO: Change this by the actual quote component
+    const quote = document.createElement('div');
+    quote.textContent = 'QUOTE(' + extraInfo.parentMessage.id + ')';
+    content.prepend(quote);
+  }
+
+  injectIfApplicable(node) {
+    // If we injected the additional information, it means the flatten threads
+    // feature is enabled and in actual use, so we should inject the quote.
+    const extraInfo = this.getExtraInfo(node);
+    if (!extraInfo) return;
+
+    this.injectId(node, extraInfo);
+    if (extraInfo.isComment) this.injectQuote(node, extraInfo);
+  }
+
+  shouldInject(node) {
+    return node.matches(kReplyPayloadSelector);
+  }
+}
diff --git a/src/contentScripts/communityConsole/main.js b/src/contentScripts/communityConsole/main.js
index 1edb466..a3b1bb7 100644
--- a/src/contentScripts/communityConsole/main.js
+++ b/src/contentScripts/communityConsole/main.js
@@ -8,6 +8,7 @@
 // #!if ['chromium', 'chromium_mv3'].includes(browser_target)
 import {applyDragAndDropFixIfEnabled} from './dragAndDropFix.js';
 // #!endif
+import {default as FlattenThreads, kReplyPayloadSelector} from './flattenThreads/flattenThreads.js';
 import InfiniteScroll from './infiniteScroll.js';
 import {kRepliesSectionSelector} from './threadToolbar/constants.js';
 import ThreadToolbar from './threadToolbar/threadToolbar.js';
@@ -15,7 +16,7 @@
 import Workflows from './workflows/workflows.js';
 
 var mutationObserver, options, avatars, infiniteScroll, workflows,
-    threadToolbar;
+    threadToolbar, flattenThreads;
 
 const watchedNodesSelectors = [
   // App container (used to set up the intersection observer and inject the dark
@@ -76,6 +77,9 @@
 
   // Thread page reply section (for the thread page toolbar)
   kRepliesSectionSelector,
+
+  // Reply payload (for the flatten threads UI)
+  kReplyPayloadSelector,
 ];
 
 function handleCandidateNode(node) {
@@ -214,6 +218,11 @@
     if (threadToolbar.shouldInject(node)) {
       threadToolbar.injectIfApplicable(node);
     }
+
+    // Inject parent reply quote
+    if (flattenThreads.shouldInject(node)) {
+      flattenThreads.injectIfApplicable(node);
+    }
   }
 }
 
@@ -251,6 +260,7 @@
   infiniteScroll = new InfiniteScroll();
   workflows = new Workflows();
   threadToolbar = new ThreadToolbar();
+  flattenThreads = new FlattenThreads();
 
   // autoRefresh, extraInfo, threadPageDesignWarning and workflowsImport are
   // initialized in start.js
diff --git a/src/models/Gap.js b/src/models/Gap.js
index 131dfbc..59e4882 100644
--- a/src/models/Gap.js
+++ b/src/models/Gap.js
@@ -21,7 +21,7 @@
   }
 
   getStartTimestamp() {
-    const a = this.getStartMicroseconds();
+    let a = this.getStartMicroseconds();
     if (a == null) a = '0';
     return BigInt(a);
   }
@@ -35,7 +35,7 @@
   }
 
   getEndTimestamp() {
-    const a = this.getEndMicroseconds();
+    let a = this.getEndMicroseconds();
     if (a == null) a = '0';
     return BigInt(a);
   }
diff --git a/src/models/Message.js b/src/models/Message.js
index d39a9ab..f5e5b37 100644
--- a/src/models/Message.js
+++ b/src/models/Message.js
@@ -12,7 +12,7 @@
   }
 
   getCreatedMicroseconds() {
-    const a = this.getCreatedTimestamp();
+    let a = this.getCreatedTimestamp();
     if (a === null) a = '0';
     return BigInt(a);
   }
@@ -33,6 +33,31 @@
     this.data[12] = [];
   }
 
+  getPayload() {
+    return this.data[1]?.[4] ?? null;
+  }
+
+  setPayload(value) {
+    if (!this.data[1]) this.data[1] = [];
+    this.data[1][4] = value;
+  }
+
+  getId() {
+    return this.data[1]?.[1]?.[1] ?? null;
+  }
+
+  getAuthor() {
+    return this.data[3] ?? null;
+  }
+
+  getParentMessageId() {
+    return this.data[1]?.[37] ?? null;
+  }
+
+  isComment() {
+    return !!this.getParentMessageId;
+  }
+
   toRawMessageOrGap() {
     return {1: this.data};
   }
diff --git a/src/xhrInterceptor/responseModifiers/flattenThread.js b/src/xhrInterceptor/responseModifiers/flattenThread.js
index 65eb42c..cece8b4 100644
--- a/src/xhrInterceptor/responseModifiers/flattenThread.js
+++ b/src/xhrInterceptor/responseModifiers/flattenThread.js
@@ -1,3 +1,4 @@
+import {kAdditionalInfoPrefix} from '../../contentScripts/communityConsole/flattenThreads/flattenThreads.js';
 import GapModel from '../../models/Gap.js';
 import MessageModel from '../../models/Message.js';
 
@@ -12,6 +13,7 @@
   async interceptor(_request, response) {
     if (!response[1]?.[40]) return response;
 
+    // Do the actual flattening
     const originalMogs =
         MessageModel.mapToMessageOrGapModels(response[1][40] ?? []);
     let extraMogs = [];
@@ -22,6 +24,19 @@
       mog.clearCommentsAndGaps();
     });
     const mogs = originalMogs.concat(extraMogs);
+
+    // Add some message data to the payload so the extension can show the parent
+    // comment/reply in the case of comments.
+    mogs.forEach(m => {
+      const info = this.getAdditionalInformation(m, mogs);
+      const span = document.createElement('span');
+      span.textContent = kAdditionalInfoPrefix + JSON.stringify(info);
+      span.setAttribute('style', 'display: none');
+      m.newPayload = m.getPayload() + span.outerHTML;
+    });
+    mogs.forEach(m => m.setPayload(m.newPayload));
+
+    // Sort the messages by date
     mogs.sort((a, b) => {
       const c = a instanceof MessageModel ? a.getCreatedMicroseconds() :
                                             a.getStartTimestamp();
@@ -30,11 +45,35 @@
       const diff = c - d;
       return diff > 0 ? 1 : diff < 0 ? -1 : 0;
     });
+
     response[1][40] = mogs.map(mog => mog.toRawMessageOrGap());
+
     // Set num_messages to the updated value, since we've flattened the replies.
     response[1][8] = response[1][40].length;
     return response;
   },
+  getAdditionalInformation(message, mogs) {
+    const id = message.getId();
+    const parentId = message.getParentMessageId();
+    const parentMessage =
+        parentId ? mogs.find(m => m.getId() === parentId) : null;
+    if (!parentMessage) {
+      return {
+        isComment: false,
+        id,
+      };
+    }
+
+    return {
+      isComment: true,
+      id,
+      parentMessage: {
+        id: parentId,
+        payload: parentMessage.getPayload(),
+        author: parentMessage.getAuthor(),
+      },
+    };
+  }
 };
 
 export default loadMoreThread;