diff --git a/src/components/questionStructure/Task/index.tsx b/src/components/questionStructure/Task/editable/index.tsx
similarity index 88%
rename from src/components/questionStructure/Task/index.tsx
rename to src/components/questionStructure/Task/editable/index.tsx
index cd72aa5..afa916b 100644
--- a/src/components/questionStructure/Task/index.tsx
+++ b/src/components/questionStructure/Task/editable/index.tsx
@@ -1,9 +1,9 @@
 import { Flex } from '@radix-ui/themes'
 import React, { FC } from 'react'
 
-import Markdown from '../../Markdown'
-import { TaskType } from './constants'
-import './index.css'
+import Markdown from '../../../Markdown'
+import { TaskType } from '../constants'
+import '../styles/common.css'
 import { CodeTask, CodeTaskProps } from './variants/CodeTask'
 import { EssayTask, EssayTaskProps } from './variants/EssayTask'
 import { FlagTask, FlagTaskProps } from './variants/FlagTask'
@@ -38,7 +38,7 @@ const taskComponentMap = {
 
 type TaskComponent = FC<TaskProps & { instructions?: string }>
 
-export const TaskFactory: TaskComponent = ({ instructions, ...taskProps }) => {
+export const EditableTaskFactory: TaskComponent = ({ instructions, ...taskProps }) => {
   const Component = taskComponentMap[taskProps.type] as TaskComponent
   return (
     <Flex gap="3" direction="column">
diff --git a/src/components/questionStructure/Task/variants/CodeTask.tsx b/src/components/questionStructure/Task/editable/variants/CodeTask.tsx
similarity index 74%
rename from src/components/questionStructure/Task/variants/CodeTask.tsx
rename to src/components/questionStructure/Task/editable/variants/CodeTask.tsx
index da6eeff..4ffbe7d 100644
--- a/src/components/questionStructure/Task/variants/CodeTask.tsx
+++ b/src/components/questionStructure/Task/editable/variants/CodeTask.tsx
@@ -2,22 +2,17 @@ import { TextArea, TextField } from '@radix-ui/themes'
 import { isEqual } from 'lodash'
 import React, { FC, useEffect, useMemo, useState } from 'react'
 
-import useDebounce from '../../../../hooks/debouncing'
-import { TaskType } from '../constants'
-import '../index.css'
-import { TaskBaseProps } from '../types'
+import useDebounce from '../../../../../hooks/debouncing'
+import { TaskType } from '../../constants'
+import '../../styles/common.css'
+import { EditableTaskProps } from '../../types'
 
-export interface CodeTaskProps extends TaskBaseProps {
+export interface CodeTaskProps extends EditableTaskProps {
   type: TaskType.CODE
   lines?: number
 }
 
-export const CodeTask: FC<CodeTaskProps> = ({
-  answer,
-  onAnswerUpdate,
-  lines = 5,
-  disabled = false,
-}) => {
+export const CodeTask: FC<CodeTaskProps> = ({ answer, onAnswerUpdate, lines = 5 }) => {
   const initialValue = useMemo(() => answer?.answer ?? '', [answer])
   const [value, setValue] = useState(initialValue)
   const debouncedValue = useDebounce(value)
@@ -38,7 +33,6 @@ export const CodeTask: FC<CodeTaskProps> = ({
     value: value,
     onChange: handleOnChange,
     placeholder: 'Your answer here…',
-    disabled: disabled,
     variant: 'soft' as 'soft',
     className: 'monospaced',
   }
diff --git a/src/components/questionStructure/Task/variants/EssayTask.tsx b/src/components/questionStructure/Task/editable/variants/EssayTask.tsx
similarity index 75%
rename from src/components/questionStructure/Task/variants/EssayTask.tsx
rename to src/components/questionStructure/Task/editable/variants/EssayTask.tsx
index 9cd0dea..7d0f3fb 100644
--- a/src/components/questionStructure/Task/variants/EssayTask.tsx
+++ b/src/components/questionStructure/Task/editable/variants/EssayTask.tsx
@@ -2,21 +2,16 @@ import { TextArea, TextField } from '@radix-ui/themes'
 import { isEqual } from 'lodash'
 import React, { FC, useEffect, useMemo, useState } from 'react'
 
-import useDebounce from '../../../../hooks/debouncing'
-import { TaskType } from '../constants'
-import { TaskBaseProps } from '../types'
+import useDebounce from '../../../../../hooks/debouncing'
+import { TaskType } from '../../constants'
+import { EditableTaskProps } from '../../types'
 
-export interface EssayTaskProps extends TaskBaseProps {
+export interface EssayTaskProps extends EditableTaskProps {
   type: TaskType.ESSAY
   lines?: number
 }
 
-export const EssayTask: FC<EssayTaskProps> = ({
-  answer,
-  onAnswerUpdate,
-  lines = 5,
-  disabled = false,
-}) => {
+export const EssayTask: FC<EssayTaskProps> = ({ answer, onAnswerUpdate, lines = 5 }) => {
   const initialValue = useMemo(() => answer?.answer ?? '', [answer])
   const [value, setValue] = useState(initialValue)
   const debouncedValue = useDebounce(value)
@@ -38,7 +33,6 @@ export const EssayTask: FC<EssayTaskProps> = ({
     value: value,
     onChange: handleOnChange,
     placeholder: 'Your answer here…',
-    disabled: disabled,
     variant: 'soft' as 'soft',
   }
   if (lines === 1) return <TextField.Root {...commonProps} />
diff --git a/src/components/questionStructure/Task/variants/FlagTask/index.tsx b/src/components/questionStructure/Task/editable/variants/FlagTask.tsx
similarity index 85%
rename from src/components/questionStructure/Task/variants/FlagTask/index.tsx
rename to src/components/questionStructure/Task/editable/variants/FlagTask.tsx
index d93d88f..a292f37 100644
--- a/src/components/questionStructure/Task/variants/FlagTask/index.tsx
+++ b/src/components/questionStructure/Task/editable/variants/FlagTask.tsx
@@ -5,20 +5,15 @@ import React, { FC, useEffect, useMemo, useState } from 'react'
 
 import useDebounce from '../../../../../hooks/debouncing'
 import { TaskType } from '../../constants'
-import { TaskBaseProps } from '../../types'
-import './index.css'
+import '../../styles/flag.css'
+import { EditableTaskProps } from '../../types'
 
-export interface FlagTaskProps extends TaskBaseProps {
+export interface FlagTaskProps extends EditableTaskProps {
   type: TaskType.FLAG
   showOrnament?: boolean
 }
 
-export const FlagTask: FC<FlagTaskProps> = ({
-  answer,
-  onAnswerUpdate,
-  showOrnament = true,
-  disabled = false,
-}) => {
+export const FlagTask: FC<FlagTaskProps> = ({ answer, onAnswerUpdate, showOrnament = true }) => {
   const FLAG_LENGTH = 32
   const initialValue = useMemo(() => answer?.answer ?? '', [answer])
   const [value, setValue] = useState(initialValue)
@@ -45,7 +40,6 @@ export const FlagTask: FC<FlagTaskProps> = ({
         </Flex>
       )}
       <TextField.Root
-        disabled={disabled}
         value={value}
         onChange={handleChange}
         radius="none"
diff --git a/src/components/questionStructure/Task/variants/MCQ.tsx b/src/components/questionStructure/Task/editable/variants/MCQ.tsx
similarity index 73%
rename from src/components/questionStructure/Task/variants/MCQ.tsx
rename to src/components/questionStructure/Task/editable/variants/MCQ.tsx
index b4f83d5..a308c56 100644
--- a/src/components/questionStructure/Task/variants/MCQ.tsx
+++ b/src/components/questionStructure/Task/editable/variants/MCQ.tsx
@@ -2,30 +2,25 @@ import { CheckboxGroup, RadioGroup } from '@radix-ui/themes'
 import { isEqual, map } from 'lodash'
 import React, { FC, useEffect, useMemo, useState } from 'react'
 
-import { TaskType } from '../constants'
-import { TaskBaseProps } from '../types'
+import { TaskType } from '../../constants'
+import { EditableTaskProps } from '../../types'
 
 type MCQOption = {
   value: string
   label: string
 }
 
-export interface MCQOneTaskProps extends TaskBaseProps {
+export interface MCQOneTaskProps extends EditableTaskProps {
   type: TaskType.MULTIPLE_CHOICE_SELECT_ONE
   choices: MCQOption[]
 }
 
-export interface MCQMultiTaskProps extends TaskBaseProps {
+export interface MCQMultiTaskProps extends EditableTaskProps {
   type: TaskType.MULTIPLE_CHOICE_SELECT_SEVERAL
   choices: MCQOption[]
 }
 
-export const MCQOneTask: FC<MCQOneTaskProps> = ({
-  answer,
-  onAnswerUpdate,
-  choices,
-  disabled = false,
-}) => {
+export const MCQOneTask: FC<MCQOneTaskProps> = ({ answer, onAnswerUpdate, choices }) => {
   const initialValue = useMemo(() => answer?.answer ?? '', [answer])
   const [value, setValue] = useState(initialValue)
   useEffect(() => {
@@ -41,7 +36,7 @@ export const MCQOneTask: FC<MCQOneTaskProps> = ({
   }
 
   return (
-    <RadioGroup.Root variant="soft" disabled={disabled} value={value} onClick={handleOnClick}>
+    <RadioGroup.Root variant="soft" value={value} onClick={handleOnClick}>
       {map(choices, (o) => (
         <RadioGroup.Item key={o.value} value={o.value}>
           {o.label}
@@ -51,12 +46,7 @@ export const MCQOneTask: FC<MCQOneTaskProps> = ({
   )
 }
 
-export const MCQMultiTask: FC<MCQMultiTaskProps> = ({
-  answer,
-  onAnswerUpdate,
-  choices,
-  disabled = false,
-}) => {
+export const MCQMultiTask: FC<MCQMultiTaskProps> = ({ answer, onAnswerUpdate, choices }) => {
   const initialValue = useMemo(() => (answer?.answer ? answer.answer.split(',') : []), [answer])
   const [value, setValue] = useState(initialValue)
   useEffect(() => {
@@ -74,7 +64,7 @@ export const MCQMultiTask: FC<MCQMultiTaskProps> = ({
   }
 
   return (
-    <CheckboxGroup.Root disabled={disabled} variant="soft" value={value}>
+    <CheckboxGroup.Root variant="soft" value={value}>
       {map(choices, (o) => (
         <CheckboxGroup.Item key={o.value} value={o.value} onClick={handleOnClick}>
           {o.label}
diff --git a/src/components/questionStructure/Task/variants/NumberTask.tsx b/src/components/questionStructure/Task/editable/variants/NumberTask.tsx
similarity index 78%
rename from src/components/questionStructure/Task/variants/NumberTask.tsx
rename to src/components/questionStructure/Task/editable/variants/NumberTask.tsx
index 90502d0..b9deac7 100644
--- a/src/components/questionStructure/Task/variants/NumberTask.tsx
+++ b/src/components/questionStructure/Task/editable/variants/NumberTask.tsx
@@ -2,15 +2,15 @@ import { TextField } from '@radix-ui/themes'
 import { isEqual } from 'lodash'
 import React, { FC, useEffect, useMemo, useState } from 'react'
 
-import useDebounce from '../../../../hooks/debouncing'
-import { TaskType } from '../constants'
-import { TaskBaseProps } from '../types'
+import useDebounce from '../../../../../hooks/debouncing'
+import { TaskType } from '../../constants'
+import { EditableTaskProps } from '../../types'
 
-export interface NumberTaskProps extends TaskBaseProps {
+export interface NumberTaskProps extends EditableTaskProps {
   type: TaskType.INTEGER
 }
 
-export const NumberTask: FC<NumberTaskProps> = ({ answer, onAnswerUpdate, disabled = false }) => {
+export const NumberTask: FC<NumberTaskProps> = ({ answer, onAnswerUpdate }) => {
   const initialValue = useMemo(() => answer?.answer ?? '', [answer])
   const [value, setValue] = useState(initialValue)
   const debouncedValue = useDebounce(value)
@@ -34,7 +34,6 @@ export const NumberTask: FC<NumberTaskProps> = ({ answer, onAnswerUpdate, disabl
       onChange={handleChange}
       type="number"
       variant="soft"
-      disabled={disabled}
       placeholder="Your number here..."
     />
   )
diff --git a/src/components/questionStructure/Task/variants/handwriting/ProcessedHandwritingTask.tsx b/src/components/questionStructure/Task/editable/variants/handwriting/ProcessedHandwritingTask.tsx
similarity index 78%
rename from src/components/questionStructure/Task/variants/handwriting/ProcessedHandwritingTask.tsx
rename to src/components/questionStructure/Task/editable/variants/handwriting/ProcessedHandwritingTask.tsx
index 19c52e2..0b300bc 100644
--- a/src/components/questionStructure/Task/variants/handwriting/ProcessedHandwritingTask.tsx
+++ b/src/components/questionStructure/Task/editable/variants/handwriting/ProcessedHandwritingTask.tsx
@@ -4,19 +4,18 @@ import { MathJax } from 'better-react-mathjax'
 import { isEmpty, isEqual } from 'lodash'
 import { FC, useEffect, useMemo, useState } from 'react'
 
-import { TaskType } from '../../constants'
-import { TaskBaseProps } from '../../types'
+import { TaskType } from '../../../constants'
+import { EditableTaskProps } from '../../../types'
 import { ViewOnlyCanvas } from './components/ViewOnlyCanvas'
 import { ProcessedHandwritingEditor } from './editors/ProcessedHandwritingEditor'
 
-export interface ProcessedHandwritingProps extends TaskBaseProps {
+export interface ProcessedHandwritingProps extends EditableTaskProps {
   type: TaskType.PROCESSED_HANDWRITING
 }
 
 export const ProcessedHandwritingTask: FC<ProcessedHandwritingProps> = ({
   answer,
   onAnswerUpdate,
-  disabled = false,
 }) => {
   const initialValue = useMemo(
     () => (answer?.answer ? JSON.parse(answer.answer) : { latex: '' }),
@@ -35,14 +34,12 @@ export const ProcessedHandwritingTask: FC<ProcessedHandwritingProps> = ({
   return (
     <Dialog.Root>
       <Flex gap="3" align="center">
-        {!disabled && (
-          <Dialog.Trigger>
-            <Button disabled={disabled} size="4">
-              {strokes?.length ? 'Edit answer' : 'Enter answer'}{' '}
-              <Pencil2Icon width="1.5rem" height="1.5rem" />
-            </Button>
-          </Dialog.Trigger>
-        )}
+        <Dialog.Trigger>
+          <Button size="4">
+            {strokes?.length ? 'Edit answer' : 'Enter answer'}{' '}
+            <Pencil2Icon width="1.5rem" height="1.5rem" />
+          </Button>
+        </Dialog.Trigger>
         {value?.latex && (
           <Card className="latex-preview">
             <Flex p="3">
diff --git a/src/components/questionStructure/Task/variants/handwriting/RawHandwritingTask.tsx b/src/components/questionStructure/Task/editable/variants/handwriting/RawHandwritingTask.tsx
similarity index 67%
rename from src/components/questionStructure/Task/variants/handwriting/RawHandwritingTask.tsx
rename to src/components/questionStructure/Task/editable/variants/handwriting/RawHandwritingTask.tsx
index 5a23b27..ce5b21a 100644
--- a/src/components/questionStructure/Task/variants/handwriting/RawHandwritingTask.tsx
+++ b/src/components/questionStructure/Task/editable/variants/handwriting/RawHandwritingTask.tsx
@@ -3,20 +3,16 @@ import { Button, Dialog, Flex } from '@radix-ui/themes'
 import { isEmpty, isEqual } from 'lodash'
 import { FC, useEffect, useMemo, useState } from 'react'
 
-import { TaskType } from '../../constants'
-import { TaskBaseProps } from '../../types'
+import { TaskType } from '../../../constants'
+import { EditableTaskProps } from '../../../types'
 import { ViewOnlyCanvas } from './components/ViewOnlyCanvas'
 import RawHandwritingEditor from './editors/RawHandwritingEditor/rawHandwritingEditor'
 
-export interface RawHandwritingProps extends TaskBaseProps {
+export interface RawHandwritingProps extends EditableTaskProps {
   type: TaskType.RAW_HANDWRITING
 }
 
-export const RawHandwritingTask: FC<RawHandwritingProps> = ({
-  answer,
-  onAnswerUpdate,
-  disabled = false,
-}) => {
+export const RawHandwritingTask: FC<RawHandwritingProps> = ({ answer, onAnswerUpdate }) => {
   const initialValue = useMemo(() => (answer?.answer ? JSON.parse(answer.answer) : {}), [answer])
 
   const [value, setValue] = useState(initialValue)
@@ -29,16 +25,14 @@ export const RawHandwritingTask: FC<RawHandwritingProps> = ({
 
   return (
     <Dialog.Root>
-      {!disabled && (
-        <Flex gap="3" align="center">
-          <Dialog.Trigger>
-            <Button disabled={disabled} size="4">
-              {value?.raw?.elements.length ? 'Edit answer' : 'Enter answer'}{' '}
-              <Pencil2Icon width="1.5rem" height="1.5rem" />
-            </Button>
-          </Dialog.Trigger>
-        </Flex>
-      )}
+      <Flex gap="3" align="center">
+        <Dialog.Trigger>
+          <Button size="4">
+            {value?.raw?.elements.length ? 'Edit answer' : 'Enter answer'}{' '}
+            <Pencil2Icon width="1.5rem" height="1.5rem" />
+          </Button>
+        </Dialog.Trigger>
+      </Flex>
       {!isEmpty(value?.raw?.elements) && (
         <ViewOnlyCanvas initialData={value?.raw?.elements ?? []} minHeight="500px" />
       )}
diff --git a/src/components/questionStructure/Task/variants/handwriting/components/Canvas/index.scss b/src/components/questionStructure/Task/editable/variants/handwriting/components/Canvas/index.scss
similarity index 100%
rename from src/components/questionStructure/Task/variants/handwriting/components/Canvas/index.scss
rename to src/components/questionStructure/Task/editable/variants/handwriting/components/Canvas/index.scss
diff --git a/src/components/questionStructure/Task/variants/handwriting/components/Canvas/index.tsx b/src/components/questionStructure/Task/editable/variants/handwriting/components/Canvas/index.tsx
similarity index 98%
rename from src/components/questionStructure/Task/variants/handwriting/components/Canvas/index.tsx
rename to src/components/questionStructure/Task/editable/variants/handwriting/components/Canvas/index.tsx
index ecc2046..5238244 100644
--- a/src/components/questionStructure/Task/variants/handwriting/components/Canvas/index.tsx
+++ b/src/components/questionStructure/Task/editable/variants/handwriting/components/Canvas/index.tsx
@@ -13,7 +13,7 @@ import React, {
   useState,
 } from 'react'
 
-import { ConfirmDialog } from '../../../../../../ConfirmDialog'
+import { ConfirmDialog } from '../../../../../../../ConfirmDialog'
 import { RawHandwritingAnswer } from '../../types'
 import './index.scss'
 
diff --git a/src/components/questionStructure/Task/variants/handwriting/components/ViewOnlyCanvas/index.scss b/src/components/questionStructure/Task/editable/variants/handwriting/components/ViewOnlyCanvas/index.scss
similarity index 100%
rename from src/components/questionStructure/Task/variants/handwriting/components/ViewOnlyCanvas/index.scss
rename to src/components/questionStructure/Task/editable/variants/handwriting/components/ViewOnlyCanvas/index.scss
diff --git a/src/components/questionStructure/Task/variants/handwriting/components/ViewOnlyCanvas/index.tsx b/src/components/questionStructure/Task/editable/variants/handwriting/components/ViewOnlyCanvas/index.tsx
similarity index 100%
rename from src/components/questionStructure/Task/variants/handwriting/components/ViewOnlyCanvas/index.tsx
rename to src/components/questionStructure/Task/editable/variants/handwriting/components/ViewOnlyCanvas/index.tsx
diff --git a/src/components/questionStructure/Task/variants/handwriting/editors/ProcessedHandwritingEditor/index.css b/src/components/questionStructure/Task/editable/variants/handwriting/editors/ProcessedHandwritingEditor/index.css
similarity index 100%
rename from src/components/questionStructure/Task/variants/handwriting/editors/ProcessedHandwritingEditor/index.css
rename to src/components/questionStructure/Task/editable/variants/handwriting/editors/ProcessedHandwritingEditor/index.css
diff --git a/src/components/questionStructure/Task/variants/handwriting/editors/ProcessedHandwritingEditor/index.tsx b/src/components/questionStructure/Task/editable/variants/handwriting/editors/ProcessedHandwritingEditor/index.tsx
similarity index 100%
rename from src/components/questionStructure/Task/variants/handwriting/editors/ProcessedHandwritingEditor/index.tsx
rename to src/components/questionStructure/Task/editable/variants/handwriting/editors/ProcessedHandwritingEditor/index.tsx
diff --git a/src/components/questionStructure/Task/variants/handwriting/editors/RawHandwritingEditor/index.css b/src/components/questionStructure/Task/editable/variants/handwriting/editors/RawHandwritingEditor/index.css
similarity index 100%
rename from src/components/questionStructure/Task/variants/handwriting/editors/RawHandwritingEditor/index.css
rename to src/components/questionStructure/Task/editable/variants/handwriting/editors/RawHandwritingEditor/index.css
diff --git a/src/components/questionStructure/Task/variants/handwriting/editors/RawHandwritingEditor/rawHandwritingEditor.tsx b/src/components/questionStructure/Task/editable/variants/handwriting/editors/RawHandwritingEditor/rawHandwritingEditor.tsx
similarity index 100%
rename from src/components/questionStructure/Task/variants/handwriting/editors/RawHandwritingEditor/rawHandwritingEditor.tsx
rename to src/components/questionStructure/Task/editable/variants/handwriting/editors/RawHandwritingEditor/rawHandwritingEditor.tsx
diff --git a/src/components/questionStructure/Task/variants/handwriting/hooks/live-updates.hook.ts b/src/components/questionStructure/Task/editable/variants/handwriting/hooks/live-updates.hook.ts
similarity index 97%
rename from src/components/questionStructure/Task/variants/handwriting/hooks/live-updates.hook.ts
rename to src/components/questionStructure/Task/editable/variants/handwriting/hooks/live-updates.hook.ts
index 5369052..95d3554 100644
--- a/src/components/questionStructure/Task/variants/handwriting/hooks/live-updates.hook.ts
+++ b/src/components/questionStructure/Task/editable/variants/handwriting/hooks/live-updates.hook.ts
@@ -7,8 +7,8 @@ import { SceneData } from '@excalidraw/excalidraw/types/types'
 import axios, { AxiosError } from 'axios'
 import { useCallback, useEffect, useRef, useState } from 'react'
 
-import axiosInstance from '../../../../../../api/axiosInstance'
-import routes from '../../../../../../api/routes'
+import axiosInstance from '../../../../../../../api/axiosInstance'
+import routes from '../../../../../../../api/routes'
 
 // Constants
 /** Time to wait with user putting no stroks on the pages before API call */
diff --git a/src/components/questionStructure/Task/variants/handwriting/types.ts b/src/components/questionStructure/Task/editable/variants/handwriting/types.ts
similarity index 100%
rename from src/components/questionStructure/Task/variants/handwriting/types.ts
rename to src/components/questionStructure/Task/editable/variants/handwriting/types.ts
diff --git a/src/components/questionStructure/Task/readonly/index.tsx b/src/components/questionStructure/Task/readonly/index.tsx
new file mode 100644
index 0000000..19fcd64
--- /dev/null
+++ b/src/components/questionStructure/Task/readonly/index.tsx
@@ -0,0 +1,50 @@
+import { Flex } from '@radix-ui/themes'
+import React, { FC } from 'react'
+
+import Markdown from '../../../Markdown'
+import { TaskType } from '../constants'
+import '../styles/common.css'
+import { CodeTask, CodeTaskProps } from './variants/CodeTask'
+import { EssayTask, EssayTaskProps } from './variants/EssayTask'
+import { FlagTask, FlagTaskProps } from './variants/FlagTask'
+import { MCQMultiTask, MCQMultiTaskProps, MCQOneTask, MCQOneTaskProps } from './variants/MCQ'
+import NoAnswerBanner from './variants/NoAnswerBanner'
+import { NumberTask, NumberTaskProps } from './variants/NumberTask'
+import {
+  ProcessedHandwritingProps,
+  ProcessedHandwritingTask,
+} from './variants/handwriting/ProcessedHandwritingTask'
+import { RawHandwritingProps, RawHandwritingTask } from './variants/handwriting/RawHandwritingTask'
+
+export type TaskProps =
+  | FlagTaskProps
+  | NumberTaskProps
+  | EssayTaskProps
+  | CodeTaskProps
+  | MCQOneTaskProps
+  | MCQMultiTaskProps
+  | ProcessedHandwritingProps
+  | RawHandwritingProps
+
+const taskComponentMap = {
+  [TaskType.ESSAY]: EssayTask,
+  [TaskType.CODE]: CodeTask,
+  [TaskType.INTEGER]: NumberTask,
+  [TaskType.FLAG]: FlagTask,
+  [TaskType.MULTIPLE_CHOICE_SELECT_ONE]: MCQOneTask,
+  [TaskType.MULTIPLE_CHOICE_SELECT_SEVERAL]: MCQMultiTask,
+  [TaskType.RAW_HANDWRITING]: RawHandwritingTask,
+  [TaskType.PROCESSED_HANDWRITING]: ProcessedHandwritingTask,
+} as const
+
+type TaskComponent = FC<TaskProps & { instructions?: string }>
+
+export const ReadOnlyTaskFactory: TaskComponent = ({ instructions, ...taskProps }) => {
+  const Component = taskComponentMap[taskProps.type] as TaskComponent
+  return (
+    <Flex gap="3" direction="column">
+      {instructions && <Markdown>{instructions}</Markdown>}
+      {taskProps.answer ? <Component {...taskProps} /> : <NoAnswerBanner />}
+    </Flex>
+  )
+}
diff --git a/src/components/questionStructure/Task/readonly/variants/CodeTask.tsx b/src/components/questionStructure/Task/readonly/variants/CodeTask.tsx
new file mode 100644
index 0000000..8a4cbcd
--- /dev/null
+++ b/src/components/questionStructure/Task/readonly/variants/CodeTask.tsx
@@ -0,0 +1,24 @@
+import { TextArea, TextField } from '@radix-ui/themes'
+import { countBy } from 'lodash'
+import React, { FC } from 'react'
+
+import { TaskType } from '../../constants'
+import '../../styles/common.css'
+import { TaskBaseProps } from '../../types'
+
+export interface CodeTaskProps extends TaskBaseProps {
+  type: TaskType.ESSAY
+}
+
+const LINES_PADDING = 2
+export const CodeTask: FC<CodeTaskProps> = ({ answer }) => {
+  const lines = countBy(answer.answer)['\n']
+  const commonProps = {
+    value: answer.answer,
+    disabled: true,
+    variant: 'soft' as 'soft',
+    className: 'monospaced',
+  }
+  if (lines === 1) return <TextField.Root {...commonProps} />
+  return <TextArea {...commonProps} resize="vertical" rows={lines + LINES_PADDING} />
+}
diff --git a/src/components/questionStructure/Task/readonly/variants/EssayTask.tsx b/src/components/questionStructure/Task/readonly/variants/EssayTask.tsx
new file mode 100644
index 0000000..b778cd1
--- /dev/null
+++ b/src/components/questionStructure/Task/readonly/variants/EssayTask.tsx
@@ -0,0 +1,22 @@
+import { TextArea, TextField } from '@radix-ui/themes'
+import { countBy } from 'lodash'
+import React, { FC } from 'react'
+
+import { TaskType } from '../../constants'
+import { TaskBaseProps } from '../../types'
+
+export interface EssayTaskProps extends TaskBaseProps {
+  type: TaskType.ESSAY
+}
+
+const LINES_PADDING = 2
+export const EssayTask: FC<EssayTaskProps> = ({ answer }) => {
+  const lines = countBy(answer.answer)['\n']
+  const commonProps = {
+    value: answer.answer,
+    disabled: true,
+    variant: 'soft' as 'soft',
+  }
+  if (lines === 1) return <TextField.Root {...commonProps} />
+  return <TextArea {...commonProps} resize="vertical" rows={lines + LINES_PADDING} />
+}
diff --git a/src/components/questionStructure/Task/readonly/variants/FlagTask.tsx b/src/components/questionStructure/Task/readonly/variants/FlagTask.tsx
new file mode 100644
index 0000000..e152c1d
--- /dev/null
+++ b/src/components/questionStructure/Task/readonly/variants/FlagTask.tsx
@@ -0,0 +1,34 @@
+import { Flex, TextField } from '@radix-ui/themes'
+import classnames from 'classnames'
+import React, { FC } from 'react'
+
+import { TaskType } from '../../constants'
+import '../../styles/common.css'
+import '../../styles/flag.css'
+import { TaskBaseProps } from '../../types'
+
+export interface FlagTaskProps extends TaskBaseProps {
+  type: TaskType.FLAG
+}
+
+export const FlagTask: FC<FlagTaskProps> = ({ answer }) => {
+  return (
+    <Flex align="stretch">
+      <Flex pl="2" align="center" className={classnames('ornament', 'left-flag-ornament')}>
+        <span className="monospaced">{'FLAG {'}</span>
+      </Flex>
+      <TextField.Root
+        disabled
+        value={answer.answer}
+        radius="none"
+        type="text"
+        maxLength={32}
+        variant="soft"
+        className={classnames('flag', 'monospaced')}
+      />
+      <Flex pr="2" align="center" className={classnames('ornament', 'right-flag-ornament')}>
+        <span className="monospaced">{'}'}</span>
+      </Flex>
+    </Flex>
+  )
+}
diff --git a/src/components/questionStructure/Task/readonly/variants/MCQ.tsx b/src/components/questionStructure/Task/readonly/variants/MCQ.tsx
new file mode 100644
index 0000000..d9e9016
--- /dev/null
+++ b/src/components/questionStructure/Task/readonly/variants/MCQ.tsx
@@ -0,0 +1,45 @@
+import { CheckboxGroup, RadioGroup } from '@radix-ui/themes'
+import { map } from 'lodash'
+import React, { FC } from 'react'
+
+import { TaskType } from '../../constants'
+import { TaskBaseProps } from '../../types'
+
+type MCQOption = {
+  value: string
+  label: string
+}
+
+export interface MCQOneTaskProps extends TaskBaseProps {
+  type: TaskType.MULTIPLE_CHOICE_SELECT_ONE
+  choices: MCQOption[]
+}
+
+export interface MCQMultiTaskProps extends TaskBaseProps {
+  type: TaskType.MULTIPLE_CHOICE_SELECT_SEVERAL
+  choices: MCQOption[]
+}
+
+export const MCQOneTask: FC<MCQOneTaskProps> = ({ answer, choices }) => {
+  return (
+    <RadioGroup.Root variant="soft" value={answer.answer}>
+      {map(choices, (o) => (
+        <RadioGroup.Item key={o.value} value={o.value} disabled>
+          {o.label}
+        </RadioGroup.Item>
+      ))}
+    </RadioGroup.Root>
+  )
+}
+
+export const MCQMultiTask: FC<MCQMultiTaskProps> = ({ answer, choices }) => {
+  return (
+    <CheckboxGroup.Root value={answer.answer.split(',')}>
+      {map(choices, (o) => (
+        <CheckboxGroup.Item key={o.value} value={o.value} disabled>
+          {o.label}
+        </CheckboxGroup.Item>
+      ))}
+    </CheckboxGroup.Root>
+  )
+}
diff --git a/src/pages/MarkingPage/NoAnswerBanner.tsx b/src/components/questionStructure/Task/readonly/variants/NoAnswerBanner.tsx
similarity index 100%
rename from src/pages/MarkingPage/NoAnswerBanner.tsx
rename to src/components/questionStructure/Task/readonly/variants/NoAnswerBanner.tsx
diff --git a/src/components/questionStructure/Task/readonly/variants/NumberTask.tsx b/src/components/questionStructure/Task/readonly/variants/NumberTask.tsx
new file mode 100644
index 0000000..fc2e600
--- /dev/null
+++ b/src/components/questionStructure/Task/readonly/variants/NumberTask.tsx
@@ -0,0 +1,13 @@
+import { TextField } from '@radix-ui/themes'
+import React, { FC } from 'react'
+
+import { TaskType } from '../../constants'
+import { TaskBaseProps } from '../../types'
+
+export interface NumberTaskProps extends TaskBaseProps {
+  type: TaskType.INTEGER
+}
+
+export const NumberTask: FC<NumberTaskProps> = ({ answer }) => {
+  return <TextField.Root disabled value={answer.answer} type="number" variant="soft" />
+}
diff --git a/src/components/questionStructure/Task/readonly/variants/handwriting/ProcessedHandwritingTask.tsx b/src/components/questionStructure/Task/readonly/variants/handwriting/ProcessedHandwritingTask.tsx
new file mode 100644
index 0000000..1884640
--- /dev/null
+++ b/src/components/questionStructure/Task/readonly/variants/handwriting/ProcessedHandwritingTask.tsx
@@ -0,0 +1,31 @@
+import { Box, Card, Flex } from '@radix-ui/themes'
+import { MathJax } from 'better-react-mathjax'
+import { isEmpty } from 'lodash'
+import { FC } from 'react'
+
+import { TaskType } from '../../../constants'
+import { TaskBaseProps } from '../../../types'
+import { ViewOnlyCanvas } from './components/ViewOnlyCanvas'
+
+export interface ProcessedHandwritingProps extends TaskBaseProps {
+  type: TaskType.PROCESSED_HANDWRITING
+}
+
+export const ProcessedHandwritingTask: FC<ProcessedHandwritingProps> = ({ answer }) => {
+  const value = JSON.parse(answer.answer)
+  const strokes = value?.raw?.elements
+  return (
+    <Box width="100%">
+      <Flex gap="3" align="center">
+        {value?.latex && (
+          <Card className="latex-preview">
+            <Flex p="3">
+              <MathJax>{`\\( ${value.latex} \\)`}</MathJax>
+            </Flex>
+          </Card>
+        )}
+      </Flex>
+      {!isEmpty(strokes) && <ViewOnlyCanvas initialData={strokes ?? []} />}
+    </Box>
+  )
+}
diff --git a/src/components/questionStructure/Task/readonly/variants/handwriting/RawHandwritingTask.tsx b/src/components/questionStructure/Task/readonly/variants/handwriting/RawHandwritingTask.tsx
new file mode 100644
index 0000000..70440cf
--- /dev/null
+++ b/src/components/questionStructure/Task/readonly/variants/handwriting/RawHandwritingTask.tsx
@@ -0,0 +1,18 @@
+import { FC } from 'react'
+
+import { TaskType } from '../../../constants'
+import { TaskBaseProps } from '../../../types'
+import { ViewOnlyCanvas } from './components/ViewOnlyCanvas'
+
+export interface RawHandwritingProps extends TaskBaseProps {
+  type: TaskType.RAW_HANDWRITING
+}
+
+export const RawHandwritingTask: FC<RawHandwritingProps> = ({ answer }) => {
+  return (
+    <ViewOnlyCanvas
+      initialData={JSON.parse(answer.answer)?.raw?.elements ?? []}
+      minHeight="500px"
+    />
+  )
+}
diff --git a/src/components/questionStructure/Task/readonly/variants/handwriting/components/ViewOnlyCanvas/index.scss b/src/components/questionStructure/Task/readonly/variants/handwriting/components/ViewOnlyCanvas/index.scss
new file mode 100644
index 0000000..92cfc0a
--- /dev/null
+++ b/src/components/questionStructure/Task/readonly/variants/handwriting/components/ViewOnlyCanvas/index.scss
@@ -0,0 +1,16 @@
+.excalidraw-view-container {
+  .App-bottom-bar {
+    display: none;
+  }
+  .App-menu_top {
+    display: none !important;
+  }
+  .layer-ui__wrapper__footer-right {
+    display: none !important;
+  }
+}
+
+.excalidraw-box {
+  margin: 2px;
+  height: calc(100% - 4px);
+}
diff --git a/src/components/questionStructure/Task/readonly/variants/handwriting/components/ViewOnlyCanvas/index.tsx b/src/components/questionStructure/Task/readonly/variants/handwriting/components/ViewOnlyCanvas/index.tsx
new file mode 100644
index 0000000..120df13
--- /dev/null
+++ b/src/components/questionStructure/Task/readonly/variants/handwriting/components/ViewOnlyCanvas/index.tsx
@@ -0,0 +1,44 @@
+import { Excalidraw } from '@excalidraw/excalidraw'
+import { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
+import { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types/types'
+import { Box, Card } from '@radix-ui/themes'
+import React, { useEffect, useState } from 'react'
+
+import './index.scss'
+
+interface ViewOnlyCanvasProps {
+  initialData: readonly ExcalidrawElement[]
+  minHeight?: string
+}
+
+export const ViewOnlyCanvas: React.FC<ViewOnlyCanvasProps> = ({
+  initialData,
+  minHeight = '200px',
+}) => {
+  const [excalidrawAPI, setExcalidrawAPI] = useState<ExcalidrawImperativeAPI | null>(null)
+
+  useEffect(() => {
+    if (excalidrawAPI && initialData) {
+      excalidrawAPI.updateScene({
+        elements: initialData,
+      })
+    }
+    setTimeout(() => {
+      excalidrawAPI?.scrollToContent(undefined, {
+        fitToContent: true,
+      })
+    })
+  }, [excalidrawAPI, initialData])
+
+  return (
+    <Card>
+      <Box minHeight={minHeight}>
+        <Excalidraw
+          excalidrawAPI={setExcalidrawAPI}
+          viewModeEnabled
+          initialData={{ elements: initialData }}
+        />
+      </Box>
+    </Card>
+  )
+}
diff --git a/src/components/questionStructure/Task/index.css b/src/components/questionStructure/Task/styles/common.css
similarity index 100%
rename from src/components/questionStructure/Task/index.css
rename to src/components/questionStructure/Task/styles/common.css
diff --git a/src/components/questionStructure/Task/variants/FlagTask/index.css b/src/components/questionStructure/Task/styles/flag.css
similarity index 83%
rename from src/components/questionStructure/Task/variants/FlagTask/index.css
rename to src/components/questionStructure/Task/styles/flag.css
index 767ced1..9480411 100644
--- a/src/components/questionStructure/Task/variants/FlagTask/index.css
+++ b/src/components/questionStructure/Task/styles/flag.css
@@ -1,7 +1,7 @@
 .flag {
   /* the very anonymous value of 18 was obtained via trial and error
-       * TODO identify a more programmatic way to derive it
-       */
+   * TODO identify a more programmatic way to derive it
+   */
   width: calc(var(--default-font-size) * 18);
 }
 
diff --git a/src/components/questionStructure/Task/types.ts b/src/components/questionStructure/Task/types.ts
index d1721a4..634d0a8 100644
--- a/src/components/questionStructure/Task/types.ts
+++ b/src/components/questionStructure/Task/types.ts
@@ -4,6 +4,8 @@ import { TaskType } from './constants'
 export interface TaskBaseProps {
   type: TaskType
   answer: Answer
+}
+
+export interface EditableTaskProps extends TaskBaseProps {
   onAnswerUpdate: (answer: Answer) => void
-  disabled?: boolean
 }
diff --git a/src/pages/MarkingPage/MarkableSubmission.tsx b/src/pages/MarkingPage/MarkableSubmission.tsx
index d2ef434..8d82f3b 100644
--- a/src/pages/MarkingPage/MarkableSubmission.tsx
+++ b/src/pages/MarkingPage/MarkableSubmission.tsx
@@ -6,11 +6,10 @@ import React, { FC } from 'react'
 import Part from '../../components/questionStructure/Part'
 import Question from '../../components/questionStructure/Question'
 import Section from '../../components/questionStructure/Section'
-import { TaskFactory, TaskProps } from '../../components/questionStructure/Task'
+import { ReadOnlyTaskFactory, TaskProps } from '../../components/questionStructure/Task/readonly'
 import { Answer, Question as QuestionType } from '../../types/exam'
 import { MarkRoot, Student } from '../../types/marking'
 import MarkInputPanel from './MarkInputPanel'
-import NoAnswerBanner from './NoAnswerBanner'
 import QuestionHeader from './QuestionHeader'
 
 interface MarkableSubmissionProps {
@@ -61,14 +60,11 @@ const MarkableSubmission: FC<MarkableSubmissionProps> = ({
                             {section.tasks.map((task, t_) => {
                               const t = t_ + 1
                               const answer = lookupAnswer(student.username, q, p, s, t)
-                              if (!answer) return <NoAnswerBanner key={t_} />
                               return (
-                                <TaskFactory
+                                <ReadOnlyTaskFactory
                                   key={`${sectionId}-${t}`}
                                   {...({
-                                    disabled: true,
                                     answer: answer,
-                                    onAnswerUpdate: (v) => {},
                                     ...instanceToPlain(task),
                                   } as TaskProps)}
                                 />
diff --git a/src/pages/QuestionPage/index.tsx b/src/pages/QuestionPage/index.tsx
index 12b8f4f..8baba39 100644
--- a/src/pages/QuestionPage/index.tsx
+++ b/src/pages/QuestionPage/index.tsx
@@ -8,7 +8,7 @@ import Header from '../../components/pageStructure/Header'
 import Part from '../../components/questionStructure/Part'
 import Question from '../../components/questionStructure/Question'
 import Section from '../../components/questionStructure/Section'
-import { TaskFactory, TaskProps } from '../../components/questionStructure/Task'
+import { EditableTaskFactory, TaskProps } from '../../components/questionStructure/Task/editable'
 import { Answer, Question as QuestionSpec } from '../../types/exam'
 import AnswerStatus from './AnswerStatus'
 
@@ -49,7 +49,7 @@ const QuestionPage: FC<QuestionPageProps> = ({
                         const answer = lookupAnswer(questionNumber, p, s, t)
                         return (
                           <Grid columns="7fr 3fr" key={`${sectionId}-${t}`}>
-                            <TaskFactory
+                            <EditableTaskFactory
                               {...({
                                 ...instanceToPlain(task),
                                 onAnswerUpdate: saveAnswer,
diff --git a/src/tests/components/questionStructure/Task.test.tsx b/src/tests/components/questionStructure/Task.test.tsx
index 2c84233..a770423 100644
--- a/src/tests/components/questionStructure/Task.test.tsx
+++ b/src/tests/components/questionStructure/Task.test.tsx
@@ -1,12 +1,12 @@
 import '@testing-library/jest-dom/extend-expect'
 import { render, screen } from '@testing-library/react'
 
-import { TaskFactory } from '../../../components/questionStructure/Task'
 import { TaskType } from '../../../components/questionStructure/Task/constants'
-import { EssayTask } from '../../../components/questionStructure/Task/variants/EssayTask'
+import { EditableTaskFactory } from '../../../components/questionStructure/Task/editable'
+import { EssayTask } from '../../../components/questionStructure/Task/editable/variants/EssayTask'
 import { Answer } from '../../../types/exam'
 
-jest.mock('../../../components/questionStructure/Task/variants/EssayTask', () => ({
+jest.mock('../../../components/questionStructure/Task/editable/variants/EssayTask', () => ({
   EssayTask: jest.fn(),
 }))
 
@@ -18,7 +18,9 @@ describe('Task Component', () => {
   afterEach(jest.clearAllMocks)
   const updateHandler = jest.fn()
   it('should render correctly according to requested task type', () => {
-    render(<TaskFactory type={TaskType.ESSAY} answer={answer} onAnswerUpdate={updateHandler} />)
+    render(
+      <EditableTaskFactory type={TaskType.ESSAY} answer={answer} onAnswerUpdate={updateHandler} />
+    )
     expect(EssayTask).toHaveBeenCalledWith(
       expect.objectContaining({
         type: TaskType.ESSAY,
@@ -31,7 +33,7 @@ describe('Task Component', () => {
 
   it('renders the description if provided', () => {
     render(
-      <TaskFactory
+      <EditableTaskFactory
         instructions="Test description"
         type={TaskType.ESSAY}
         answer={answer}
diff --git a/src/tests/components/questionStructure/TaskVariants.test.tsx b/src/tests/components/questionStructure/TaskVariants.test.tsx
index 0f5adaa..c5d89c3 100644
--- a/src/tests/components/questionStructure/TaskVariants.test.tsx
+++ b/src/tests/components/questionStructure/TaskVariants.test.tsx
@@ -2,11 +2,14 @@ import '@testing-library/jest-dom/extend-expect'
 import { fireEvent, render, screen } from '@testing-library/react'
 
 import { TaskType } from '../../../components/questionStructure/Task/constants'
-import { CodeTask } from '../../../components/questionStructure/Task/variants/CodeTask'
-import { EssayTask } from '../../../components/questionStructure/Task/variants/EssayTask'
-import { FlagTask } from '../../../components/questionStructure/Task/variants/FlagTask'
-import { MCQMultiTask, MCQOneTask } from '../../../components/questionStructure/Task/variants/MCQ'
-import { NumberTask } from '../../../components/questionStructure/Task/variants/NumberTask'
+import { CodeTask } from '../../../components/questionStructure/Task/editable/variants/CodeTask'
+import { EssayTask } from '../../../components/questionStructure/Task/editable/variants/EssayTask'
+import { FlagTask } from '../../../components/questionStructure/Task/editable/variants/FlagTask'
+import {
+  MCQMultiTask,
+  MCQOneTask,
+} from '../../../components/questionStructure/Task/editable/variants/MCQ'
+import { NumberTask } from '../../../components/questionStructure/Task/editable/variants/NumberTask'
 import { Answer } from '../../../types/exam'
 
 const options = [
@@ -49,18 +52,6 @@ describe('FlagTask', () => {
     fireEvent.change(input, { target: { value: ' FLAG 123 ' } })
     expect(input).toHaveValue('FLAG123')
   })
-
-  it('renders as disabled', () => {
-    render(
-      <FlagTask
-        type={TaskType.FLAG}
-        answer={{ answer: '' } as Answer}
-        onAnswerUpdate={() => {}}
-        disabled={true}
-      />
-    )
-    expect(screen.getByRole('textbox')).toBeDisabled()
-  })
 })
 
 describe('NumberTask', () => {
@@ -74,18 +65,6 @@ describe('NumberTask', () => {
     )
     expect(screen.getByRole('spinbutton')).toBeInTheDocument()
   })
-
-  it('renders as disabled', () => {
-    render(
-      <NumberTask
-        type={TaskType.INTEGER}
-        answer={{ answer: '' } as Answer}
-        onAnswerUpdate={() => {}}
-        disabled={true}
-      />
-    )
-    expect(screen.getByRole('spinbutton')).toBeDisabled()
-  })
 })
 
 describe('EssayTask', () => {
@@ -99,18 +78,6 @@ describe('EssayTask', () => {
     )
     expect(screen.getByRole('textbox')).toBeInTheDocument()
   })
-
-  it('renders as disabled', () => {
-    render(
-      <EssayTask
-        type={TaskType.ESSAY}
-        answer={{ answer: '' } as Answer}
-        onAnswerUpdate={() => {}}
-        disabled={true}
-      />
-    )
-    expect(screen.getByRole('textbox')).toBeDisabled()
-  })
 })
 
 describe('CodeTask', () => {
@@ -120,18 +87,6 @@ describe('CodeTask', () => {
     )
     expect(screen.getByRole('textbox')).toBeInTheDocument()
   })
-
-  it('renders as disabled', () => {
-    render(
-      <CodeTask
-        type={TaskType.CODE}
-        answer={{ answer: '' } as Answer}
-        onAnswerUpdate={() => {}}
-        disabled={true}
-      />
-    )
-    expect(screen.getByRole('textbox')).toBeDisabled()
-  })
 })
 
 describe('MCQOneTask', () => {
@@ -180,20 +135,6 @@ describe('MCQOneTask', () => {
     fireEvent.click(secondOption)
     expect(mockOnAnswerUpdate).not.toHaveBeenCalled()
   })
-
-  it('renders as disabled', () => {
-    render(
-      <MCQOneTask
-        type={TaskType.MULTIPLE_CHOICE_SELECT_ONE}
-        answer={{ answer: '' } as Answer}
-        onAnswerUpdate={() => {}}
-        choices={options}
-        disabled={true}
-      />
-    )
-    expect(screen.getByLabelText('Option 1')).toBeDisabled()
-    expect(screen.getByLabelText('Option 2')).toBeDisabled()
-  })
 })
 
 describe('MCQMultiTask', () => {
@@ -262,18 +203,4 @@ describe('MCQMultiTask', () => {
     expect(secondCheckbox).toBeChecked()
     expect(mockOnAnswerUpdate).toHaveBeenCalledWith({ answer: '1,2' })
   })
-
-  it('renders as disabled', () => {
-    render(
-      <MCQMultiTask
-        type={TaskType.MULTIPLE_CHOICE_SELECT_SEVERAL}
-        answer={{ answer: '' } as Answer}
-        onAnswerUpdate={() => {}}
-        choices={options}
-        disabled={true}
-      />
-    )
-    expect(screen.getByLabelText('Option 1')).toBeDisabled()
-    expect(screen.getByLabelText('Option 2')).toBeDisabled()
-  })
 })