diff --git a/app/components/operative-procedures.js b/app/components/operative-procedures.js
new file mode 100644
index 0000000000..a9749e0c26
--- /dev/null
+++ b/app/components/operative-procedures.js
@@ -0,0 +1,44 @@
+import Ember from 'ember';
+
+const {
+  computed,
+  isEmpty,
+  get,
+  set
+} = Ember;
+
+export function addProcedure(model) {
+  let procedures = get(model, 'procedures');
+  let description = get(model, 'procedureDescription');
+  if (!isEmpty(description)) {
+    procedures.addObject({
+      description
+    });
+    set(model, 'procedureDescription', null);
+  }
+}
+
+export default Ember.Component.extend({
+  model: null,
+  procedureList: null,
+  haveProcedures: computed('model.procedures.[]', {
+    get() {
+      return !isEmpty(get(this, 'model.procedures'));
+    }
+  }),
+
+  actions: {
+    addProcedure() {
+      let model = get(this, 'model');
+      addProcedure(model);
+    },
+
+    deleteProcedure(procedureToDelete) {
+      let model = get(this, 'model');
+      let procedures = get(model, 'procedures');
+      procedures.removeObject(procedureToDelete);
+      model.validate();
+    }
+  }
+
+});
diff --git a/app/templates/components/operative-procedures.hbs b/app/templates/components/operative-procedures.hbs
new file mode 100644
index 0000000000..44cfe7c3ed
--- /dev/null
+++ b/app/templates/components/operative-procedures.hbs
@@ -0,0 +1,35 @@
+<div class="row">
+  {{select-or-typeahead
+    className=(concat (if (not-eq haveProcedures true) 'required ') 'procedure-description col-sm-10')
+    property="procedureDescription"
+    label=(t 'components.operativeProcedures.labels.procedure') list=procedureList
+    selection=procedureDescription hint=false
+  }}
+  <div class="col-sm-2">
+    <label class="control-label">&nbsp;</label>
+    <p class=" form-control-static">
+      <button class="btn btn-primary" {{action 'addProcedure'}}>
+        <span class="octicon octicon-plus"></span> {{t 'components.operativeProcedures.buttons.addProcedure'}}
+      </button>
+    </p>
+  </div>
+</div>
+{{#if haveProcedures}}
+  <h4>{{t 'components.operativeProcedures.titles.procedures'}}</h4>
+  <table class="table">
+    <tr class="table-header">
+      <th>{{t 'components.operativeProcedures.labels.procedure'}}</th>
+      <th>{{t 'labels.action'}}</th>
+    </tr>
+    {{#each model.procedures as |procedure|}}
+      <tr>
+        <td>{{procedure.description}}</td>
+        <td>
+          <button type="button" class="btn btn-default warning" {{action "deleteProcedure" procedure bubbles=false }}>
+            <span class="octicon octicon-x"></span>{{t 'buttons.delete'}}
+          </button>
+        </td>
+      </tr>
+    {{/each}}
+  </table>
+{{/if}}