diff --git a/src/workflows/manager/index.js b/src/workflows/manager/index.js
index a9332de..af0f653 100644
--- a/src/workflows/manager/index.js
+++ b/src/workflows/manager/index.js
@@ -6,6 +6,7 @@
 import {createRef, ref} from 'lit/directives/ref.js';
 
 import {SHARED_MD3_STYLES} from '../../common/styles/md3.js';
+import {default as WorkflowsStorage, kWorkflowsDataKey} from '../workflowsStorage.js';
 
 export default class WFApp extends LitElement {
   static styles = [
@@ -32,10 +33,21 @@
 
   addFabRef = createRef();
 
+  constructor() {
+    super();
+    this._workflows = undefined;
+    this._updateWorkflows();
+    chrome.storage.onChanged.addListener((changes, areaName) => {
+      if (areaName == 'local' && changes[kWorkflowsDataKey])
+        this._updateWorkflows();
+    });
+  }
+
   render() {
     return html`
       <h1>Workflows</h1>
-      <wf-list></wf-list>
+      <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}>
@@ -44,6 +56,13 @@
     `;
   }
 
+  _updateWorkflows() {
+    WorkflowsStorage.getAll(/* asProtobuf = */ true).then(workflows => {
+      this._workflows = workflows;
+      this.requestUpdate();
+    });
+  }
+
   _showAddDialog() {
     this.renderRoot.querySelector('wf-add-dialog').open = true;
   }