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/wax-prosemirror-services/src/FillTheGapQuestionService/components/ContainerEditor.js b/wax-prosemirror-services/src/FillTheGapQuestionService/components/ContainerEditor.js
index c14832320f66cc8b5a96a6abf3a110510cb6870a..3a1d20673b3e6c7cfbcc698222d6df63d340e407 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/components/ContainerEditor.js
+++ b/wax-prosemirror-services/src/FillTheGapQuestionService/components/ContainerEditor.js
@@ -31,7 +31,7 @@ const EditorWrapper = styled.div`
   }
 `;
 
-const EditorComponent = ({ node, view, getPos }) => {
+const ContainerEditor = ({ node, view, getPos }) => {
   const editorRef = useRef();
 
   const context = useContext(WaxContext);
@@ -148,4 +148,4 @@ const EditorComponent = ({ node, view, getPos }) => {
   );
 };
 
-export default EditorComponent;
+export default ContainerEditor;
diff --git a/wax-prosemirror-services/src/MatchingService/MatchingQuestion.js b/wax-prosemirror-services/src/MatchingService/MatchingQuestion.js
index cb84528fa5f96a8f2e32d3d47d5765940829ea60..2b3c198ca8d9b53eab0564ada0a3c61c4e2dd967 100644
--- a/wax-prosemirror-services/src/MatchingService/MatchingQuestion.js
+++ b/wax-prosemirror-services/src/MatchingService/MatchingQuestion.js
@@ -1,5 +1,8 @@
 import { injectable } from 'inversify';
 import { wrapIn } from 'prosemirror-commands';
+import { Fragment } from 'prosemirror-model';
+import { findWrapping } from 'prosemirror-transform';
+import { TextSelection } from 'prosemirror-state';
 import { v4 as uuidv4 } from 'uuid';
 import Tools from '../lib/Tools';
 
@@ -11,9 +14,33 @@ class MatchingQuestion extends Tools {
 
   get run() {
     return (state, dispatch) => {
-      wrapIn(state.config.schema.nodes.matching_container, {
-        id: uuidv4(),
-      })(state, dispatch);
+      /* Create Wrapping */
+      const { $from, $to } = state.selection;
+      const range = $from.blockRange($to);
+      const { tr } = state;
+
+      const wrapping =
+        range &&
+        findWrapping(range, state.config.schema.nodes.matching_container, {
+          id: uuidv4(),
+        });
+      if (!wrapping) return false;
+      tr.wrap(range, wrapping);
+
+      const map = tr.mapping.maps[0];
+      let newPos = 0;
+      map.forEach((_from, _to, _newFrom, newTo) => {
+        newPos = newTo;
+      });
+
+      tr.setSelection(TextSelection.create(tr.doc, range.$to.pos));
+      const option = state.config.schema.nodes.matching_option.create(
+        { id: uuidv4() },
+        Fragment.empty,
+      );
+
+      tr.replaceSelectionWith(option);
+      dispatch(tr);
     };
   }
 
diff --git a/wax-prosemirror-services/src/MatchingService/MatchingService.js b/wax-prosemirror-services/src/MatchingService/MatchingService.js
index 77df0ee9bf0aac232c004432965edb3e974c41cf..61c85f60fc53a3f89e77732b62e66f9676e0ca90 100644
--- a/wax-prosemirror-services/src/MatchingService/MatchingService.js
+++ b/wax-prosemirror-services/src/MatchingService/MatchingService.js
@@ -5,7 +5,7 @@ import matchingOptionNode from './schema/matchingOptionNode';
 import MatchingContainerNodeView from './MatchingContainerNodeView';
 import MatchingOptionNodeView from './MatchingOptionNodeView';
 import MatchingContainerComponent from './components/MatchingContainerComponent';
-import MatchingOptionComponent from './MatchingOptionComponent';
+import MatchingOptionComponent from './components/MatchingOptionComponent';
 
 class MatchingService extends Service {
   name = 'MatchingService';
diff --git a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
index e1eecc84cb822ff13ad7347f887ba2f166949cfd..c8cbf1bef1257ce5cdb32693f9847bc362418a5f 100644
--- a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
@@ -4,6 +4,7 @@ import { WaxContext } from 'wax-prosemirror-core';
 import { Icon } from 'wax-prosemirror-components';
 import styled from 'styled-components';
 import FeedbackComponent from './FeedbackComponent';
+import ContainerEditor from './ContainerEditor';
 
 const MatchingContainer = styled.div`
   border: 3px solid #f5f5f7;
@@ -108,7 +109,7 @@ export default ({ node, view, getPos }) => {
           <LeftArea>
             <InputsContainer>
               <FirstOption>
-                {Input()}
+                <ContainerEditor getPos={getPos} node={node} view={view} />
                 {!readOnly && (
                   <ActionButton
                     onClick={() => addOption(node.attrs.id)}