diff --git a/package-lock.json b/package-lock.json
index 5b8f478..38826bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,8 +10,8 @@
       "license": "MIT",
       "dependencies": {
         "@material/tooltip": "^12.0.0",
+        "@material/web": "^0.1.0-alpha.0",
         "async-mutex": "^0.3.2",
-        "elix": "^15.0.1",
         "google-protobuf": "^3.19.3",
         "grpc-web": "^1.2.1",
         "idb": "^6.1.2",
@@ -207,6 +207,15 @@
         "tslib": "^2.1.0"
       }
     },
+    "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==",
+      "dependencies": {
+        "lit": "^2.3.0",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -769,11 +778,6 @@
       "integrity": "sha512-X/6VRCXWALzdX+RjCtBU6cyg8WZgoxm9YA02COmDOiNJEZ59WkQggDbWZ4t/giHi/3GS+cvdrP6gbLISANAGYA==",
       "dev": true
     },
-    "node_modules/elix": {
-      "version": "15.0.1",
-      "resolved": "https://registry.npmjs.org/elix/-/elix-15.0.1.tgz",
-      "integrity": "sha512-hgL6EDdMO/JBJLmDfaM8AL0f3zQXDIwkjQEhaLi9OTLV+3q445ErkBZuHGK9UzAoIq3I062ldDXRX48l1vfqCg=="
-    },
     "node_modules/enhanced-resolve": {
       "version": "5.8.2",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.2.tgz",
@@ -2132,9 +2136,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "node_modules/uri-js": {
       "version": "4.4.1",
@@ -2523,6 +2527,15 @@
         "tslib": "^2.1.0"
       }
     },
+    "@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==",
+      "requires": {
+        "lit": "^2.3.0",
+        "tslib": "^2.4.0"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2981,11 +2994,6 @@
       "integrity": "sha512-X/6VRCXWALzdX+RjCtBU6cyg8WZgoxm9YA02COmDOiNJEZ59WkQggDbWZ4t/giHi/3GS+cvdrP6gbLISANAGYA==",
       "dev": true
     },
-    "elix": {
-      "version": "15.0.1",
-      "resolved": "https://registry.npmjs.org/elix/-/elix-15.0.1.tgz",
-      "integrity": "sha512-hgL6EDdMO/JBJLmDfaM8AL0f3zQXDIwkjQEhaLi9OTLV+3q445ErkBZuHGK9UzAoIq3I062ldDXRX48l1vfqCg=="
-    },
     "enhanced-resolve": {
       "version": "5.8.2",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.2.tgz",
@@ -3939,9 +3947,9 @@
       }
     },
     "tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "uri-js": {
       "version": "4.4.1",
diff --git a/package.json b/package.json
index a460742..4c90fd3 100644
--- a/package.json
+++ b/package.json
@@ -40,8 +40,8 @@
   "private": true,
   "dependencies": {
     "@material/tooltip": "^12.0.0",
+    "@material/web": "^0.1.0-alpha.0",
     "async-mutex": "^0.3.2",
-    "elix": "^15.0.1",
     "google-protobuf": "^3.19.3",
     "grpc-web": "^1.2.1",
     "idb": "^6.1.2",
diff --git a/src/contentScripts/communityConsole/main.js b/src/contentScripts/communityConsole/main.js
index 95045a4..964a647 100644
--- a/src/contentScripts/communityConsole/main.js
+++ b/src/contentScripts/communityConsole/main.js
@@ -10,8 +10,9 @@
 // #!endif
 import InfiniteScroll from './infiniteScroll.js';
 import {unifiedProfilesFix} from './unifiedProfiles.js';
+import Workflows from './workflows/workflows.js';
 
-var mutationObserver, options, avatars, infiniteScroll;
+var mutationObserver, options, avatars, infiniteScroll, workflows;
 
 const watchedNodesSelectors = [
   // App container (used to set up the intersection observer and inject the dark
@@ -128,6 +129,12 @@
     }
     // #!endif
 
+    // Inject the worflows menu in the thread list if the option is currently
+    // enabled.
+    if (workflows.shouldAddThreadListBtn(node)) {
+      workflows.addThreadListBtnIfEnabled(node);
+    }
+
     // Inject the batch lock button in the thread list if the option is
     // currently enabled.
     if (batchLock.shouldAddButton(node)) {
@@ -227,6 +234,7 @@
   // Initialize classes needed by the mutation observer
   avatars = new AvatarsHandler();
   infiniteScroll = new InfiniteScroll();
+  workflows = new Workflows();
 
   // autoRefresh, extraInfo and threadPageDesignWarning are initialized in
   // start.js
@@ -287,4 +295,6 @@
   // Extra info
   injectStylesheet(chrome.runtime.getURL('css/extrainfo.css'));
   injectStylesheet(chrome.runtime.getURL('css/extrainfo_perforumstats.css'));
+  // Workflows
+  injectScript(chrome.runtime.getURL('workflowComponentsInject.bundle.js'));
 });
diff --git a/src/contentScripts/communityConsole/utils/common.js b/src/contentScripts/communityConsole/utils/common.js
index 2e33f99..052b580 100644
--- a/src/contentScripts/communityConsole/utils/common.js
+++ b/src/contentScripts/communityConsole/utils/common.js
@@ -31,6 +31,19 @@
   return [badge, badgeTooltip];
 }
 
