diff --git a/package-lock.json b/package-lock.json
index bdc0c3d..9722419 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@material/mwc-circular-progress": "^0.27.0",
         "@material/mwc-dialog": "^0.27.0",
         "@material/tooltip": "^14.0.0",
-        "@material/web": "^0.1.0-alpha.0",
+        "@material/web": "^1.0.0",
         "@stdlib/utils-escape-regexp-string": "^0.2.0",
         "async-mutex": "^0.4.0",
         "dompurify": "^3.0.0",
@@ -2294,11 +2294,11 @@
       }
     },
     "node_modules/@material/web": {
-      "version": "0.1.0-alpha.0",
-      "resolved": "https://registry.npmjs.org/@material/web/-/web-0.1.0-alpha.0.tgz",
-      "integrity": "sha512-GNsNyWOtYKezXwvrD1ZBfnOHClVya31ZEQH1O83+PsPqlVZK6cBfnf1cwJmEFQ6FezB6q6q+cHGGqx0lb90Jug==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@material/web/-/web-1.3.0.tgz",
+      "integrity": "sha512-yUqF35yygXreiPXQneD3l210UoSMlbgHZrJ0V1dUiEizGpWfVmuAKp9LnLnV/Qx5MhJlNOZddsGJOGR9lU8R/w==",
       "dependencies": {
-        "lit": "^2.3.0",
+        "lit": "^2.7.4 || ^3.0.0",
         "tslib": "^2.4.0"
       }
     },
