diff --git a/src/workflows/manager/components/AddDialog.js b/src/workflows/manager/components/AddDialog.js
index a2b5691..8bf63db 100644
--- a/src/workflows/manager/components/AddDialog.js
+++ b/src/workflows/manager/components/AddDialog.js
@@ -29,7 +29,6 @@
   render() {
     return html`
       <mwc-dialog
-          heading="New workflow"
           ?open=${this.open}
           @opening=${this._openingDialog}
           @closing=${this._closingDialog}
diff --git a/src/workflows/manager/components/WorkflowEditor.js b/src/workflows/manager/components/WorkflowEditor.js
index 7da2a4d..4a8ab90 100644
--- a/src/workflows/manager/components/WorkflowEditor.js
+++ b/src/workflows/manager/components/WorkflowEditor.js
@@ -1,7 +1,9 @@
 import '@material/web/button/outlined-button.js';
+import '@material/web/textfield/filled-text-field.js';
 import './ActionEditor.js';
 
-import {html, LitElement, nothing} from 'lit';
+import {css, html, LitElement, nothing} from 'lit';
+import {createRef, ref} from 'lit/directives/ref.js';
 import {repeat} from 'lit/directives/repeat.js';
 
 import * as pb from '../../proto/main_pb.js';
@@ -12,12 +14,33 @@
     readOnly: {type: Boolean},
   };
 
+  static styles = css`
+    .name {
+      width: 100%;
+      margin-bottom: 20px;
+    }
+  `;
+
+  nameRef = createRef();
+
   constructor() {
     super();
     this.workflow = new pb.workflows.Workflow();
     this.readOnly = false;
   }
 
+  renderName() {
+    return html`
+      <md-filled-text-field ${ref(this.nameRef)}
+          class="name"
+          placeholder="Untitled workflow"
+          value=${this.workflow.getName()}
+          required
+          @input=${this._nameChanged}>
+      </md-filled-text-field>
+    `;
+  }
+
   renderActions() {
     return repeat(this._actions(), (action, i) => html`
       <wf-action-editor
@@ -43,6 +66,7 @@
 
   render() {
     return [
+      this.renderName(),
       this.renderActions(),
       this.renderAddActionBtn(),
     ];
@@ -50,12 +74,16 @@
 
   save() {
     let allValid = true;
+
+    // Check the workflow name is set
+    allValid &&= this.nameRef.value.reportValidity();
+
+    // Check all the actions are well-formed
     const actionEditors = this.renderRoot.querySelectorAll('wf-action-editor');
-    for (const editor of actionEditors) {
-      const isValid = editor.checkValidity();
-      if (!isValid) allValid = false;
-    }
+    for (const editor of actionEditors) allValid &&= editor.checkValidity();
+
     // @TODO: Save if allValid === true
+
     return allValid;
   }
 
@@ -63,6 +91,11 @@
     return this.workflow.getActionsList();
   }
 
+  _nameChanged() {
+    this.workflow.setName(this.nameRef.value.value);
+    this._dispatchUpdateEvent();
+  }
+
   _addAction() {
     let action = new pb.workflows.Action();
     let rAction = new pb.workflows.Action.ReplyWithCRAction();