+// Adds an element to the thread list actions bar next to the button given by
+// |originalBtn|.
+export function addElementToThreadListActions(originalBtn, element) {
+  var duplicateBtn =
+      originalBtn.parentNode.querySelector('[debugid="mark-duplicate-button"]');
+  if (duplicateBtn)
+    duplicateBtn.parentNode.insertBefore(
+        element, (duplicateBtn.nextSibling || duplicateBtn));
+  else
+    originalBtn.parentNode.insertBefore(
+        element, (originalBtn.nextSibling || originalBtn));
+}
+
 // Adds a button to the thread list actions bar next to the button given by
 // |originalBtn|. The button will have icon |icon|, when hovered it will display
 // |tooltip|, and will have a debugid attribute with value |debugId|.
@@ -46,14 +59,7 @@
   [badge, badgeTooltip] = createExtBadge();
   clone.append(badge);
 
-  var duplicateBtn =
-      originalBtn.parentNode.querySelector('[debugid="mark-duplicate-button"]');
-  if (duplicateBtn)
-    duplicateBtn.parentNode.insertBefore(
-        clone, (duplicateBtn.nextSibling || duplicateBtn));
-  else
-    originalBtn.parentNode.insertBefore(
-        clone, (originalBtn.nextSibling || originalBtn));
+  addElementToThreadListActions(originalBtn, clone);
 
   createPlainTooltip(clone, tooltip);
   new MDCTooltip(badgeTooltip);
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js
new file mode 100644
index 0000000..d36e730
--- /dev/null
+++ b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js
@@ -0,0 +1,40 @@
+import '@material/web/iconbutton/standard-icon-button.js';
+import '@material/web/menu/menu-button.js';
+import '@material/web/menu/menu.js';
+import '@material/web/menu/menu-item.js';
+
+import {css, html, LitElement} from 'lit';
+import {map} from 'lit/directives/map.js';
+import {range} from 'lit/directives/range.js';
+
+export default class TwptWorkflowsMenu extends LitElement {
+  static styles = css`
+    .workflow-item {
+      padding-inline: 1em;
+    }
+  `;
+
+  renderMenuItems() {
+    return map(range(8), i => html`
+      <md-menu-item @click="${this._showWorkflow}" data-workflow-id="${i}"><span class="workflow-item" slot="start">Workflow ${i}</span></md-menu-item>
+    `);
+  }
+
+  render() {
+    // The button is based in the button created in the
+    // addButtonToThreadListActions function in file ../../utils/common.js.
+    return html`
+      <md-menu-button>
+        <md-standard-icon-button slot="button" icon="more_vert"></md-standard-icon-button>
+        <md-menu slot="menu">
+          ${this.renderMenuItems()}
+        </md-menu>
+      </md-menu-button>
+    `;
+  }
+
+  _showWorkflow(e) {
+    console.log(`Clicked workflow ${e.target.getAttribute('data-workflow-id')}.`);
+  }
+}
+window.customElements.define('twpt-workflows-menu', TwptWorkflowsMenu);
diff --git a/src/contentScripts/communityConsole/workflows/workflows.js b/src/contentScripts/communityConsole/workflows/workflows.js
new file mode 100644
index 0000000..1c99729
--- /dev/null
+++ b/src/contentScripts/communityConsole/workflows/workflows.js
@@ -0,0 +1,21 @@
+import {isOptionEnabled} from '../../../common/optionsUtils.js';
+import {addElementToThreadListActions, shouldAddBtnToActionBar} from '../utils/common.js';
+
+const wfDebugId = 'twpt-workflows';
+
+export default class Workflows {
+  constructor() {}
+
+  addThreadListBtnIfEnabled(readToggle) {
+    isOptionEnabled('workflows').then(isEnabled => {
+      if (isEnabled) {
+        const menu = document.createElement('twpt-workflows-menu');
+        addElementToThreadListActions(readToggle, menu);
+      }
+    });
+  }
+
+  shouldAddThreadListBtn(node) {
+    return shouldAddBtnToActionBar(wfDebugId, node);
+  }
+};
diff --git a/src/injections/workflowComponentsInject.js b/src/injections/workflowComponentsInject.js
new file mode 100644
index 0000000..c15111e
--- /dev/null
+++ b/src/injections/workflowComponentsInject.js
@@ -0,0 +1,12 @@
+// This file imports necessary web components used for the workflows feature.
+// This is done by injecting this javascript file instead of placing this code
+// directly in the content script because `window.customElements` doesn't exist
+// in content scripts.
+import '../contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js';
+
+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');
diff --git a/templates/manifest.gjson b/templates/manifest.gjson
index e3eb47f..1a23c85 100644
--- a/templates/manifest.gjson
+++ b/templates/manifest.gjson
@@ -84,6 +84,7 @@
         "batchLockInject.bundle.js",
         "xhrInterceptorInject.bundle.js",
         "extraInfoInject.bundle.js",
+        "workflowComponentsInject.bundle.js",
 
         "css/profileindicator_inject.css",
         "css/ccdarktheme.css",
diff --git a/webpack.config.js b/webpack.config.js
index 3591c97..a86a8fd 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -52,6 +52,7 @@
     batchLockInject: './src/injections/batchLock.js',
     xhrInterceptorInject: './src/injections/xhrInterceptor.js',
     extraInfoInject: './src/injections/extraInfo.js',
+    workflowComponentsInject: './src/injections/workflowComponentsInject.js',
 
     // Options page
     optionsCommon: './src/options/optionsCommon.js',