diff --git a/editors/demo/src/Editors.js b/editors/demo/src/Editors.js
index 166168897656c1d73e46585d9f7a08e372190219..1e839e3d33a7e73e494ec5a4903e8c7fa669e16d 100644
--- a/editors/demo/src/Editors.js
+++ b/editors/demo/src/Editors.js
@@ -70,7 +70,7 @@ const Editors = () => {
       case 'ncbi':
         return <NCBI />;
       default:
-        return <Editoria />;
+        return <HHMI />;
     }
   };
 
diff --git a/editors/demo/src/HHMI/config/config.js b/editors/demo/src/HHMI/config/config.js
index be6033507a0f5b5b28347f39eb86dc6a785321f2..3257bebfda40a35db65aba489996d0df6fb12bd1 100644
--- a/editors/demo/src/HHMI/config/config.js
+++ b/editors/demo/src/HHMI/config/config.js
@@ -27,6 +27,8 @@ import {
   MultipleDropDownToolGroupService,
   EssayService,
   EssayToolGroupService,
+  MatchingService,
+  MatchingToolGroupService,
 } from 'wax-prosemirror-services';
 
 import { DefaultSchema } from 'wax-prosemirror-utilities';
@@ -55,6 +57,7 @@ export default {
         'MultipleDropDown',
         'Essay',
         'FillTheGap',
+        'Matching',
         'FullScreen',
       ],
     },
