diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/EditorComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/EditorComponent.js
index 68a2ee3f7f524966063ee8532b3719eddc6d564f..ee1b48dea14279210a1a4f3ba803c7c3c15b08da 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/EditorComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/EditorComponent.js
@@ -1,6 +1,6 @@
 /* eslint-disable react/destructuring-assignment */
 /* eslint-disable react/prop-types */
-/* eslint-disable react-hooks/exhaustive-deps */
+
 import React, { useContext, useRef, useEffect } from 'react';
 import styled from 'styled-components';
 import { EditorView } from 'prosemirror-view';
@@ -17,7 +17,6 @@ const EditorWrapper = styled.div`
   display: flex;
   flex: 2 1 auto;
   justify-content: left;
-  margin-right: 15px;
 
   .ProseMirror {
     white-space: break-spaces;
@@ -123,7 +122,7 @@ const EditorComponent = ({ node, view, getPos }) => {
       },
     );
 
-    //Set Each note into Wax's Context
+    // Set Each note into Wax's Context
     context.updateView(
       {
         [questionId]: questionView,
@@ -134,15 +133,15 @@ const EditorComponent = ({ node, view, getPos }) => {
   }, []);
 
   const dispatchTransaction = tr => {
-    let { state, transactions } = questionView.state.applyTransaction(tr);
+    const { state, transactions } = questionView.state.applyTransaction(tr);
     questionView.updateState(state);
     context.updateView({}, questionId);
 
     if (!tr.getMeta('fromOutside')) {
-      let outerTr = view.state.tr,
-        offsetMap = StepMap.offset(getPos() + 1);
+      const outerTr = view.state.tr;
+      const offsetMap = StepMap.offset(getPos() + 1);
       for (let i = 0; i < transactions.length; i++) {
-        let steps = transactions[i].steps;
+        const { steps } = transactions[i];
         for (let j = 0; j < steps.length; j++)
           outerTr.step(steps[j].map(offsetMap));
       }
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/QuestionComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/QuestionComponent.js
index 0cfa34aec6dd286216bcd614c95c00b339a9e6ad..3a3e2068a4b43a4adbd79a46d7017fcc6504a0a8 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/QuestionComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/QuestionComponent.js
@@ -14,7 +14,7 @@ import Button from './Button';
 
 const Wrapper = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   width: 100%;
 `;
 
@@ -34,7 +34,8 @@ const QuestionNunber = styled.span`
 
 const QuestionControlsWrapper = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  width: 100%;
 `;
 
 const QuestionWrapper = styled.div`
@@ -124,34 +125,33 @@ export default ({ node, view, getPos }) => {
 
   return (
     <Wrapper>
-      <InfoRow>
-        <QuestionNunber />
-      </InfoRow>
       <QuestionControlsWrapper>
+        <InfoRow>
+          <QuestionNunber />
+          <SwitchComponent getPos={getPos} node={node} />
+        </InfoRow>
         <QuestionWrapper>
           <QuestionData>
             <EditorComponent getPos={getPos} node={node} view={view} />
-
-            <SwitchComponent getPos={getPos} node={node} />
           </QuestionData>
           <FeedbackComponent getPos={getPos} node={node} view={view} />
         </QuestionWrapper>
-        <IconsWrapper>
-          {showAddIcon && !readOnly && (
-            <Button
-              onClick={() => addOption(node.attrs.id)}
-              icon={<PlusSquareOutlined title="Add Option" />}
-            />
-          )}
-          {showRemoveIcon && !readOnly && (
-            <Button
-              icon={
-                <DeleteOutlined onClick={removeOption} title="Delete Option" />
-              }
-            />
-          )}
-        </IconsWrapper>
       </QuestionControlsWrapper>
+      <IconsWrapper>
+        {showAddIcon && !readOnly && (
+          <Button
+            icon={<PlusSquareOutlined title="Add Option" />}
+            onClick={() => addOption(node.attrs.id)}
+          />
+        )}
+        {showRemoveIcon && !readOnly && (
+          <Button
+            icon={
+              <DeleteOutlined onClick={removeOption} title="Delete Option" />
+            }
+          />
+        )}
+      </IconsWrapper>
     </Wrapper>
   );
 };
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js
index 6231f290cf63212639f4bb08a40a77d5f947cbe0..0d2b5c97b286e17f9ece73fef804a5c17397934c 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useState, useContext, useEffect } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
@@ -10,11 +11,11 @@ const StyledSwitch = styled(Switch)`
   margin-left: auto;
 
   span:nth-child(1) {
-    bottom: 36px;
-    display: flex;
-    left: 4px;
-    position: relative;
-    width: 0px;
+    // bottom: 36px;
+    // display: flex;
+    // left: 4px;
+    // position: relative;
+    // width: 0px;
   }
 
   .ant-switch-checked {