diff --git a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
index 258846bd0b463046f72bf25482d3711616ae273c..1d58dc8982e4697e85fa50b638f675305b6845ec 100644
--- a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
@@ -110,6 +110,7 @@ export default ({ node, view, getPos }) => {
   const readOnly = !isEditable;
 
   const addOption = () => {
+    if (addOptionRef.current.value.trim() === '') return;
     const obj = { label: addOptionRef.current.value, key: uuidv4() };
     setOptions(prevOptions => [...prevOptions, obj]);
   };
@@ -118,8 +119,6 @@ export default ({ node, view, getPos }) => {
     setOptions(options.filter(option => option.key !== key));
   };
 
-  const addAnswer = () => {};
-
   return (
     <MatchingWrapper>
       <span>Matching</span>
@@ -127,14 +126,6 @@ export default ({ node, view, getPos }) => {
         <QuestionWrapper>
           <InputsContainer>
             <Option>
-              {!readOnly && (
-                <ActionButton
-                  onClick={() => addAnswer(node.attrs.id)}
-                  type="button"
-                >
-                  <StyledIconAction name="plusSquare" />
-                </ActionButton>
-              )}
               <ContainerEditor getPos={getPos} node={node} view={view} />
               <DropDownComponent options={options} />
             </Option>
@@ -143,7 +134,6 @@ export default ({ node, view, getPos }) => {
         {!readOnly && (
           <CreateOptions>
             <OptionArea>
-              Options:
               <ul>
                 {options.map((option, index) => {
                   return (
diff --git a/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js b/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js
index efc17d00e85d22f08872143943820c9a7851260f..4a435943f084730c481bc67ecba1169b035ed388 100644
--- a/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js
@@ -1,7 +1,71 @@
 /* eslint-disable react/prop-types */
-import React from 'react';
+import React, { useContext } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { TextSelection } from 'prosemirror-state';
+import { Fragment } from 'prosemirror-model';
+import styled from 'styled-components';
+import { Icon } from 'wax-prosemirror-components';
+import { WaxContext } from 'wax-prosemirror-core';
 import EditorComponent from './EditorComponent';
 
+const ActionButton = styled.button`
+  height: 24px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding-left: 0;
+`;
+
+const StyledIconAction = styled(Icon)`
+  height: 24px;
+  width: 24px;
+`;
+
 export default ({ node, view, getPos }) => {
-  return <EditorComponent getPos={getPos} node={node} view={view} />;
+  const context = useContext(WaxContext);
+  const {
+    pmViews: { main },
+  } = context;
+
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+
+  const readOnly = !isEditable;
+
+  const addAnswer = () => {
+    console.log(node);
+    const nodeId = node.attrs.id;
+    const newAnswerId = uuidv4();
+    main.state.doc.descendants((editorNode, index) => {
+      if (editorNode.type.name === 'matching_option') {
+        if (editorNode.attrs.id === nodeId) {
+          main.dispatch(
+            main.state.tr.setSelection(
+              new TextSelection(
+                main.state.tr.doc.resolve(editorNode.nodeSize + index),
+              ),
+            ),
+          );
+
+          const newOption = main.state.config.schema.nodes.matching_option.create(
+            { id: newAnswerId },
+            Fragment.empty,
+          );
+          main.dispatch(main.state.tr.replaceSelectionWith(newOption));
+        }
+      }
+    });
+  };
+
+  return (
+    <>
+      {!readOnly && (
+        <ActionButton onClick={addAnswer} type="button">
+          <StyledIconAction name="plusSquare" />
+        </ActionButton>
+      )}
+      <EditorComponent getPos={getPos} node={node} view={view} />
+    </>
+  );
 };
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/AnswerComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/AnswerComponent.js
index 14ca939d22b26569d94d3d2f75cc22ade0f714aa..eea45755ee40eb441da9bcda92a0e3c6b6900399 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/AnswerComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/AnswerComponent.js
@@ -131,9 +131,9 @@ export default ({ node, view, getPos }) => {
           );
           main.dispatch(main.state.tr.replaceSelectionWith(answerOption));
           // create Empty Paragraph
-          setTimeout(() => {
-            helpers.createEmptyParagraph(context, newAnswerId);
-          }, 120);
+          // setTimeout(() => {
+          //   helpers.createEmptyParagraph(context, newAnswerId);
+          // }, 120);
         }
       }
     });