diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js
index a36386841e9cc842a1cef6c7daa49bf2b212f08e..7259ea37b9b009d29ef9d8ffa31c36f4f1644dd1 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js
@@ -4,50 +4,8 @@
 import React, { useState, useContext, useEffect } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
 import { DocumentHelpers } from 'wax-prosemirror-utilities';
-import { Icon } from 'wax-prosemirror-components';
 import { NodeSelection } from 'prosemirror-state';
-import styled from 'styled-components';
-import Switch from '../../components/Switch';
-
-const StyledSwitch = styled(Switch)`
-  display: flex;
-  margin-left: auto;
-
-  .ant-switch-checked {
-    background-color: green;
-  }
-`;
-
-const AnswerContainer = styled.span`
-  margin-left: auto;
-`;
-
-const Correct = styled.span`
-  margin-right: 10px;
-  span {
-   color: #008000;
-`;
-
-const Answer = styled.span`
-  margin-right: 10px;
-  span {
-    color: ${props => (props.isCorrect ? ' #008000' : 'red')};
-  }
-`;
-
-const StyledIconCorrect = styled(Icon)`
-  fill: #008000;
-  pointer-events: none;
-  height: 24px;
-  width: 24px;
-`;
-
-const StyledIconWrong = styled(Icon)`
-  fill: red;
-  pointer-events: none;
-  height: 24px;
-  width: 24px;
-`;
+import YesNoSwitch from '../../components/YesNoSwitch';
 
 const CustomSwitch = ({ node, getPos }) => {
   const context = useContext(WaxContext);
@@ -126,35 +84,14 @@ const CustomSwitch = ({ node, getPos }) => {
     main.dispatch(tr);
   };
 
-  if (customProps.showFeedBack) {
-    const correct = node.attrs.correct ? 'YES' : 'NO';
-    const answer = node.attrs.answer ? 'YES' : 'NO';
-    const isCorrect = node.attrs.correct === node.attrs.answer;
-
-    return (
-      <AnswerContainer>
-        <Correct>
-          Correct:
-          <span>{correct}</span>
-        </Correct>
-
-        <Answer isCorrect={isCorrect}>
-          Answer: <span>{answer}</span>
-        </Answer>
-        {isCorrect && <StyledIconCorrect name="done" />}
-        {!isCorrect && <StyledIconWrong name="close" />}
-      </AnswerContainer>
-    );
-  }
-
   return (
-    <StyledSwitch
-      checked={isEditable ? checked : checkedAnswerMode}
-      checkedChildren="YES"
-      label="Correct?"
-      labelPosition="left"
-      onChange={handleChange}
-      unCheckedChildren="NO"
+    <YesNoSwitch
+      checked={checked}
+      checkedAnswerMode={checkedAnswerMode}
+      customProps={customProps}
+      handleChange={handleChange}
+      isEditable={isEditable}
+      node={node}
     />
   );
 };
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js
index 76d2659ac2d9eeab6ed0dc161e36306296fd71fa..b0887514ea196df3ee084241d0286397a29ca19a 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js
@@ -4,46 +4,7 @@
 import React, { useState, useContext, useEffect } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
 import { DocumentHelpers } from 'wax-prosemirror-utilities';
-import { Icon } from 'wax-prosemirror-components';
-import styled from 'styled-components';
-import Switch from './Switch';
-
-const StyledSwitch = styled(Switch)`
-  display: flex;
-  margin-left: auto;
-`;
-
-const AnswerContainer = styled.span`
-  margin-left: auto;
-`;
-
-const Correct = styled.span`
-  margin-right: 10px;
-  span {
-    color: #008000;
-  }
-`;
-
-const Answer = styled.span`
-  margin-right: 10px;
-  span {
-    color: ${props => (props.isCorrect ? ' #008000' : 'red')};
-  }
-`;
-
-const StyledIconCorrect = styled(Icon)`
-  fill: #008000;
-  pointer-events: none;
-  height: 24px;
-  width: 24px;
-`;
-
-const StyledIconWrong = styled(Icon)`
-  fill: red;
-  pointer-events: none;
-  height: 24px;
-  width: 24px;
-`;
+import YesNoSwitch from './YesNoSwitch';
 
 const CustomSwitch = ({ node, getPos }) => {
   const context = useContext(WaxContext);
@@ -89,34 +50,14 @@ const CustomSwitch = ({ node, getPos }) => {
     });
   };
 