@@ -10101,11 +10101,11 @@
       }
     },
     "@material/web": {
-      "version": "0.1.0-alpha.0",
-      "resolved": "https://registry.npmjs.org/@material/web/-/web-0.1.0-alpha.0.tgz",
-      "integrity": "sha512-GNsNyWOtYKezXwvrD1ZBfnOHClVya31ZEQH1O83+PsPqlVZK6cBfnf1cwJmEFQ6FezB6q6q+cHGGqx0lb90Jug==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@material/web/-/web-1.3.0.tgz",
+      "integrity": "sha512-yUqF35yygXreiPXQneD3l210UoSMlbgHZrJ0V1dUiEizGpWfVmuAKp9LnLnV/Qx5MhJlNOZddsGJOGR9lU8R/w==",
       "requires": {
-        "lit": "^2.3.0",
+        "lit": "^2.7.4 || ^3.0.0",
         "tslib": "^2.4.0"
       },
       "dependencies": {
diff --git a/package.json b/package.json
index 7c4fed4..b880da9 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
     "@material/mwc-circular-progress": "^0.27.0",
     "@material/mwc-dialog": "^0.27.0",
     "@material/tooltip": "^14.0.0",
-    "@material/web": "^0.1.0-alpha.0",
+    "@material/web": "^1.0.0",
     "@stdlib/utils-escape-regexp-string": "^0.2.0",
     "async-mutex": "^0.4.0",
     "dompurify": "^3.0.0",
diff --git a/src/ccDarkTheme/abstracts/_variables.scss b/src/ccDarkTheme/abstracts/_variables.scss
index 6a9182c..b34670f 100644
--- a/src/ccDarkTheme/abstracts/_variables.scss
+++ b/src/ccDarkTheme/abstracts/_variables.scss
@@ -1,3 +1,5 @@
+@use '../../md3/theme' as md3-theme;
+
 :root {
   --TWPT-primary-text: #e8eaed;
   --TWPT-primary-text-alt: var(--TWPT-primary-text);
@@ -11,6 +13,7 @@
   --TWPT-highlighted-item-background: rgba(255, 255, 255, .08);
   --TWPT-thread-read-background: var(--TWPT-highlighted-item-background);
   --TWPT-drawer-background: #2d2e30;
+  --TWPT-drawer-text: #d2cecb;
   --TWPT-button-background: #3c3e42;
   --TWPT-subtle-button-background: rgba(255, 255, 255, .54);
   --TWPT-input-underline: rgba(255, 255, 255, .28);
@@ -27,17 +30,7 @@
   --TWPT-interop-success: #37be5f;
   --TWPT-interop-blue: #7cacf8;
 
-  /* MD3 dark theme variables */
-  --TWPT-md-sys-color-primary: #bda5ff;
-  --TWPT-md-sys-color-on-primary: #000;
-  --TWPT-md-sys-color-surface: var(--TWPT-drawer-background);
-  --TWPT-md-sys-color-on-surface: var(--TWPT-primary-text);
-  --TWPT-md-sys-color-on-surface-rgb: 154, 160, 166;
-  --TWPT-md-sys-color-on-surface-variant: var(--TWPT-secondary-text);
-  --TWPT-md-list-list-divider-color: var(--TWPT-subtle-border);
-  --TWPT-md-ripple-hover-state-layer-color: white;
-  --TWPT-md-ripple-pressed-state-layer-color: white;
-  --TWPT-custom-md-icon-color: var(--TWPT-subtle-button-background);
+  @include md3-theme.dark-theme('TWPT-');
 
   /* Overrides for variables used by the Community Console styles */
   --gm-outlinedtextfield-outline-color: var(--TWPT-card-border);
diff --git a/src/ccDarkTheme/components/_drawer.scss b/src/ccDarkTheme/components/_drawer.scss
index 973b7f8..35fefdd 100644
--- a/src/ccDarkTheme/components/_drawer.scss
+++ b/src/ccDarkTheme/components/_drawer.scss
@@ -25,7 +25,7 @@
 
 material-drawer material-list-item,
     material-drawer material-list-item .title {
-  color: #d2cecb!important;
+  color: var(--TWPT-drawer-text)!important;
 }
 
 material-drawer ec-forum-drawer-item material-checkbox material-icon {
diff --git a/src/ccDarkTheme/layout/_header.scss b/src/ccDarkTheme/layout/_header.scss
index abad975..abfca60 100644
--- a/src/ccDarkTheme/layout/_header.scss
+++ b/src/ccDarkTheme/layout/_header.scss
@@ -30,5 +30,5 @@
 
 // Header menus
 .popup material-list-item {
-  color: #d2cecb!important;
+  color: var(--TWPT-drawer-text)!important;
 }
diff --git a/src/common/components/FormField.js b/src/common/components/FormField.js
new file mode 100644
index 0000000..aa32732
--- /dev/null
+++ b/src/common/components/FormField.js
@@ -0,0 +1,53 @@
+import {css, html, LitElement} from 'lit';
+
+/**
+ * Lite component inspired in the now removed material-web's Formfield.
+ * https://github.com/material-components/material-web/commit/753a03be963f7b5242e98b73d1309abbe9f5bf51
+ */
+export default class TwptFormField extends LitElement {
+  static styles = [
+    css`
+    .formfield {
+      align-items: center;
+      display: inline-flex;
+      vertical-align: middle;
+    }
+
+    label {
+      margin-inline: 0px auto;
+      order: 0;
+      padding-inline: 4px 0px;
+    }
+    `,
+  ];
+
+  render() {
+    return html`
+      <span class="formfield">
+        <slot></slot>
+        <label @click="${this._labelClick}">
+          <slot name="label"></slot>
+        </label>
+      </span>
+    `;
+  }
+
+  _labelClick() {
+    const input = this._input;
+    if (!input || !this.shadowRoot) return;
+
+    input.focus();
+    input.click();
+  }
+
+  get _input() {
+    return this._slottedChildren?.[0] ?? null;
+  }
+
+  get _slottedChildren() {
+    if (!this.shadowRoot) return null;
+    const slot = this.shadowRoot.querySelector('slot');
+    return slot.assignedElements({flatten: true});
+  }
+}
+window.customElements.define('twpt-form-field', TwptFormField);
diff --git a/src/common/styles/md3.js b/src/common/styles/md3.js
index a634fb2..45f6507 100644
--- a/src/common/styles/md3.js
+++ b/src/common/styles/md3.js
@@ -4,23 +4,66 @@
 // theme color scheme (it's defined in variables prefixed with --TWPT).
 export const SHARED_MD3_STYLES = css`
   :host {
-    --md-sys-color-primary: var(--TWPT-md-sys-color-primary, #6750a4);
-    --md-sys-color-on-primary: var(--TWPT-md-sys-color-on-primary, #fff);
-    --md-sys-color-surface: var(--TWPT-md-sys-color-surface, rgb(227, 255, 251));
-    --md-sys-color-on-surface: var(--TWPT-md-sys-color-on-surface);
-    --md-sys-color-on-surface-rgb: var(--TWPT-md-sys-color-on-surface-rgb);
-    --md-sys-color-on-surface-variant: var(--TWPT-md-sys-color-on-surface-variant);
-    --md-list-list-divider-color: var(--TWPT-md-list-list-divider-color);
-    --md-ripple-hover-state-layer-color: var(--TWPT-md-ripple-hover-state-layer-color);
-    --md-ripple-pressed-state-layer-color: var(--TWPT-md-ripple-pressed-state-layer-color);
-    --md-icon-button-unselected-icon-color: var(--TWPT-custom-md-icon-color);
-    --md-icon-button-unselected-hover-icon-color: var(--TWPT-custom-md-icon-color);
-    --md-icon-button-unselected-focus-icon-color: var(--TWPT-custom-md-icon-color);
-    --md-icon-button-unselected-pressed-icon-color: var(--TWPT-custom-md-icon-color);
+    /* Adapted from //src/md3/theme.scss */
+    --md-sys-color-primary: var(--TWPT-md-sys-color-primary, rgb(0 106 96));
+    --md-sys-color-surface-tint: var(--TWPT-md-sys-color-surface-tint, rgb(0 106 96));
+    --md-sys-color-on-primary: var(--TWPT-md-sys-color-on-primary, rgb(255 255 255));
+    --md-sys-color-primary-container: var(--TWPT-md-sys-color-primary-container, rgb(158 242 228));
+    --md-sys-color-on-primary-container: var(--TWPT-md-sys-color-on-primary-container, rgb(0 32 28));
+    --md-sys-color-secondary: var(--TWPT-md-sys-color-secondary, rgb(74 99 95));
+    --md-sys-color-on-secondary: var(--TWPT-md-sys-color-on-secondary, rgb(255 255 255));
+    --md-sys-color-secondary-container: var(--TWPT-md-sys-color-secondary-container, rgb(204 232 226));
+    --md-sys-color-on-secondary-container: var(--TWPT-md-sys-color-on-secondary-container, rgb(5 32 28));
+    --md-sys-color-tertiary: var(--TWPT-md-sys-color-tertiary, rgb(69 97 121));
+    --md-sys-color-on-tertiary: var(--TWPT-md-sys-color-on-tertiary, rgb(255 255 255));
+    --md-sys-color-tertiary-container: var(--TWPT-md-sys-color-tertiary-container, rgb(204 229 255));
+    --md-sys-color-on-tertiary-container: var(--TWPT-md-sys-color-on-tertiary-container, rgb(0 30 49));
+    --md-sys-color-error: var(--TWPT-md-sys-color-error, rgb(186 26 26));
+    --md-sys-color-on-error: var(--TWPT-md-sys-color-on-error, rgb(255 255 255));
+    --md-sys-color-error-container: var(--TWPT-md-sys-color-error-container, rgb(255 218 214));
+    --md-sys-color-on-error-container: var(--TWPT-md-sys-color-on-error-container, rgb(65 0 2));
+    --md-sys-color-background: var(--TWPT-md-sys-color-background, rgb(244 251 248));
+    --md-sys-color-on-background: var(--TWPT-md-sys-color-on-background, rgb(22 29 28));
+    --md-sys-color-surface: var(--TWPT-md-sys-color-surface, rgb(244 251 248));
+    --md-sys-color-on-surface: var(--TWPT-md-sys-color-on-surface, rgb(22 29 28));
+    --md-sys-color-surface-variant: var(--TWPT-md-sys-color-surface-variant, rgb(218 229 225));
+    --md-sys-color-on-surface-variant: var(--TWPT-md-sys-color-on-surface-variant, rgb(63 73 71));
+    --md-sys-color-outline: var(--TWPT-md-sys-color-outline, rgb(111 121 119));
+    --md-sys-color-outline-variant: var(--TWPT-md-sys-color-outline-variant, rgb(190 201 198));
+    --md-sys-color-shadow: var(--TWPT-md-sys-color-shadow, rgb(0 0 0));
+    --md-sys-color-scrim: var(--TWPT-md-sys-color-scrim, rgb(0 0 0));
+    --md-sys-color-inverse-surface: var(--TWPT-md-sys-color-inverse-surface, rgb(43 50 48));
+    --md-sys-color-inverse-on-surface: var(--TWPT-md-sys-color-inverse-on-surface, rgb(236 242 239));
+    --md-sys-color-inverse-primary: var(--TWPT-md-sys-color-inverse-primary, rgb(130 213 200));
+    --md-sys-color-primary-fixed: var(--TWPT-md-sys-color-primary-fixed, rgb(158 242 228));
+    --md-sys-color-on-primary-fixed: var(--TWPT-md-sys-color-on-primary-fixed, rgb(0 32 28));
+    --md-sys-color-primary-fixed-dim: var(--TWPT-md-sys-color-primary-fixed-dim, rgb(130 213 200));
+    --md-sys-color-on-primary-fixed-variant: var(--TWPT-md-sys-color-on-primary-fixed-variant, rgb(0 80 72));
+    --md-sys-color-secondary-fixed: var(--TWPT-md-sys-color-secondary-fixed, rgb(204 232 226));
+    --md-sys-color-on-secondary-fixed: var(--TWPT-md-sys-color-on-secondary-fixed, rgb(5 32 28));
+    --md-sys-color-secondary-fixed-dim: var(--TWPT-md-sys-color-secondary-fixed-dim, rgb(177 204 198));
+    --md-sys-color-on-secondary-fixed-variant: var(--TWPT-md-sys-color-on-secondary-fixed-variant, rgb(51 75 71));
+    --md-sys-color-tertiary-fixed: var(--TWPT-md-sys-color-tertiary-fixed, rgb(204 229 255));
+    --md-sys-color-on-tertiary-fixed: var(--TWPT-md-sys-color-on-tertiary-fixed, rgb(0 30 49));
+    --md-sys-color-tertiary-fixed-dim: var(--TWPT-md-sys-color-tertiary-fixed-dim, rgb(173 202 230));
+    --md-sys-color-on-tertiary-fixed-variant: var(--TWPT-md-sys-color-on-tertiary-fixed-variant, rgb(45 73 97));
+    --md-sys-color-surface-dim: var(--TWPT-md-sys-color-surface-dim, rgb(213 219 217));
+    --md-sys-color-surface-bright: var(--TWPT-md-sys-color-surface-bright, rgb(244 251 248));
+    --md-sys-color-surface-container-lowest: var(--TWPT-md-sys-color-surface-container-lowest, rgb(255 255 255));
+    --md-sys-color-surface-container-low: var(--TWPT-md-sys-color-surface-container-low, rgb(239 245 242));
+    --md-sys-color-surface-container: var(--TWPT-md-sys-color-surface-container, rgb(233 239 237));
+    --md-sys-color-surface-container-high: var(--TWPT-md-sys-color-surface-container-high, rgb(227 234 231));
+    --md-sys-color-surface-container-highest: var(--TWPT-md-sys-color-surface-container-highest, rgb(221 228 225));
+
+    /* Material Design 2 theme */
     --mdc-theme-surface: var(--TWPT-primary-background, #fff);
     --mdc-theme-on-surface: var(--TWPT-primary-text, #000);
-    --mdc-theme-primary: var(--TWPT-md-sys-color-primary, #6750a4);
-    --mdc-theme-on-primary: var(--TWPT-md-sys-color-on-primary, #fff);
+    --mdc-theme-primary: var(--TWPT-md-sys-color-primary, rgb(0 106 96));
+    --mdc-theme-on-primary: var(--TWPT-md-sys-color-on-primary, rgb(255 255 255));
     --mdc-dialog-heading-ink-color: var(--TWPT-primary-text);
   }
+
+  md-icon[filled] {
+    font-variation-settings: 'FILL' 1;
+  }
 `;
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>
     `;
diff --git a/src/contentScripts/communityConsole/threadToolbar/components/index.js b/src/contentScripts/communityConsole/threadToolbar/components/index.js
index bbaa20d..8e1bcd9 100644
--- a/src/contentScripts/communityConsole/threadToolbar/components/index.js
+++ b/src/contentScripts/communityConsole/threadToolbar/components/index.js
@@ -1,6 +1,6 @@
-import '@material/web/formfield/formfield.js';
 import '@material/web/icon/icon.js';
 import '@material/web/switch/switch.js';
+import '../../../../common/components/FormField.js';
 
 import consoleCommonStyles from '!!raw-loader!../../../../static/css/common/console.css';
 import {msg} from '@lit/localize';
@@ -70,11 +70,15 @@
           'Label for the switch which lets users enable/disable the nested view in a thread.',
     });
     return html`
-      <md-formfield label="${nestedViewMsg}">
+      <twpt-form-field>
         <md-switch ${ref(this.nestedViewRef)}
             ?selected=${!this.options?.flattenthreads_switch_enabled}
-            @click=${this._flattenThreadsChanged}>
-      </md-formfield>
+            @change=${this._flattenThreadsChanged}>
+        </md-switch>
+        <span slot="label">
+          ${nestedViewMsg}
+        </span>
+      </twpt-form-field>
     `;
   }
 
diff --git a/src/contentScripts/communityConsole/updateHandler/banner/components/index.js b/src/contentScripts/communityConsole/updateHandler/banner/components/index.js
index 81bd20c..c181a56 100644
--- a/src/contentScripts/communityConsole/updateHandler/banner/components/index.js
+++ b/src/contentScripts/communityConsole/updateHandler/banner/components/index.js
@@ -94,8 +94,8 @@
           <div class="mdc-banner__actions">
             <md-text-button
                 class="mdc-banner__primary-action"
-                label="${reloadMsg}"
                 @click=${this._reloadPage}>
+              ${reloadMsg}
             </md-text-button>
           </div>
         </div>
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptCRImportButton.js b/src/contentScripts/communityConsole/workflows/components/TwptCRImportButton.js
index 935926f..222416f 100644
--- a/src/contentScripts/communityConsole/workflows/components/TwptCRImportButton.js
+++ b/src/contentScripts/communityConsole/workflows/components/TwptCRImportButton.js
@@ -1,4 +1,5 @@
 import '@material/web/button/outlined-button.js';
+import '@material/web/icon/icon.js';
 
 import {html, LitElement} from 'lit';
 
@@ -20,10 +21,10 @@
 
     return html`
       <md-outlined-button
-          icon=${icon}
-          label=${label}
           ?disabled=${this.selected}
           @click=${this._importCR}>
+        <md-icon slot="icon">${icon}</md-icon>
+        ${label}
       </md-outlined-button>
     `;
   }
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js b/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js
index 38d3420..b219b75 100644
--- a/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js
+++ b/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js
@@ -45,13 +45,13 @@
         </p>
         <md-filled-button
             slot="primaryAction"
-            label="Run workflow"
             @click=${this._dispatchConfirmEvent}>
+          Run workflow
         </md-filled-button>
         <md-text-button
             slot="secondaryAction"
-            dialogAction="cancel"
-            label="Cancel">
+            dialogAction="cancel">
+          Cancel
         </md-text-button>
       </mwc-dialog>
     `;
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js
index c6c9a7f..1d38707 100644
--- a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js
+++ b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js
@@ -54,8 +54,8 @@
         <md-text-button
             ?disabled=${this._runner?.status !== 'finished'}
             slot="primaryAction"
-            dialogAction="cancel"
-            label="Close">
+            dialogAction="cancel">
+          Close
         </md-text-button>
       </mwc-dialog>
     `;
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js
index 71782f3..db7359c 100644
--- a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js
+++ b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js
@@ -1,8 +1,7 @@
+import '@material/web/divider/divider.js';
 import '@material/web/icon/icon.js';
-import '@material/web/iconbutton/standard-icon-button.js';
-import '@material/web/list/list-divider.js';
+import '@material/web/iconbutton/icon-button.js';
 import '@material/web/menu/menu.js';
-import '@material/web/menu/menu-button.js';
 import '@material/web/menu/menu-item.js';
 
 import consoleCommonStyles from '!!raw-loader!../../../../static/css/common/console.css';
@@ -22,17 +21,24 @@
     SHARED_MD3_STYLES,
     css`${unsafeCSS(consoleCommonStyles)}`,
     css`
+      .workflows-menu {
+        --md-menu-item-label-text-size: 14px;
+      }
+
       .workflow-item {
-        padding-inline: 1em;
+        --md-menu-item-one-line-container-height: 48px;
+
+        min-width: 250px;
       }
 
       /* Custom styles to override the common button with badge styles */
       .TWPT-btn--with-badge {
-        padding-bottom: 0!important;
+        padding-bottom: 0;
       }
 
       .TWPT-btn--with-badge .TWPT-badge {
-        bottom: 8px!important;
+        bottom: 4px;
+        right: 2px;
       }
     `,
   ];
@@ -51,8 +57,9 @@
       `;
     return map(this.workflows, w => html`
       <md-menu-item
+          class="workflow-item"
           @click="${() => this._dispatchSelectEvent(w.uuid)}">
-        <span class="workflow-item" slot="start">
+        <span slot="start">
           ${w.proto.getName()}
         </span>
       </md-menu-item>
@@ -63,10 +70,11 @@
     return [
       this.renderWorkflowItems(),
       html`
-        <md-list-divider></md-list-divider>
+        <md-divider></md-divider>
         <md-menu-item
+            class="workflow-item"
             @click="${() => this._openWorkflowManager()}">
-          <span class="workflow-item" slot="start">
+          <span slot="start">
             Manage workflows...
           </span>
         </md-menu-item>
@@ -85,15 +93,22 @@
 
   render() {
     return html`
-      <md-menu-button>
-        <div slot="button" class="TWPT-btn--with-badge">
-          <md-standard-icon-button icon="more_vert"></md-standard-icon-button>
+      <span style="position: relative;">
+        <div
+            id="workflows-menu-anchor"
+            class="TWPT-btn--with-badge"
+            @click="${this._toggleMenu}">
+          <md-icon-button>
+            <md-icon>more_vert</md-icon>
+          </md-icon-button>
           ${this.renderBadge()}
         </div>
-        <md-menu ${ref(this.menuRef)} slot="menu">
+        <md-menu ${ref(this.menuRef)}
+            class="workflows-menu"
+            anchor="workflows-menu-anchor">
           ${this.renderMenuItems()}
         </md-menu>
-      </md-menu-button>
+      </span>
     `;
   }
 
@@ -107,6 +122,10 @@
     this.menuRef.value.open = false;
   }
 
+  _toggleMenu() {
+    this.menuRef.value.open = !this.menuRef.value.open;
+  }
+
   _openWorkflowManager() {
     const e = new Event('twpt-open-workflow-manager');
     document.dispatchEvent(e);
diff --git a/src/injections/litComponentsInject.js b/src/injections/litComponentsInject.js
index 09e8ec8..3154681 100644
--- a/src/injections/litComponentsInject.js
+++ b/src/injections/litComponentsInject.js
@@ -9,7 +9,6 @@
 
 import {injectStylesheet} from '../common/contentScriptsUtils.js';
 
-// Also, we import Material Icons since the Community Console uses "Google
-// Material Icons" instead of "Material Icons". This is necessary for the MD3
-// components.
-injectStylesheet('https://fonts.googleapis.com/icon?family=Material+Icons');
+// Also, we import Material Symbols Outlined since the Community Console uses
+// "Google Material Icons" instead. This is necessary for the MD3 components.
+injectStylesheet('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1');
diff --git a/src/injections/updateHandlerLitComponents.js b/src/injections/updateHandlerLitComponents.js
index 9b82ee2..e6449f5 100644
--- a/src/injections/updateHandlerLitComponents.js
+++ b/src/injections/updateHandlerLitComponents.js
@@ -5,4 +5,4 @@
 // This is necessary for the MD3 components. It is also done in
 // litComponentsInject.js, but when installing the extension
 // litComponentsInject.js hasn't been injected yet.
-injectStylesheet('https://fonts.googleapis.com/icon?family=Material+Icons');
+injectStylesheet('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1');
diff --git a/src/md3/theme.scss b/src/md3/theme.scss
new file mode 100644
index 0000000..c06c226
--- /dev/null
+++ b/src/md3/theme.scss
@@ -0,0 +1,105 @@
+// Generated with https://material-foundation.github.io/material-theme-builder/.
+
+@mixin dark-theme($var-prefix: '') {
+  --#{$var-prefix}md-sys-color-primary: rgb(130 213 200);
+  --#{$var-prefix}md-sys-color-surface-tint: rgb(130 213 200);
+  --#{$var-prefix}md-sys-color-on-primary: rgb(0 55 49);
+  --#{$var-prefix}md-sys-color-primary-container: rgb(0 80 72);
+  --#{$var-prefix}md-sys-color-on-primary-container: rgb(158 242 228);
+  --#{$var-prefix}md-sys-color-secondary: rgb(177 204 198);
+  --#{$var-prefix}md-sys-color-on-secondary: rgb(28 53 49);
+  --#{$var-prefix}md-sys-color-secondary-container: rgb(51 75 71);
+  --#{$var-prefix}md-sys-color-on-secondary-container: rgb(204 232 226);
+  --#{$var-prefix}md-sys-color-tertiary: rgb(173 202 230);
+  --#{$var-prefix}md-sys-color-on-tertiary: rgb(21 51 73);
+  --#{$var-prefix}md-sys-color-tertiary-container: rgb(45 73 97);
+  --#{$var-prefix}md-sys-color-on-tertiary-container: rgb(204 229 255);
+  --#{$var-prefix}md-sys-color-error: rgb(255 180 171);
+  --#{$var-prefix}md-sys-color-on-error: rgb(105 0 5);
+  --#{$var-prefix}md-sys-color-error-container: rgb(147 0 10);
+  --#{$var-prefix}md-sys-color-on-error-container: rgb(255 218 214);
+  --#{$var-prefix}md-sys-color-background: rgb(14 21 19);
+  --#{$var-prefix}md-sys-color-on-background: rgb(221 228 225);
+  --#{$var-prefix}md-sys-color-surface: rgb(14 21 19);
+  --#{$var-prefix}md-sys-color-on-surface: rgb(221 228 225);
+  --#{$var-prefix}md-sys-color-surface-variant: rgb(63 73 71);
+  --#{$var-prefix}md-sys-color-on-surface-variant: rgb(190 201 198);
+  --#{$var-prefix}md-sys-color-outline: rgb(137 147 144);
+  --#{$var-prefix}md-sys-color-outline-variant: rgb(63 73 71);
+  --#{$var-prefix}md-sys-color-shadow: rgb(0 0 0);
+  --#{$var-prefix}md-sys-color-scrim: rgb(0 0 0);
+  --#{$var-prefix}md-sys-color-inverse-surface: rgb(221 228 225);
+  --#{$var-prefix}md-sys-color-inverse-on-surface: rgb(43 50 48);
+  --#{$var-prefix}md-sys-color-inverse-primary: rgb(0 106 96);
+  --#{$var-prefix}md-sys-color-primary-fixed: rgb(158 242 228);
+  --#{$var-prefix}md-sys-color-on-primary-fixed: rgb(0 32 28);
+  --#{$var-prefix}md-sys-color-primary-fixed-dim: rgb(130 213 200);
+  --#{$var-prefix}md-sys-color-on-primary-fixed-variant: rgb(0 80 72);
+  --#{$var-prefix}md-sys-color-secondary-fixed: rgb(204 232 226);
+  --#{$var-prefix}md-sys-color-on-secondary-fixed: rgb(5 32 28);
+  --#{$var-prefix}md-sys-color-secondary-fixed-dim: rgb(177 204 198);
+  --#{$var-prefix}md-sys-color-on-secondary-fixed-variant: rgb(51 75 71);
+  --#{$var-prefix}md-sys-color-tertiary-fixed: rgb(204 229 255);
+  --#{$var-prefix}md-sys-color-on-tertiary-fixed: rgb(0 30 49);
+  --#{$var-prefix}md-sys-color-tertiary-fixed-dim: rgb(173 202 230);
+  --#{$var-prefix}md-sys-color-on-tertiary-fixed-variant: rgb(45 73 97);
+  --#{$var-prefix}md-sys-color-surface-dim: rgb(14 21 19);
+  --#{$var-prefix}md-sys-color-surface-bright: rgb(52 59 57);
+  --#{$var-prefix}md-sys-color-surface-container-lowest: rgb(9 15 14);
+  --#{$var-prefix}md-sys-color-surface-container-low: rgb(22 29 28);
+  --#{$var-prefix}md-sys-color-surface-container: rgb(26 33 32);
+  --#{$var-prefix}md-sys-color-surface-container-high: rgb(37 43 42);
+  --#{$var-prefix}md-sys-color-surface-container-highest: rgb(48 54 53);
+}
+
+@mixin light-theme {
+  --md-sys-color-primary: rgb(0 106 96);
+  --md-sys-color-surface-tint: rgb(0 106 96);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(158 242 228);
+  --md-sys-color-on-primary-container: rgb(0 32 28);
+  --md-sys-color-secondary: rgb(74 99 95);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(204 232 226);
+  --md-sys-color-on-secondary-container: rgb(5 32 28);
+  --md-sys-color-tertiary: rgb(69 97 121);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(204 229 255);
+  --md-sys-color-on-tertiary-container: rgb(0 30 49);
+  --md-sys-color-error: rgb(186 26 26);
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(255 218 214);
+  --md-sys-color-on-error-container: rgb(65 0 2);
+  --md-sys-color-background: rgb(244 251 248);
+  --md-sys-color-on-background: rgb(22 29 28);
+  --md-sys-color-surface: rgb(244 251 248);
+  --md-sys-color-on-surface: rgb(22 29 28);
+  --md-sys-color-surface-variant: rgb(218 229 225);
+  --md-sys-color-on-surface-variant: rgb(63 73 71);
+  --md-sys-color-outline: rgb(111 121 119);
+  --md-sys-color-outline-variant: rgb(190 201 198);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(43 50 48);
+  --md-sys-color-inverse-on-surface: rgb(236 242 239);
+  --md-sys-color-inverse-primary: rgb(130 213 200);
+  --md-sys-color-primary-fixed: rgb(158 242 228);
+  --md-sys-color-on-primary-fixed: rgb(0 32 28);
+  --md-sys-color-primary-fixed-dim: rgb(130 213 200);
+  --md-sys-color-on-primary-fixed-variant: rgb(0 80 72);
+  --md-sys-color-secondary-fixed: rgb(204 232 226);
+  --md-sys-color-on-secondary-fixed: rgb(5 32 28);
+  --md-sys-color-secondary-fixed-dim: rgb(177 204 198);
+  --md-sys-color-on-secondary-fixed-variant: rgb(51 75 71);
+  --md-sys-color-tertiary-fixed: rgb(204 229 255);
+  --md-sys-color-on-tertiary-fixed: rgb(0 30 49);
+  --md-sys-color-tertiary-fixed-dim: rgb(173 202 230);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(45 73 97);
+  --md-sys-color-surface-dim: rgb(213 219 217);
+  --md-sys-color-surface-bright: rgb(244 251 248);
+  --md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --md-sys-color-surface-container-low: rgb(239 245 242);
+  --md-sys-color-surface-container: rgb(233 239 237);
+  --md-sys-color-surface-container-high: rgb(227 234 231);
+  --md-sys-color-surface-container-highest: rgb(221 228 225);
+}
diff --git a/src/static/options/workflows.html b/src/static/options/workflows.html
index c00dcda..72cfe41 100644
--- a/src/static/options/workflows.html
+++ b/src/static/options/workflows.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <title>Workflow manager</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <style>
     body {
diff --git a/src/workflows/manager/components/AddDialog.js b/src/workflows/manager/components/AddDialog.js
index 42bfc74..bcd582c 100644
--- a/src/workflows/manager/components/AddDialog.js
+++ b/src/workflows/manager/components/AddDialog.js
@@ -37,13 +37,13 @@
         </wf-workflow-editor>
         <md-filled-button
             slot="primaryAction"
-            label="Add"
             @click=${this._save}>
+          Add
         </md-filled-button>
         <md-text-button
             slot="secondaryAction"
-            dialogAction="cancel"
-            label="Cancel">
+            dialogAction="cancel">
+          Cancel
         </md-text-button>
       </mwc-dialog>
     `;
diff --git a/src/workflows/manager/components/List.js b/src/workflows/manager/components/List.js
index d18571f..9f7ed5f 100644
--- a/src/workflows/manager/components/List.js
+++ b/src/workflows/manager/components/List.js
@@ -1,6 +1,7 @@
 import '@material/web/list/list.js';
 import '@material/web/list/list-item.js';
-import '@material/web/iconbutton/standard-icon-button.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
 import './WorkflowDialog.js';
 
 import {css, html, LitElement, nothing} from 'lit';
@@ -37,13 +38,14 @@
   renderListItems() {
     return map(this.workflows, w => html`
       <md-list-item
-          headline=${w.proto?.getName?.()}
+          type="button"
           @click=${() => this._show(w)}>
+        <div slot="headline">${w.proto?.getName?.()}</div>
         <div slot="end" class="end">
-          <md-standard-icon-button
-              icon="delete"
+          <md-icon-button
               @click=${e => this._showDelete(w.uuid, e)}>
-          </md-standard-icon-button>
+            <md-icon>delete</md-icon>
+          </md-icon-button>
         </div>
       </md-list-item>
     `);
diff --git a/src/workflows/manager/components/WorkflowDialog.js b/src/workflows/manager/components/WorkflowDialog.js
index 19ff796..e990246 100644
--- a/src/workflows/manager/components/WorkflowDialog.js
+++ b/src/workflows/manager/components/WorkflowDialog.js
@@ -40,13 +40,13 @@
         </wf-workflow-editor>
         <md-filled-button
             slot="primaryAction"
-            label="Save"
             @click=${this._save}>
+          Save
         </md-filled-button>
         <md-text-button
             slot="secondaryAction"
-            dialogAction="cancel"
-            label="Cancel">
+            dialogAction="cancel">
+          Cancel
         </md-text-button>
       </mwc-dialog>
     `;
diff --git a/src/workflows/manager/components/WorkflowEditor.js b/src/workflows/manager/components/WorkflowEditor.js
index 33c9224..1818ea7 100644
--- a/src/workflows/manager/components/WorkflowEditor.js
+++ b/src/workflows/manager/components/WorkflowEditor.js
@@ -1,4 +1,5 @@
 import '@material/web/button/outlined-button.js';
+import '@material/web/icon/icon.js';
 import '@material/web/textfield/filled-text-field.js';
 import './ActionEditor.js';
 
@@ -58,9 +59,9 @@
     if (this.readOnly) return nothing;
     return html`
       <md-outlined-button
-          icon="add"
-          label="Add another action"
           @click=${this._addAction}>
+        <md-icon slot="icon">add</md-icon>
+        Add another action
       </md-outlined-button>
     `;
   }
diff --git a/src/workflows/manager/components/actions/ReplyWithCR.js b/src/workflows/manager/components/actions/ReplyWithCR.js
index e3deee7..40a6b9c 100644
--- a/src/workflows/manager/components/actions/ReplyWithCR.js
+++ b/src/workflows/manager/components/actions/ReplyWithCR.js
@@ -1,11 +1,12 @@
-import '@material/web/formfield/formfield.js';
+import '@material/web/icon/icon.js';
 import '@material/web/switch/switch.js';
 import '@material/web/textfield/outlined-text-field.js';
+import '../../../../common/components/FormField.js';
 
 import {css, html, LitElement, nothing} from 'lit';
 import {createRef, ref} from 'lit/directives/ref.js';
 
-import {CCApi} from '../../../../common/api.js';
+import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
 import * as pb from '../../../proto/main_pb.js';
 
 export default class WFActionReplyWithCR extends LitElement {
@@ -15,15 +16,22 @@
     _importerWindow: {type: Object, state: true},
   };
 
-  static styles = css`
-    .form-line {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin-block: 1em;
-      gap: .5rem;
-    }
-  `;
+  static styles = [
+    SHARED_MD3_STYLES,
+    css`
+      .form-line {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-block: 1em;
+        gap: .5rem;
+      }
+
+      .select-cr-btn {
+        --md-outlined-button-icon-size: 24px;
+      }
+    `,
+  ];
 
   cannedResponseRef = createRef();
   subscribeRef = createRef();
@@ -56,27 +64,36 @@
         </md-outlined-text-field>
         ${this.readOnly ? nothing : html`
           <md-outlined-button
-              icon="more"
-              label="Select CR"
+              class="select-cr-btn"
               @click=${this._openCRImporter}>
+            <md-icon slot="icon" filled>more</md-icon>
+            Select CR
           </md-outlined-button>
         `}
       </div>
       <div class="form-line">
-        <md-formfield label="Subscribe to thread">
+        <twpt-form-field>
           <md-switch ${ref(this.subscribeRef)}
               ?selected=${this.subscribe}
               ?disabled=${this.readOnly}
-              @click=${this._subscribeChanged}/>
-        </md-formfield>
+              @change=${this._subscribeChanged}/>
+          </md-switch>
+          <span slot="label">
+            Subscribe to thread
+          </span>
+        </twpt-form-field>
       </div>
       <div class="form-line">
-        <md-formfield label="Mark as answer">
+        <twpt-form-field>
           <md-switch ${ref(this.markAsAnswerRef)}
               ?selected=${this.markAsAnswer}
               ?disabled=${this.readOnly}
-              @click=${this._markAsAnswerChanged}/>
-        </md-formfield>
+              @change=${this._markAsAnswerChanged}/>
+          </md-switch>
+          <span slot="label">
+            Mark as answer
+          </span>
+        </twpt-form-field>
       </div>
     `;
   }
diff --git a/src/workflows/manager/index.js b/src/workflows/manager/index.js
index 113177c..b3b08d2 100644
--- a/src/workflows/manager/index.js
+++ b/src/workflows/manager/index.js
@@ -1,4 +1,5 @@
 import '@material/web/fab/fab.js';
+import '@material/web/icon/icon.js';
 import './components/List.js';
 import './components/AddDialog.js';
 import './components/WorkflowDialog.js';
@@ -50,8 +51,8 @@
       <p>Workflows allow you to run a customized list of actions on a thread easily.</p>
       <wf-list .workflows=${this._workflows}></wf-list>
       <md-fab ${ref(this.addFabRef)}
-          icon="add"
           @click=${this._showAddDialog}>
+        <md-icon slot="icon">add</md-icon>
       </md-fab>
       <wf-add-dialog ${ref(this.addDialog)}>
       </wf-add-dialog>