diff --git a/wax-questions-service/src/NumericalAnswerService/NumericalAnswerContainerNodeView.js b/wax-questions-service/src/NumericalAnswerService/NumericalAnswerContainerNodeView.js
index 9de069ea12cb1a9ea7d1ec5a4909a4b611fe0ecc..263c2ec4147ab65d85c2562f876cd7fa576b9458 100644
--- a/wax-questions-service/src/NumericalAnswerService/NumericalAnswerContainerNodeView.js
+++ b/wax-questions-service/src/NumericalAnswerService/NumericalAnswerContainerNodeView.js
@@ -27,18 +27,6 @@ export default class NumericalAnswerContainerNodeView extends QuestionsNodeView
   }
 
   stopEvent(event) {
-    if (
-      event.target.type === 'textarea' ||
-      event.target.type === 'button' ||
-      !event.target.type
-    ) {
-      return true;
-    }
-
-    return (
-      this.context.pmViews[this.node.attrs.id] !== undefined &&
-      event.target !== undefined &&
-      this.context.pmViews[this.node.attrs.id].dom.contains(event.target)
-    );
+    return true;
   }
 }
diff --git a/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
index eb529f510e5081c98191b4c5e0d2f526a646df2e..1fc6c59f6ca99727ccf07b2463f62ece177e679d 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
@@ -1,7 +1,77 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
+import styled from 'styled-components';
+
+const ExactAnswerContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+`;
+
+const ValueContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-right: 25px;
+  label {
+    font-size: 12px;
+  }
+
+  input:focus {
+    outline: none;
+  }
+`;
+
+const ValueInnerContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
 
 const ExactAnswerComponent = () => {
-  return <>Exact Answer Selected</>;
+  const [exact, setExact] = useState('');
+  const [marginError, setMarginError] = useState('');
+
+  const exactRef = useRef(null);
+  const errorRef = useRef(null);
+
+  const onChangeExact = () => {
+    setExact(exactRef.current.value);
+  };
+
+  const onChangeError = () => {
+    setMarginError(errorRef.current.value);
+  };
+
+  return (
+    <ExactAnswerContainer>
+      <ValueContainer>
+        <label htmlFor="exactAnswer">
+          <ValueInnerContainer>
+            <span>Exact Answer</span>
+            <input
+              name="exactAnswer"
+              onChange={onChangeExact}
+              ref={exactRef}
+              type="text"
+              value={exact}
+            />
+          </ValueInnerContainer>
+        </label>
+      </ValueContainer>
+      <ValueContainer>
+        <label htmlFor="errorAnswer">
+          <ValueInnerContainer>
+            <span>Margin of error (%)</span>
+            <input
+              name="errorAnswer"
+              onChange={onChangeError}
+              ref={errorRef}
+              type="text"
+              value={marginError}
+            />
+          </ValueInnerContainer>
+        </label>
+      </ValueContainer>
+    </ExactAnswerContainer>
+  );
 };
 
 export default ExactAnswerComponent;
diff --git a/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerDropDownCompontent.js b/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerDropDownCompontent.js
index 8b91aa20cebfa7e502d6faed3c96170a78b872c7..aad0a1c803b8454a53e42549d16b5ac9e7907ca7 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerDropDownCompontent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerDropDownCompontent.js
@@ -8,7 +8,12 @@ import React, {
   createRef,
 } from 'react';
 import styled from 'styled-components';
-import { WaxContext, Icon, useOnClickOutside } from 'wax-prosemirror-core';
+import {
+  DocumentHelpers,
+  WaxContext,
+  Icon,
+  useOnClickOutside,
+} from 'wax-prosemirror-core';
 
 const Wrapper = styled.div`
   opacity: ${props => (props.disabled ? '0.4' : '1')};
@@ -66,6 +71,7 @@ const StyledIcon = styled(Icon)`
   width: 18px;
   margin-left: auto;
   position: relative;
+  top: 1px;
 `;
 
 const NumericalAnswerDropDownCompontent = ({ nodeId }) => {
@@ -216,4 +222,15 @@ const NumericalAnswerDropDownCompontent = ({ nodeId }) => {
   return NumericalAnswerDropDown;
 };
 
+const getNodes = view => {
+  const allNodes = DocumentHelpers.findBlockNodes(view.state.doc);
+  const numericalAnswerpContainerNodes = [];
+  allNodes.forEach(node => {
+    if (node.node.type.name === 'numerical_answer_container') {
+      numericalAnswerpContainerNodes.push(node);
+    }
+  });
+  return numericalAnswerpContainerNodes;
+};
+
 export default NumericalAnswerDropDownCompontent;
diff --git a/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
index df1ae7cdd21edf341624cc0b16f48ae5a84cf8fd..08da4a4c3e2ed7b527ab7af7ddcce044100c9366 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 
 const PreciseAnswerComponent = () => {
   return <>Precise Answer Selected</>;
diff --git a/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
index 29b44e0be68a541aa250c969971d27ae1c14718e..20a4cd402deea2a7f379be0f8a2da5f796f776e9 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
@@ -1,7 +1,77 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
+import styled from 'styled-components';
+
+const ExactAnswerContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+`;
+
+const ValueContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-right: 25px;
+  label {
+    font-size: 12px;
+  }
+
+  input:focus {
+    outline: none;
+  }
+`;
+
+const ValueInnerContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
 
 const RangeAnswerComponent = () => {
-  return <>Range Answer Selected</>;
+  const [minValue, setMinValue] = useState('');
+  const [maxValue, setMaxValue] = useState('');
+
+  const minRef = useRef(null);
+  const maxRef = useRef(null);
+
+  const onChangeMin = () => {
+    setMinValue(minRef.current.value);
+  };
+
+  const onChangeMax = () => {
+    setMaxValue(maxRef.current.value);
+  };
+
+  return (
+    <ExactAnswerContainer>
+      <ValueContainer>
+        <label htmlFor="minAnswer">
+          <ValueInnerContainer>
+            <span>Min</span>
+            <input
+              name="minAnswer"
+              onChange={onChangeMin}
+              ref={minRef}
+              type="text"
+              value={minValue}
+            />
+          </ValueInnerContainer>
+        </label>
+      </ValueContainer>
+      <ValueContainer>
+        <label htmlFor="maxAnswer">
+          <ValueInnerContainer>
+            <span>Max</span>
+            <input
+              name="maxAnswer"
+              onChange={onChangeMax}
+              ref={maxRef}
+              type="text"
+              value={maxValue}
+            />
+          </ValueInnerContainer>
+        </label>
+      </ValueContainer>
+    </ExactAnswerContainer>
+  );
 };
 
 export default RangeAnswerComponent;