diff --git a/packages/worksheet/src/components/HTMLPrint.tsx b/packages/worksheet/src/components/HTMLPrint.tsx
new file mode 100644
index 00000000..f436cf4e
--- /dev/null
+++ b/packages/worksheet/src/components/HTMLPrint.tsx
@@ -0,0 +1,18 @@
+// Lib
+import * as React from "react";
+
+// Interface
+export interface IHtmlPrint {
+  html: string;
+}
+
+// Utility Component that returns a div using a markup
+// TODO: find an alternate way to avoid using innerHTML
+const HtmlPrint: React.FC<IHtmlPrint> = ({ html }) => {
+  const createMarkup = (markup) => {
+    return { __html: markup };
+  };
+  return <div dangerouslySetInnerHTML={createMarkup(html)} />;
+};
+
+export default HtmlPrint;
diff --git a/packages/worksheet/src/components/QuestionBox/QuestionOption.tsx b/packages/worksheet/src/components/QuestionBox/QuestionOption.tsx
new file mode 100644
index 00000000..619390e3
--- /dev/null
+++ b/packages/worksheet/src/components/QuestionBox/QuestionOption.tsx
@@ -0,0 +1,42 @@
+// Lib
+import * as React from "react";
+import { HStack } from "native-base";
+import { BodyMedium, overrideColorTheme } from "@shiksha/common-lib";
+
+// Components
+import HtmlPrint from "components/HTMLPrint";
+
+// Constants
+import colorTheme from "../../colorTheme";
+const alphabet = ["a", "b", "c", "d", "e", "f"];
+const colors = overrideColorTheme(colorTheme);
+
+// Interface
+export interface IQuestionOption {
+  item: any;
+  isAnswerHide: boolean;
+  index: number;
+}
+
+// Returns a single option for a Question
+const QuestionOption: React.FC<IQuestionOption> = ({
+  item,
+  isAnswerHide,
+  index,
+}) => {
+  return (
+    <HStack space="1" alignItems="baseline">
+      <BodyMedium
+        textTransform="inherit"
+        color={item.answer && !isAnswerHide ? colors.success : ""}
+      >
+        {alphabet[index] + ". "}
+      </BodyMedium>
+      <BodyMedium color={item.answer && !isAnswerHide ? colors.success : ""}>
+        <HtmlPrint html={item?.value?.body} />
+      </BodyMedium>
+    </HStack>
+  );
+};
+
+export default QuestionOption;
diff --git a/packages/worksheet/src/components/QuestionBox/index.js b/packages/worksheet/src/components/QuestionBox/index.js
deleted file mode 100644
index 37827669..00000000
--- a/packages/worksheet/src/components/QuestionBox/index.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from "react";
-import { Box, HStack, VStack } from "native-base";
-import { colourPalette } from "constants/colours";
-import "../../App.css";
-import { BodyMedium, overrideColorTheme } from "@shiksha/common-lib";
-import { useTranslation } from "react-i18next";
-import colorTheme from "../../colorTheme";
-const colors = overrideColorTheme(colorTheme);
-
-const styles = { questionDiv: { display: "flex" } };
-
-const HtmlPrint = ({ html }) => {
-  const createMarkup = (markup) => {
-    return { __html: markup };
-  };
-  return <div dangerouslySetInnerHTML={createMarkup(html)} />;
-};
-
-const QuestionBox = ({ questionObject, isAnswerHide, infoIcon, _box }) => {
-  const { t } = useTranslation();
-
-  const alphabet = ["a", "b", "c", "d", "e", "f"];
-
-  return (
-    <Box shadow={2} rounded="xl">
-      <Box
-        bg={colourPalette.secondary}
-        p="5"
-        {...(questionObject?.options ||
-        (!questionObject?.options && questionObject?.answer)
-          ? { roundedTop: "xl" }
-          : { rounded: "xl" })}
-        {..._box}
-      >
-        <HStack
-          justifyContent="space-between"
-          space={1}
-          alignItems="flex-start"
-        >
-          <div style={styles.questionDiv}>
-            <HtmlPrint html={questionObject?.question} />
-          </div>
-          {infoIcon}
-        </HStack>
-      </Box>
-      {!questionObject?.options && questionObject?.answer ? (
-        <Box bg={colors.primaryLight1} p="4" roundedBottom={"xl"}>
-          <HtmlPrint html={questionObject.answer} />
-        </Box>
-      ) : questionObject?.options ? (
-        <Box bg={colors.primaryLight1} p="4" roundedBottom={"xl"}>
-          <VStack space="2">
-            {questionObject.options?.map((item, index) => {
-              return (
-                <HStack key={index} space="1" alignItems="baseline">
-                  <BodyMedium
-                    textTransform="inherit"
-                    color={item.answer && !isAnswerHide ? colors.success : ""}
-                  >
-                    {alphabet[index] + ". "}
-                  </BodyMedium>
-                  <BodyMedium
-                    color={item.answer && !isAnswerHide ? colors.success : ""}
-                  >
-                    <HtmlPrint html={item?.value?.body} />
-                  </BodyMedium>
-                </HStack>
-              );
-            })}
-          </VStack>
-        </Box>
-      ) : (
-        <React.Fragment />
-      )}
-    </Box>
-  );
-};
-
-export default QuestionBox;
diff --git a/packages/worksheet/src/components/QuestionBox/index.tsx b/packages/worksheet/src/components/QuestionBox/index.tsx
new file mode 100644
index 00000000..77516c4f
--- /dev/null
+++ b/packages/worksheet/src/components/QuestionBox/index.tsx
@@ -0,0 +1,79 @@
+// Lib
+import React from "react";
+import { Box, HStack, VStack } from "native-base";
+
+// Styles
+import "../../App.css";
+
+// Constants
+import { colourPalette } from "constants/colours";
+import colorTheme from "colorTheme";
+
+// Components
+import HtmlPrint from "components/HTMLPrint";
+import QuestionOption from "./QuestionOption";
+
+const styles = { questionDiv: { display: "flex" } };
+
+// Interface
+export interface IQuestionBox {
+  questionObject: any;
+  isAnswerHide: boolean;
+  infoIcon: Object;
+  _box: Object;
+}
+
+// Renders a box for a question using an object
+const QuestionBox: React.FC<IQuestionBox> = ({
+  questionObject,
+  isAnswerHide,
+  infoIcon,
+  _box,
+}) => {
+  return (
+    <Box shadow={2} rounded="xl">
+      <Box
+        bg={colourPalette.secondary}
+        p="5"
+        {...(questionObject?.options ||
+        (!questionObject?.options && questionObject?.answer)
+          ? { roundedTop: "xl" }
+          : { rounded: "xl" })}
+        {..._box}
+      >
+        <HStack
+          justifyContent="space-between"
+          space={1}
+          alignItems="flex-start"
+        >
+          <div style={styles.questionDiv}>
+            <HtmlPrint html={questionObject?.question} />
+          </div>
+          {infoIcon}
+        </HStack>
+      </Box>
+      {!questionObject?.options && questionObject?.answer ? (
+        <Box bg={colorTheme.primaryLight1} p="4" roundedBottom={"xl"}>
+          <HtmlPrint html={questionObject.answer} />
+        </Box>
+      ) : questionObject?.options ? (
+        <Box bg={colorTheme.primaryLight1} p="4" roundedBottom={"xl"}>
+          <VStack space="2">
+            {questionObject.options?.map((item, index) => (
+              <QuestionOption
+                item={item}
+                isAnswerHide={isAnswerHide}
+                index={index}
+                key={`qo${index}`}
+              />
+            ))}
+          </VStack>
+        </Box>
+      ) : (
+        <React.Fragment />
+      )}
+    </Box>
+  );
+};
+
+export default QuestionBox;