diff --git a/src/contentScripts/communityConsole/flattenThreads/components/QuoteAuthor.js b/src/contentScripts/communityConsole/flattenThreads/components/QuoteAuthor.js
new file mode 100644
index 0000000..2f1fb95
--- /dev/null
+++ b/src/contentScripts/communityConsole/flattenThreads/components/QuoteAuthor.js
@@ -0,0 +1,60 @@
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/standard-icon-button.js';
+
+import {css, html, LitElement} from 'lit';
+
+import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
+
+export default class TwptFlattenThreadQuoteAuthor extends LitElement {
+  static properties = {
+    prevMessage: {type: Object},
+  };
+
+  static styles = [
+    SHARED_MD3_STYLES,
+    css`
+    :host {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      max-width: max(25%, 150px);
+      color: var(--TWPT-interop-secondary-text, #444746);
+    }
+
+    :host > *:not(:last-child) {
+      margin-right: 4px;
+    }
+
+    .name {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.prevMessage = {};
+  }
+
+  render() {
+    return html`
+      <md-icon>reply</md-icon>
+      <span class="name">${this.prevMessage?.author?.[1]?.[1]}</span>
+      <md-standard-icon-button
+          icon="arrow_upward"
+          @click=${this.focusParent}>
+      </md-standard-icon-button>
+    `;
+  }
+
+  focusParent() {
+    const parentNode = document.querySelector(
+        '[data-twpt-message-id="' + this.prevMessage?.id + '"]');
+    parentNode.focus({preventScroll: true});
+    parentNode.scrollIntoView({behavior: 'smooth', block: 'start'});
+  }
+}
+window.customElements.define(
+    'twpt-flatten-thread-quote-author', TwptFlattenThreadQuoteAuthor);
diff --git a/src/contentScripts/communityConsole/flattenThreads/components/ReplyButton.js b/src/contentScripts/communityConsole/flattenThreads/components/ReplyButton.js
new file mode 100644
index 0000000..681c433
--- /dev/null
+++ b/src/contentScripts/communityConsole/flattenThreads/components/ReplyButton.js
@@ -0,0 +1,99 @@
+import '@material/web/button/outlined-button.js';
+
+import {css, html, LitElement} from 'lit';
+import {waitFor} from 'poll-until-promise';
+
+import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
+import {getExtraInfoNodes} from '../flattenThreads.js';
+
+export default class TwptFlattenThreadReplyButton extends LitElement {
+  static properties = {
+    extraInfo: {type: Object},
+  };
+
+  static styles = [
+    SHARED_MD3_STYLES,
+    css`
+    md-outlined-button {
+      --md-outlined-button-container-shape: 0.25rem;
+      --md-outlined-button-container-height: 38px;
+    }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.extraInfo = {};
+  }
+
+  render() {
+    return html`
+      <md-outlined-button
+          label="Reply"
+          @click=${this.openReplyEditor}>
+      </md-outlined-button>
+    `;
+  }
+
+  #defaultReply(messagePayload) {
+    const quoteHeader = document.createElement('div');
+    const italics = document.createElement('i');
+    italics.textContent = this.extraInfo?.authorName + ' said:';
+    quoteHeader.append(italics);
+
+    const quote = document.createElement('blockquote');
+    quote.innerHTML = messagePayload;
+    getExtraInfoNodes(quote)?.forEach?.(node => {
+      node.parentNode.removeChild(node);
+    });
+
+    const br1 = document.createElement('br');
+    const br2 = document.createElement('br');
+
+    return [quoteHeader, quote, br1, br2];
+  }
+
+  openReplyEditor() {
+    const messageId = this.extraInfo?.id;
+    const messagePayload = document.querySelector(
+        '[data-twpt-message-id="' + messageId +
+        '"] .scTailwindThreadPostcontentroot html-blob');
+    if (!messagePayload) {
+      console.error('[flattenThreads] Payload not found.');
+      return;
+    }
+
+    const parentId = this.extraInfo?.parentId ?? this.extraInfo?.id;
+    const parentNodeReply =
+        document.querySelector('[data-twpt-message-id="' + parentId + '"]')
+            ?.closest?.('sc-tailwind-thread-message-message-card');
+    const parentNodeReplyButton = parentNodeReply?.querySelector?.(
+        '.scTailwindThreadMessageMessagecardadd-comment button');
+    if (!parentNodeReplyButton) {
+      // This is not critical: the reply button might already have been clicked
+      // (so it no longer exists), or the thread might be locked so replying is
+      // disabled and the button does'nt exist.
+      console.debug('[flattenThreads] Reply button not found.');
+      return;
+    }
+
+    // Click the reply button.
+    parentNodeReplyButton.click();
+
+    // Fill in the default reply text (it includes a quote of the message the
+    // user wishes to reply to).
+    waitFor(() => {
+      const editor =
+          parentNodeReply?.querySelector('sc-tailwind-thread-reply-editor');
+      if (editor) return Promise.resolve(editor);
+      return Promise.reject(new Error('Editor not found.'));
+    }, {interval: 75, timeout: 10 * 1000}).then(editor => {
+      const payload =
+          editor?.querySelector('.scTailwindSharedRichtexteditoreditor');
+
+      payload.prepend(...this.#defaultReply(messagePayload.innerHTML));
+    });
+  }
+}
+window.customElements.define(
+    'twpt-flatten-thread-reply-button', TwptFlattenThreadReplyButton);
diff --git a/src/contentScripts/communityConsole/flattenThreads/components/index.js b/src/contentScripts/communityConsole/flattenThreads/components/index.js
new file mode 100644
index 0000000..08f1d18
--- /dev/null
+++ b/src/contentScripts/communityConsole/flattenThreads/components/index.js
@@ -0,0 +1,136 @@
+import '@material/web/button/tonal-button.js';
+
+import './QuoteAuthor.js';
+
+// Other components imported so they are also injected:
+import './ReplyButton.js';
+
+import * as DOMPurify from 'dompurify';
+import {css, html, LitElement} from 'lit';
+import {classMap} from 'lit/directives/class-map.js';
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
+
+import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
+
+export default class TwptFlattenThreadQuote extends LitElement {
+  static properties = {
+    prevMessage: {type: Object},
+    _expanded: {type: Boolean},
+  };
+
+  static styles = [
+    SHARED_MD3_STYLES,
+    css`
+    :host {
+      display: block;
+    }
+
+    .quote-container {
+      position: relative;
+      background-color: var(--TWPT-secondary-background, rgba(242, 242, 242, 0.502));
+      margin-bottom: 16px;
+      padding: 0 12px 12px 12px;
+      border-radius: 12px;
+    }
+
+    .payload-container {
+      padding-top: 12px;
+    }
+
+    .quote-container:not(.quote-container--expanded) .payload-container {
+      max-height: 4rem;
+      overflow: hidden;
+    }
+
+    .payload-container twpt-flatten-thread-quote-author {
+      float: right;
+      margin-left: 12px;
+      margin-top: -12px;
+      shape-outside: inset(0 10px 10px 0);
+    }
+
+    .payload {
+      display: inline;
+    }
+
+    .payload img {
+      max-width: 100%;
+      max-height: calc(100vh - 2*64px);
+    }
+
+    .payload blockquote {
+      border-left: 1px solid #757575;
+      margin: 0 0 0 4px;
+      padding: 0 0 0 4px;
+    }
+
+    .buttons-row {
+      position: absolute;
+      width: calc(100% - 24px);
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      bottom: -20px;
+      transition: opacity .25s;
+    }
+
+    .quote-container:not(:hover) .buttons-row:not(:has(md-tonal-button:focus)) {
+      opacity: 0;
+    }
+
+    .buttons-row md-tonal-button {
+      --md-tonal-button-container-color: var(--TWPT-dark-flatten-replies-more-bg, rgba(222, 222, 222, 0.9));
+      --md-tonal-button-label-text-color: var(--TWPT-md-sys-color-on-surface);
+      --md-tonal-button-hover-label-text-color: var(--TWPT-md-sys-color-on-surface);
+      --md-tonal-button-focus-label-text-color: var(--TWPT-md-sys-color-on-surface);
+      --md-tonal-button-pressed-label-text-color: var(--TWPT-md-sys-color-on-surface);
+      --md-tonal-button-with-icon-icon-color: var(--TWPT-md-sys-color-on-surface);
+      --md-tonal-button-with-icon-hover-icon-color: var(--TWPT-md-sys-color-on-surface);
+      --md-tonal-button-with-icon-focus-icon-color: var(--TWPT-md-sys-color-on-surface);
+      --md-tonal-button-with-icon-pressed-icon-color: var(--TWPT-md-sys-color-on-surface);
+    }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.prevMessage = {};
+    this._expanded = false;
+  }
+
+  getTrustedPayload() {
+    return DOMPurify.sanitize(this.prevMessage?.payload ?? '');
+  }
+
+  render() {
+    const containerClasses = classMap({
+      'quote-container': true,
+      'quote-container--expanded': this._expanded,
+    });
+    return html`
+      <div class=${containerClasses}>
+        <div class="payload-container">
+          <twpt-flatten-thread-quote-author
+              .prevMessage=${this.prevMessage}>
+          </twpt-flatten-thread-quote-author>
+          <div class="payload">
+            ${unsafeHTML(this.getTrustedPayload())}
+          </div>
+        </div>
+        <div class="buttons-row">
+          <md-tonal-button
+              icon="${this._expanded ? 'expand_less' : 'expand_more'}"
+              label="${this._expanded ? 'Less' : 'More'}"
+              @click=${this.toggleExpanded}>
+          </md-tonal-button>
+        </div>
+      </div>
+    `;
+  }
+
+  toggleExpanded() {
+    this._expanded = !this._expanded;
+  }
+}
+window.customElements.define(
+    'twpt-flatten-thread-quote', TwptFlattenThreadQuote);
diff --git a/src/contentScripts/communityConsole/flattenThreads/flattenThreads.js b/src/contentScripts/communityConsole/flattenThreads/flattenThreads.js
index 91bcfbb..6fc3eac 100644
--- a/src/contentScripts/communityConsole/flattenThreads/flattenThreads.js
+++ b/src/contentScripts/communityConsole/flattenThreads/flattenThreads.js
@@ -4,6 +4,24 @@
 
 export const kReplyPayloadSelector =
     '.scTailwindThreadMessageMessagecardcontent:not(.scTailwindThreadMessageMessagecardpromoted) .scTailwindThreadPostcontentroot html-blob';
+export const kReplyActionButtonsSelector =
+    '.scTailwindThreadMessageMessagecardcontent:not(.scTailwindThreadMessageMessagecardpromoted) sc-tailwind-thread-message-message-actions';
+export const kMatchingSelectors = [
+  kReplyPayloadSelector,
+  kReplyActionButtonsSelector,
+];
+
+export function getExtraInfoNodes(node) {
+  const confirmedNodes = [];
+  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) confirmedNodes.push(candidate);
+  }
+  return confirmedNodes;
+}
 
 export default class FlattenThreads {
   construct() {}
@@ -33,13 +51,18 @@
 
   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 + ')';
+    const quote = document.createElement('twpt-flatten-thread-quote');
+    quote.setAttribute('prevMessage', JSON.stringify(extraInfo.prevMessage));
     content.prepend(quote);
   }
 
-  injectIfApplicable(node) {
+  injectReplyBtn(node, extraInfo) {
+    const btn = document.createElement('twpt-flatten-thread-reply-button');
+    btn.setAttribute('extraInfo', JSON.stringify(extraInfo));
+    node.prepend(btn);
+  }
+
+  injectQuoteIfApplicable(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);
@@ -49,7 +72,24 @@
     if (extraInfo.isComment) this.injectQuote(node, extraInfo);
   }
 
-  shouldInject(node) {
+  shouldInjectQuote(node) {
     return node.matches(kReplyPayloadSelector);
   }
+
+  injectReplyBtnIfApplicable(node) {
+    // If we injected the additional information, it means the flatten threads
+    // feature is enabled and in actual use, so we should inject the reply
+    // button.
+    const root =
+        node.closest('.scTailwindThreadMessageMessagecardcontent')
+            .querySelector('.scTailwindThreadMessageMessagecardbody html-blob');
+    const extraInfo = this.getExtraInfo(root);
+    if (!extraInfo) return;
+
+    this.injectReplyBtn(node, extraInfo);
+  }
+
+  shouldInjectReplyBtn(node) {
+    return node.matches(kReplyActionButtonsSelector);
+  }
 }
diff --git a/src/contentScripts/communityConsole/main.js b/src/contentScripts/communityConsole/main.js
index a3b1bb7..2061834 100644
--- a/src/contentScripts/communityConsole/main.js
+++ b/src/contentScripts/communityConsole/main.js
@@ -8,7 +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 {default as FlattenThreads, kMatchingSelectors as kFlattenThreadMatchingSelectors} from './flattenThreads/flattenThreads.js';
 import InfiniteScroll from './infiniteScroll.js';
 import {kRepliesSectionSelector} from './threadToolbar/constants.js';
 import ThreadToolbar from './threadToolbar/threadToolbar.js';
@@ -79,7 +79,7 @@
   kRepliesSectionSelector,
 
   // Reply payload (for the flatten threads UI)
-  kReplyPayloadSelector,
+  ...kFlattenThreadMatchingSelectors,
 ];
 
 function handleCandidateNode(node) {
@@ -220,20 +220,33 @@
     }
 
     // Inject parent reply quote
-    if (flattenThreads.shouldInject(node)) {
-      flattenThreads.injectIfApplicable(node);
+    if (flattenThreads.shouldInjectQuote(node)) {
+      flattenThreads.injectQuoteIfApplicable(node);
+    }
+
+    // Inject reply button in non-nested view
+    if (flattenThreads.shouldInjectReplyBtn(node)) {
+      flattenThreads.injectReplyBtnIfApplicable(node);
     }
   }
 }
 
-function handleRemovedNode(node) {
+function handleRemovedNode(mutation, node) {
+  if (!('tagName' in node)) return;
+
   // Remove snackbar when exiting thread list view
-  if ('tagName' in node && node.tagName == 'EC-THREAD-LIST') {
+  if (node.tagName == 'EC-THREAD-LIST') {
     window.TWPTAutoRefresh.hideUpdatePrompt();
   }
+
+  // Readd reply button when the Community Console removes it
+  if (node.tagName == 'TWPT-FLATTEN-THREAD-REPLY-BUTTON') {
+    flattenThreads.injectReplyBtn(
+        mutation.target, JSON.parse(node.getAttribute('extraInfo')));
+  }
 }
 
-function mutationCallback(mutationList, observer) {
+function mutationCallback(mutationList) {
   mutationList.forEach((mutation) => {
     if (mutation.type == 'childList') {
       mutation.addedNodes.forEach(function(node) {
@@ -241,7 +254,7 @@
       });
 
       mutation.removedNodes.forEach(function(node) {
-        handleRemovedNode(node);
+        handleRemovedNode(mutation, node);
       });
     }
   });
@@ -325,4 +338,6 @@
   injectScript(chrome.runtime.getURL('litComponentsInject.bundle.js'));
   // Thread toolbar
   injectStylesheet(chrome.runtime.getURL('css/thread_toolbar.css'));
+  // Flatten threads
+  injectStylesheet(chrome.runtime.getURL('css/flatten_threads.css'));
 });