@@ -66,6 +69,8 @@ export default {
   PmPlugins: [columnResizing(), tableEditing(), invisibles([hardBreak()])],
 
   services: [
+    new MatchingService(),
+    new MatchingToolGroupService(),
     new FillTheGapQuestionService(),
     new FillTheGapToolGroupService(),
     new MultipleChoiceQuestionService(),
diff --git a/editors/demo/src/HHMI/layout/HhmiLayout.js b/editors/demo/src/HHMI/layout/HhmiLayout.js
index 6f57c434ce99daabb85d4517f1280bf16458d19d..436f33949df23ec2cbe9b55cba96a3a3d1556533 100644
--- a/editors/demo/src/HHMI/layout/HhmiLayout.js
+++ b/editors/demo/src/HHMI/layout/HhmiLayout.js
@@ -48,7 +48,7 @@ const TopMenu = styled.div`
     margin-right: ${grid(5)};
   }
 
-  > div[data-name='FillTheGap'] {
+  > div[data-name='Matching'] {
     border-right: none;
   }
 `;
diff --git a/wax-prosemirror-services/src/MatchingService/MatchingContainerNodeView.js b/wax-prosemirror-services/src/MatchingService/MatchingContainerNodeView.js
new file mode 100644
index 0000000000000000000000000000000000000000..387c6ccc37b88a493197affc95d3f51e056a3ab5
--- /dev/null
+++ b/wax-prosemirror-services/src/MatchingService/MatchingContainerNodeView.js
@@ -0,0 +1,32 @@
+import QuestionsNodeView from '../lib/helpers/QuestionsNodeView';
+
+export default class MatchingContainerNodeView extends QuestionsNodeView {
+  constructor(
+    node,
+    view,
+    getPos,
+    decorations,
+    createPortal,
+    Component,
+    context,
+  ) {
+    super(node, view, getPos, decorations, createPortal, Component, context);
+
+    this.node = node;
+    this.outerView = view;
+    this.getPos = getPos;
+    this.context = context;
+  }
+
+  static name() {
+    return 'matching_container';
+  }
+
+  stopEvent(event) {
+    if (event.target.type === 'text') {
+      return true;
+    }
+    const innerView = this.context.pmViews[this.node.attrs.id];
+    return innerView && innerView.dom.contains(event.target);
+  }
+}
diff --git a/wax-prosemirror-services/src/MatchingService/MatchingQuestion.js b/wax-prosemirror-services/src/MatchingService/MatchingQuestion.js
index a5f68685ba299e388db925615e5319718b05b5c3..b23b840f1d022004f752bbf963784565e3a8b132 100644
--- a/wax-prosemirror-services/src/MatchingService/MatchingQuestion.js
+++ b/wax-prosemirror-services/src/MatchingService/MatchingQuestion.js
@@ -3,9 +3,9 @@ import Tools from '../lib/Tools';
 
 @injectable()
 class MatchingQuestion extends Tools {
-  title = 'Change to Block Quote';
-  label = 'Block Quote';
-  name = 'BlockQuote';
+  title = 'Add Matching';
+  label = 'Matching';
+  name = 'Matching';
 
   get run() {
     return (state, dispatch) => {};
diff --git a/wax-prosemirror-services/src/MatchingService/MatchingService.js b/wax-prosemirror-services/src/MatchingService/MatchingService.js
index 2106442c45d1c7156920094d5e199100b973495c..83f1f0395ac10e6042a6c108f575e9d12d03f0e0 100644
--- a/wax-prosemirror-services/src/MatchingService/MatchingService.js
+++ b/wax-prosemirror-services/src/MatchingService/MatchingService.js
@@ -1,13 +1,25 @@
 import Service from '../Service';
 import MatchingQuestion from './MatchingQuestion';
+import matchingContainerNode from './schema/matchingContainerNode';
+import MatchingContainerNodeView from './MatchingContainerNodeView';
 
 class MatchingService extends Service {
   name = 'MatchingService';
 
-  boot() {}
-
   register() {
     this.container.bind('MatchingQuestion').to(MatchingQuestion);
+    const createNode = this.container.get('CreateNode');
+    const addPortal = this.container.get('AddPortal');
+
+    createNode({
+      matching_container: matchingContainerNode,
+    });
+
+    // addPortal({
+    //   nodeView: MatchingContainerNodeView,
+    //   component: QuestionComponent,
+    //   context: this.app,
+    // });
   }
 }
 
diff --git a/wax-prosemirror-services/src/MatchingService/schema/matchingContainerNode.js b/wax-prosemirror-services/src/MatchingService/schema/matchingContainerNode.js
new file mode 100644
index 0000000000000000000000000000000000000000..f2d7146045cd74050b2d9b3bfc381a42c1a41fdc
--- /dev/null
+++ b/wax-prosemirror-services/src/MatchingService/schema/matchingContainerNode.js
@@ -0,0 +1,25 @@
+const matchingContainerNode = {
+  attrs: {
+    id: { default: '' },
+    class: { default: 'matching-container' },
+  },
+  group: 'block questions',
+  atom: true,
+  content: 'block*',
+  parseDOM: [
+    {
+      tag: 'div.matching-container',
+      getAttrs(dom) {
+        return {
+          id: dom.getAttribute('id'),
+          class: dom.getAttribute('class'),
+        };
+      },
+    },
+  ],
+  toDOM(node) {
+    return ['div', node.attrs, 0];
+  },
+};
+
+export default matchingContainerNode;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/MatchingToolGroupService/Matching.js b/wax-prosemirror-services/src/WaxToolGroups/MatchingToolGroupService/Matching.js
index 3671ef6fd1318baaca52243ac70b968631969cb4..497d3c5c2f216a8e386ea22f4b884c0dd41f53a4 100644
--- a/wax-prosemirror-services/src/WaxToolGroups/MatchingToolGroupService/Matching.js
+++ b/wax-prosemirror-services/src/WaxToolGroups/MatchingToolGroupService/Matching.js
@@ -4,9 +4,9 @@ import ToolGroup from '../../lib/ToolGroup';
 @injectable()
 class Matching extends ToolGroup {
   tools = [];
-  constructor() {
+  constructor(@inject('MatchingQuestion') matchingQuestion) {
     super();
-    this.tools = [];
+    this.tools = [matchingQuestion];
   }
 }