-  if (customProps.showFeedBack) {
-    const correct = node.attrs.correct ? 'YES' : 'NO';
-    const answer = node.attrs.answer ? 'YES' : 'NO';
-    const isCorrect = node.attrs.correct === node.attrs.answer;
-
-    return (
-      <AnswerContainer>
-        <Correct>
-          Correct:
-          <span>{correct}</span>
-        </Correct>
-
-        <Answer isCorrect={isCorrect}>
-          Answer: <span>{answer}</span>
-        </Answer>
-        {isCorrect && <StyledIconCorrect name="done" />}
-        {!isCorrect && <StyledIconWrong name="close" />}
-      </AnswerContainer>
-    );
-  }
   return (
-    <StyledSwitch
-      checked={isEditable ? checked : checkedAnswerMode}
-      checkedChildren="YES"
-      label="Correct?"
-      labelPosition="left"
-      onChange={handleChange}
-      unCheckedChildren="NO"
+    <YesNoSwitch
+      checked={checked}
+      checkedAnswerMode={checkedAnswerMode}
+      customProps={customProps}
+      handleChange={handleChange}
+      isEditable={isEditable}
+      node={node}
     />
   );
 };
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/YesNoSwitch.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/YesNoSwitch.js
new file mode 100644
index 0000000000000000000000000000000000000000..020056983c1288a48896b7ebd268c89973fc509f
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/YesNoSwitch.js
@@ -0,0 +1,83 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import styled from 'styled-components';
+import { Icon } from 'wax-prosemirror-components';
+import Switch from './Switch';
+
+const StyledSwitch = styled(Switch)`
+  display: flex;
+  margin-left: auto;
+`;
+
+const AnswerContainer = styled.span`
+  margin-left: auto;
+`;
+
+const Correct = styled.span`
+  margin-right: 10px;
+  span {
+    color: #008000;
+  }
+`;
+
+const Answer = styled.span`
+  margin-right: 10px;
+  span {
+    color: ${props => (props.isCorrect ? ' #008000' : 'red')};
+  }
+`;
+
+const StyledIconCorrect = styled(Icon)`
+  fill: #008000;
+  pointer-events: none;
+  height: 24px;
+  width: 24px;
+`;
+
+const StyledIconWrong = styled(Icon)`
+  fill: red;
+  pointer-events: none;
+  height: 24px;
+  width: 24px;
+`;
+const YesNoSwitch = ({
+  customProps,
+  node,
+  isEditable,
+  handleChange,
+  checked,
+  checkedAnswerMode,
+}) => {
+  if (customProps.showFeedBack) {
+    const correct = node.attrs.correct ? 'YES' : 'NO';
+    const answer = node.attrs.answer ? 'YES' : 'NO';
+    const isCorrect = node.attrs.correct === node.attrs.answer;
+
+    return (
+      <AnswerContainer>
+        <Correct>
+          Correct:
+          <span>{correct}</span>
+        </Correct>
+
+        <Answer isCorrect={isCorrect}>
+          Answer: <span>{answer}</span>
+        </Answer>
+        {isCorrect && <StyledIconCorrect name="done" />}
+        {!isCorrect && <StyledIconWrong name="close" />}
+      </AnswerContainer>
+    );
+  }
+  return (
+    <StyledSwitch
+      checked={isEditable ? checked : checkedAnswerMode}
+      checkedChildren="YES"
+      label="Correct?"
+      labelPosition="left"
+      onChange={handleChange}
+      unCheckedChildren="NO"
+    />
+  );
+};
+
+export default YesNoSwitch;