diff --git a/src/contentScripts/communityConsole/flattenThreads/components/QuoteAuthor.js b/src/contentScripts/communityConsole/flattenThreads/components/QuoteAuthor.js
index 59bc6b6..7f93e9a 100644
--- a/src/contentScripts/communityConsole/flattenThreads/components/QuoteAuthor.js
+++ b/src/contentScripts/communityConsole/flattenThreads/components/QuoteAuthor.js
@@ -1,5 +1,5 @@
 import '@material/web/icon/icon.js';
-import '@material/web/iconbutton/standard-icon-button.js';
+import '@material/web/iconbutton/icon-button.js';
 
 import {css, html, LitElement} from 'lit';
 
@@ -47,10 +47,10 @@
     return html`
       <md-icon class="reply-icon">reply</md-icon>
       <span class="name">${this.prevMessage?.author?.[1]?.[1]}</span>
-      <md-standard-icon-button
-          icon="arrow_upward"
+      <md-icon-button
           @click=${this.focusParent}>
-      </md-standard-icon-button>
+        <md-icon>arrow_upward</md-icon>
+      </md-icon-button>
     `;
   }
 
diff --git a/src/contentScripts/communityConsole/flattenThreads/components/ReplyButton.js b/src/contentScripts/communityConsole/flattenThreads/components/ReplyButton.js
index 6a35b10..73a4cc1 100644
--- a/src/contentScripts/communityConsole/flattenThreads/components/ReplyButton.js
+++ b/src/contentScripts/communityConsole/flattenThreads/components/ReplyButton.js
@@ -32,10 +32,10 @@
   render() {
     return html`
       <md-outlined-button
-          label="${msg('Reply', {
-      desc: 'Button which is used to open the reply box.',
-    })}"
           @click=${this.openReplyEditor}>
+        ${msg('Reply', {
+      desc: 'Button which is used to open the reply box.',
+    })}
       </md-outlined-button>
     `;
   }
diff --git a/src/contentScripts/communityConsole/flattenThreads/components/index.js b/src/contentScripts/communityConsole/flattenThreads/components/index.js
index 39e8310..f1da3b0 100644
--- a/src/contentScripts/communityConsole/flattenThreads/components/index.js
+++ b/src/contentScripts/communityConsole/flattenThreads/components/index.js
@@ -1,5 +1,5 @@
-import '@material/web/button/tonal-button.js';
-
+import '@material/web/button/filled-tonal-button.js';
+import '@material/web/icon/icon.js';
 import './QuoteAuthor.js';
 
 // Other components imported so they are also injected:
@@ -49,8 +49,7 @@
     .payload-container twpt-flatten-thread-quote-author {
       float: right;
       margin-left: 12px;
-      margin-top: -12px;
-      shape-outside: inset(0 10px 10px 0);
+      margin-top: -8px;
     }
 
     .payload {
@@ -86,16 +85,16 @@
       }
     }
 
-    .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);
+    .buttons-row md-filled-tonal-button {
+      --md-filled-tonal-button-container-color: var(--TWPT-dark-flatten-replies-more-bg, rgba(222, 222, 222, 0.9));
+      --md-filled-tonal-button-label-text-color: var(--TWPT-md-sys-color-on-surface);
+      --md-filled-tonal-button-hover-label-text-color: var(--TWPT-md-sys-color-on-surface);
+      --md-filled-tonal-button-focus-label-text-color: var(--TWPT-md-sys-color-on-surface);
+      --md-filled-tonal-button-pressed-label-text-color: var(--TWPT-md-sys-color-on-surface);
+      --md-filled-tonal-button-icon-color: var(--TWPT-md-sys-color-on-surface);
+      --md-filled-tonal-button-hover-icon-color: var(--TWPT-md-sys-color-on-surface);
+      --md-filled-tonal-button-focus-icon-color: var(--TWPT-md-sys-color-on-surface);
+      --md-filled-tonal-button-pressed-icon-color: var(--TWPT-md-sys-color-on-surface);
     }
     `,
   ];
@@ -116,10 +115,12 @@
       'quote-container--expanded': this._expanded,
     });
     const lessMsg = msg('Less', {
-      desc: 'Button to collapse the quote message (used in the flatten threads feature).',
+      desc:
+          'Button to collapse the quote message (used in the flatten threads feature).',
     });
     const moreMsg = msg('More', {
-      desc: 'Button to expand the quote message (used in the flatten threads feature).',
+      desc:
+          'Button to expand the quote message (used in the flatten threads feature).',
     });
     return html`
       <div class=${containerClasses}>
@@ -132,11 +133,13 @@
           </div>
         </div>
         <div class="buttons-row">
-          <md-tonal-button
-              icon="${this._expanded ? 'expand_less' : 'expand_more'}"
-              label="${this._expanded ? lessMsg : moreMsg}"
+          <md-filled-tonal-button
               @click=${this.toggleExpanded}>
-          </md-tonal-button>
+            <md-icon slot="icon">
+              ${this._expanded ? 'expand_less' : 'expand_more'}
+            </md-icon>
+            ${this._expanded ? lessMsg : moreMsg}
+          </md-filled-tonal-button>
         </div>
       </div>
     `;