diff --git a/components/DialogSlot.vue b/components/DialogSlot.vue
new file mode 100644
index 0000000..31e4db8
--- /dev/null
+++ b/components/DialogSlot.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import {
+  Dialog,
+  DialogPanel,
+  TransitionChild,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { useDialogSlot } from "../composables/dialogSlot";
+import { XMarkIcon } from "@heroicons/vue/24/solid";
+import { useI18n } from "vue-i18n";
+
+defineProps({
+  label: { type: String, default: "" },
+  showCross: { type: Boolean, default: true },
+  propClass: { type: String, default: "" },
+});
+
+const emits = defineEmits(["closeFunction"]);
+
+const { t }: any = useI18n();
+const open: any = useDialogSlot();
+function close() {
+  open.value = false;
+  emits("closeFunction");
+}
+</script>
+
+<template>
+  <TransitionRoot as="template" :show="open">
+    <Dialog as="div" class="relative z-10" @close="closeDialog()">
+      <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
+        leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
+        <div class="fixed inset-0 backdrop-blur-sm transition-opacity" />
+      </TransitionChild>
+
+      <div class="fixed bg-lightGray inset-0 z-10 overflow-y-auto">
+        <div class="flex min-h-full justify-center text-center items-center sm:p-0">
+          <TransitionChild as="template" enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+            <DialogPanel
+              class="w-full max-w-screen-md m-4 border border-accent relative transform overflow-hidden rounded-lg px-4 pt-5 pb-4 bg-primary text-left shadow-xl transition-all sm:my-8 sm:p-6">
+              <div class="flex justify-between items-center mb-5">
+                <p class="font-semibold">{{ t(label) }}</p>
+                <XMarkIcon v-if="showCross" @click="close()" class="h-5 w-5 relative cursor-pointer text-white" />
+              </div>
+              <slot />
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
diff --git a/components/form/Quiz.vue b/components/form/Quiz.vue
new file mode 100644
index 0000000..0ff6e28
--- /dev/null
+++ b/components/form/Quiz.vue
@@ -0,0 +1,326 @@
+<template>
+  <div class="flex flex-col">
+    <NoteBoard class="mb-10" :heading="'Headings.NoteCannotEditQuiz'" :content="'Body.NoteCannotEditQuiz'"
+      :-note-type="'error'" v-if="!!!user?.admin && !!data" />
+    <form class="flex flex-col gap-box" :class="{ 'form-submitting': form.submitting }"
+      @submit.prevent="onClickSubmitForm()" ref="refForm">
+      <Input :label="t('Inputs.Question')" :placeholder="'Body.QuizDummyQuestion'" v-model="form.question.value"
+        @valid="form.question.valid = $event" :rules="form.question.rules" />
+
+      <Btn @click="onClickAddOption" class="w-fit self-end">Add
+        Option</Btn>
+
+      <article class="flex gap-card items-center" v-for="(option, i) of options" :key="option?.id ?? i">
+        <Input :label="t('Inputs.Option')" :placeholder="option?.placeholder" v-model="option.answer"
+          @valid="option.valid = $event" :rules="option.rules" class="w-full" />
+        <div>
+          <label class="text-body-2 text-body font-body block mb-2">
+            {{ t("Inputs.Correct") }}
+          </label>
+          <InputSwitch :model-value="option.correct" @update:model-value="setOptionCorrect($event, i)" />
+        </div>
+
+        <Icon :icon="XMarkIcon" class="cursor-pointer" @click="onClickRemoveOption(i)" />
+      </article>
+    </form>
+    <InputBtn :loading="form.submitting" class="self-center" @click="onClickSubmitForm()" mt>
+      {{ t("Buttons.UpdateQuiz") }}
+    </InputBtn>
+  </div>
+</template>
+
+<script lang="ts">
+import { useI18n } from "vue-i18n";
+import type { IForm } from "~/types/form";
+import { XMarkIcon } from "@heroicons/vue/24/solid";
+import {
+  updateSubTaskInQuizForAdmin,
+  getSubTaskAndSolutionInQuiz,
+} from "~/composables/quizzes";
+
+export default defineComponent({
+  components: { XMarkIcon },
+  props: {
+    data: { type: Object, default: null },
+    taskId: { type: String, default: null },
+  },
+  setup(props) {
+    const { t } = useI18n();
+    const dialogSlot = useDialogSlot();
+    const dialogCreateSubtask = useDialogCreateSubtask();
+    const user: any = useUser();
+
+    const refForm = ref<HTMLFormElement | null>(null);
+    const selectedQuestionType = ref("Multi Choice");
+
+    const form = reactive<IForm>({
+      question: {
+        valid: false,
+        value: "",
+        rules: [(v: string) => !!v || "Error.InputEmpty_Inputs.Question"],
+      },
+      single_choice: { value: false, valid: true },
+
+      submitting: false,
+      validate: () => {
+        let isValid = true;
+
+        for (const key in form) {
+          if (
+            key != "validate" &&
+            key != "body" &&
+            key != "submitting" &&
+            !form[key].valid
+          ) {
+            isValid = false;
+          }
+        }
+
+        options.value.forEach((option: any) => {
+          if (option.valid == false) isValid = false;
+        });
+
+        if (refForm.value) refForm.value.reportValidity();
+        return isValid;
+      },
+      body: () => {
+        let obj: any = {};
+        for (const key in form) {
+          if (key != "validate" && key != "body" && key != "submitting")
+            obj[key] = form[key].value;
+        }
+
+        let mappedOptions = options.value.map((option: any) => {
+          return {
+            answer: option.answer,
+            correct: option.correct,
+            id: `Option-${getRandomNumber(0, 32432424324)}-${Date.now()}`,
+          };
+        });
+        return { ...obj, answers: mappedOptions };
+      },
+    });
+
+    const options = ref([
+      { answer: "", placeholder: "Headings.HTML", valid: false, correct: false },
+      { answer: "", placeholder: "Headings.Python", valid: false, correct: true },
+      { answer: "", placeholder: "Headings.PowerPoint", valid: false, correct: false },
+      { answer: "", placeholder: "Headings.Excel", valid: false, correct: false },
+    ]);
+
+    function onClickAddOption() {
+      let isAllowed = true;
+      if (options.value.length > 0) {
+        let lastAddedOption = options.value[options.value.length - 1].answer;
+        if (!!!lastAddedOption) isAllowed = false;
+      }
+
+      if (!isAllowed) {
+        openSnackbar(
+          "error",
+          "Please fill current option first before adding new option."
+        );
+        return;
+      }
+
+      options.value.push({
+        answer: "",
+        valid: false,
+        rules: [(v: string) => !!v || "Error.InputEmpty_Inputs.Option"],
+        correct: false,
+      });
+    }
+
+    function onClickRemoveOption(index: number) {
+      options.value.splice(index, 1);
+    }
+
+    function setOptionCorrect(status: boolean, index: number) {
+      if (selectedQuestionType.value == "Multi Choice" || status == false) {
+        options.value.splice(index, 1, {
+          ...options.value[index],
+          correct: status,
+        });
+        return;
+      }
+
+      let arr = options.value;
+
+      arr = arr.map((o: any, i: any) => {
+        return i == index ? { ...o, correct: true } : { ...o, correct: false };
+      });
+
+      arr.forEach((o: any) => {
+        options.value.pop();
+      });
+
+      arr.forEach((o: any) => {
+        options.value.push(o);
+      });
+    }
+
+    function setFormData(data: any) {
+      console.log("set form data");
+      if (!!!data) return;
+      form.question.value = data.question ?? "";
+      form.question.valid = !!form.question.value;
+
+      if (data?.single_choice) {
+        selectedQuestionType.value = "Single Choice";
+        form.single_choice.value = true;
+      } else {
+        selectedQuestionType.value = "Multi Choice";
+        form.single_choice.value = false;
+      }
+
+      let arr = data?.answers ?? [];
+
+      if (arr.length > 0) {
+        arr = arr.map((option: any) => {
+          return {
+            answer: option.answer,
+            valid: !!option.answer,
+            rules: [(v: string) => !!v || "Error.InputEmpty_Inputs.Option"],
+            correct: option.correct,
+          };
+        });
+      }
+
+      options.value = [];
+      Object.assign(options.value, [...arr]);
+    }
+
+    function hasDuplicates(array: any) {
+      let arrayDuplicated: any = [];
+      array.forEach((element: any) => {
+        arrayDuplicated.push(element.answer);
+      });
+      array = arrayDuplicated;
+
+      var encounteredItems: any = {};
+
+      for (var i = 0; i < array.length; i++) {
+        var currentItem = array[i].toLowerCase();
+        var currentItemString = String(currentItem);
+
+        if (encounteredItems[currentItemString]) return true;
+        encounteredItems[currentItemString] = true;
+      }
+      return false;
+    }
+
+    function hasTrueOption(arr: any) {
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].correct === true) {
+          return true;
+        }
+      }
+      return false;
+    }
+
+    function isSingleChoice(arr: any) {
+      let trueAre = 0;
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].correct === true) {
+          ++trueAre;
+          console.log("true");
+        }
+      }
+
+      if (trueAre == 1) return true
+      else if (trueAre > 1) return false
+    }
+
+    async function onClickSubmitForm() {
+      if (form.validate()) {
+        if (options.value.length <= 1) {
+          console.log("options", options.value);
+          openSnackbar("error", "Error.MinimumTwoOptionsForQuiz");
+          return;
+        }
+
+        if (!hasTrueOption(options.value))
+          return openSnackbar("error", "Error.OneCorrectOptionIsMust");
+
+        if (hasDuplicates(options.value))
+          return openSnackbar("error", "Error.OptionsCannotBeSame");
+
+        for (let i = 0; i < options.value.length; i++) {
+          if (options.value[i].answer.length > 256) {
+            return openSnackbar("error", t("Error.CannotHaveMoreCharacters", { input: t("Inputs.AnswerOption"), max: 256 }));
+          }
+        }
+
+        if (form.question.value.length > 4096)
+          return openSnackbar("error", t("Error.CannotHaveMoreCharacters", { input: t("Inputs.Question"), max: 4096 }));
+
+        form.single_choice.value = isSingleChoice(options.value);
+
+        editSubTask();
+      }
+      else {
+        openSnackbar("error", "Error.InvalidForm");
+      }
+    }
+
+    async function editSubTask() {
+      form.submitting = true;
+      if (!user.value.admin) {
+      }
+      const [success, error] = await updateSubTaskInQuizForAdmin(
+        props.taskId,
+        props.data?.id,
+        {
+          answers: form.body().answers,
+          question: form.body().question,
+          single_choice: form.body().single_choice,
+        }
+      );
+      form.submitting = false;
+      success
+        ? successHandler()
+        : errorHandler(error);
+    }
+
+    function successHandler() {
+      openSnackbar("success", "Success.CreatedQuiz");
+      dialogCreateSubtask.value = false;
+      dialogSlot.value = false;
+    }
+
+    function errorHandler(error: any) {
+      openSnackbar("error", error ?? "");
+    }
+
+    watch(
+      () => props.data,
+      async (newValue, oldValue) => {
+        if (!!!props.data) return;
+        setLoading(true);
+        const [success, error] = await getSubTaskAndSolutionInQuiz(
+          props.taskId,
+          newValue?.id
+        );
+        setLoading(false);
+        if (success) setFormData(success);
+        else openSnackbar("error", error);
+      },
+      { immediate: true, deep: true }
+    );
+
+    return {
+      form,
+      onClickSubmitForm,
+      refForm,
+      t,
+      onClickAddOption,
+      options,
+      XMarkIcon,
+      onClickRemoveOption,
+      selectedQuestionType,
+      setOptionCorrect,
+      user,
+    };
+  },
+});
+</script>
diff --git a/composables/dialogSlot.ts b/composables/dialogSlot.ts
new file mode 100644
index 0000000..218e6df
--- /dev/null
+++ b/composables/dialogSlot.ts
@@ -0,0 +1,2 @@
+export const useDialogSlot = () => useState("dialogSlot", () => false);
+export const useDialogCreateSubtask = () => useState("dialogCreateSubtask", () => false);
diff --git a/composables/quizzes.ts b/composables/quizzes.ts
new file mode 100644
index 0000000..61f0227
--- /dev/null
+++ b/composables/quizzes.ts
@@ -0,0 +1,49 @@
+import { useState } from "#app";
+import { Quiz } from "~/types/courseTypes";
+import { GET } from "./fetch";
+
+export const useSubTasksInQuiz = () => useState<Quiz[]>("subTasksInQuiz", () => []);
+export const useSubTaskAndSolutionInQuiz = () => useState<any>("subTaskAndSolutionInQuiz", () => null);
+
+export async function getSubTasksInQuiz(taskId: any, creator: any = "") {
+  try {
+    let query = "";
+
+    if (!!creator) {
+      query = `/challenges/tasks/${taskId}/multiple_choice?creator=${creator}`;
+    } else {
+      query = `/challenges/tasks/${taskId}/multiple_choice`;
+    }
+    const res = await GET(query);
+    const subTasksInQuiz = useSubTasksInQuiz();
+    subTasksInQuiz.value = res ?? [];
+
+    return [res, null];
+  } catch (error) {
+    return [null, error];
+  }
+}
+
+export async function updateSubTaskInQuizForAdmin(taskId: any, subTaskId: any, body: any) {
+  try {
+    const res = await PATCH(`/challenges/tasks/${taskId}/multiple_choice/${subTaskId}`, body);
+    const user: any = useUser();
+    await getSubTasksInQuiz(taskId, user?.value.id ?? "");
+    
+    return [res, null];
+  } catch (error) {
+    return [null, error];
+  }
+}
+
+export async function getSubTaskAndSolutionInQuiz(taskId: any, subTaskId: any) {
+  try {
+    const res = await GET(`/challenges/tasks/${taskId}/multiple_choice/${subTaskId}/solution`);
+    const subTaskAndSolutionInQuiz = useSubTaskAndSolutionInQuiz();
+    subTaskAndSolutionInQuiz.value = res ?? null;
+    
+    return [res, null];
+  } catch (error) {
+    return [null, error];
+  }
+}
diff --git a/locales/de.json b/locales/de.json
index e5ef3fb..65733a3 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -153,6 +153,9 @@
 		}
 	},
 	"Inputs": {
+		"Option": "Option",
+		"Correct": "Richtig",
+		"Question": "Frage",
 		"EmailOrUsername": "E-Mail-Adresse oder Spitzname",
 		"Password": "Passwort",
 		"CompanyId": "Firmen-ID",
@@ -184,6 +187,7 @@
 		"MFACode": "6-stelliger MFA-Code"
 	},
 	"Buttons": {
+		"UpdateQuiz": "Quiz aktualisieren",
 		"Incorrect": "Falsch",
 		"Correct": "Richtig",
 		"Safe": "Sicher",
@@ -206,6 +210,8 @@
 		"EditJob": "Job bearbeiten",
 		"EditCompany": "Firma bearbeiten",
 		"CreateCompany": "Neue Firma erstellen",
+		"adjustTask": "Aufgabe anpassen",
+		"markAsRevised": "Aufgabe als überarbeitet markieren",
 		"rejectReport": "Bericht zurückweisen",
 		"deleteTask": "Aufgabe löschen",
 		"blockReporter": "Reporter blockieren",
diff --git a/locales/en-US.json b/locales/en-US.json
index 0518ec8..a77915a 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -5,6 +5,8 @@
 		"LoginForm": "Please enter your credentials"
 	},
 	"Headings": {
+		"Option": "Option",
+		"Correct": "Correct",
 		"ManageReport": "Manage Report",
 		"userEnabled": "User aktiviert",
 		"userDisabled": "User deaktiviert",
@@ -187,6 +189,7 @@
 		"MFACode": "MFA 6 digit Code"
 	},
 	"Buttons": {
+		"UpdateQuiz": "Update Quiz",
 		"Incorrect": "Incorrect",
 		"Correct": "Correct",
 		"Safe": "Safe",
@@ -209,6 +212,8 @@
 		"EditJob": "Edit Job",
 		"EditCompany": "Edit Company",
 		"CreateCompany": "Create New Company",
+		"adjustTask": "Adjust Task",
+		"markAsRevised": "Mark task as revised",
 		"rejectReport": "Reject Report",
 		"deleteTask": "Delete Task",
 		"blockReporter": "Block reporter",
diff --git a/package-lock.json b/package-lock.json
index 59f5614..3dbde57 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,7 @@
 		"": {
 			"hasInstallScript": true,
 			"dependencies": {
+				"@headlessui/vue": "^1.7.23",
 				"@heroicons/vue": "^2.2.0",
 				"@typescript-eslint/parser": "^8.34.0",
 				"async-mutex": "^0.5.0",
@@ -1120,6 +1121,20 @@
 			"integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
 			"license": "MIT"
 		},
+		"node_modules/@headlessui/vue": {
+			"version": "1.7.23",
+			"resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.23.tgz",
+			"integrity": "sha512-JzdCNqurrtuu0YW6QaDtR2PIYCKPUWq28csDyMvN4zmGccmE7lz40Is6hc3LA4HFeCI7sekZ/PQMTNmn9I/4Wg==",
+			"dependencies": {
+				"@tanstack/vue-virtual": "^3.0.0-beta.60"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"vue": "^3.2.0"
+			}
+		},
 		"node_modules/@heroicons/vue": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.2.0.tgz",
@@ -4538,6 +4553,30 @@
 			"dev": true,
 			"license": "CC0-1.0"
 		},
+		"node_modules/@tanstack/virtual-core": {
+			"version": "3.13.9",
+			"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.9.tgz",
+			"integrity": "sha512-3jztt0jpaoJO5TARe2WIHC1UQC3VMLAFUW5mmMo0yrkwtDB2AQP0+sh10BVUpWrnvHjSLvzFizydtEGLCJKFoQ==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/tannerlinsley"
+			}
+		},
+		"node_modules/@tanstack/vue-virtual": {
+			"version": "3.13.9",
+			"resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.9.tgz",
+			"integrity": "sha512-HsvHaOo+o52cVcPhomKDZ3CMpTF/B2qg+BhPHIQJwzn4VIqDyt/rRVqtIomG6jE83IFsE2vlr6cmx7h3dHA0SA==",
+			"dependencies": {
+				"@tanstack/virtual-core": "3.13.9"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/tannerlinsley"
+			},
+			"peerDependencies": {
+				"vue": "^2.7.0 || ^3.0.0"
+			}
+		},
 		"node_modules/@trysound/sax": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
diff --git a/package.json b/package.json
index 73f243e..f58b360 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,9 @@
 		"dev": "nuxt dev",
 		"generate": "nuxt generate",
 		"preview": "nuxt preview",
-    "postinstall": "nuxt prepare",
-    "lint": "eslint --ext .js,.vue,.ts ."
+		"postinstall": "nuxt prepare",
+		"lint": "eslint --ext .js,.vue,.ts .",
+		"lint:fix": "eslint --ext .js,.vue,.ts --fix ."
 	},
 	"devDependencies": {
 		"autoprefixer": "^10.4.21",
@@ -18,6 +19,7 @@
 		"vue-i18n": "^11.1.5"
 	},
 	"dependencies": {
+		"@headlessui/vue": "^1.7.23",
 		"@heroicons/vue": "^2.2.0",
 		"@typescript-eslint/parser": "^8.34.0",
 		"async-mutex": "^0.5.0",
diff --git a/pages/dashboard/reported-tasks/[id].vue b/pages/dashboard/reported-tasks/[id].vue
index 09dc4af..5c486a5 100644
--- a/pages/dashboard/reported-tasks/[id].vue
+++ b/pages/dashboard/reported-tasks/[id].vue
@@ -1,129 +1,90 @@
 <template>
-  <div class="flex flex-col gap-5">
-    <PageTitle class="mb-2" />
-    <section
-      class="bg-[#3fdfa933] p-2 flex items-center capitalize gap-2 rounded-md"
-    >
-      <div class="h-8 w-8">
-        <ExclamationCircleIcon class="text-info min-w-[20px] min-h-[20px]" />
-      </div>
-      <p class="text-white max-w-fit text-lg flex gap-2">
-        <span class="font-bold"> {{ t("Headings.Reason") }}: </span>
-        <span>{{ t(`Body.${reportedTask.reason}`) }}</span>
-      </p>
-    </section>
-    <div class="flex flex-wrap xl:flex-nowrap justify-center">
-      <div class="w-1/3 p-3 min-w-[400px] flex-grow xl:flex-grow-0">
-        <p class="text-xl text-white">{{ t("Body.reportInformation") }}</p>
-        <p class="text-md text-white">
-          {{ t("Body.taskType") }}:
-          <span class="text-accent">{{
-            t(`Body.${reportedTask.subtask_type}`)
-          }}</span>
-        </p>
-        <p class="text-md text-white">
-          {{ t("Body.reportedBy") }}:
-          <span class="text-accent">{{ reportedTask.userName }}</span>
-        </p>
-        <p class="text-md text-white">
-          {{ t("Body.reason") }}:
-          <span class="text-accent">{{
-            reportedTask.reason.toLowerCase()
-          }}</span>
-        </p>
-        <p class="text-md text-white">
-          {{ t("Body.comment") }}:
-          <span class="text-accent">{{ reportedTask.comment }}</span>
-        </p>
-        <p class="text-md text-white">
-          {{ t("Body.reportedAt") }}:
-          <span class="text-accent">{{
-            `${reportedAt.date} ${reportedAt.month.string}, ${reportedAt.year}`
-          }}</span>
-        </p>
-        <p class="text-md text-white">
-          {{ t("Body.taskCreator") }}:
-          <span class="text-accent">{{ reportedTask.creatorName }}</span>
-        </p>
-      </div>
-      <div class="w-2/3 p-3 flex-grow xl:flex-grow-0">
-        <Reported-TasksQuizInfo
-          :mcq="mcq"
-          v-if="
-            reportedTask.subtask_type === TASK_TYPE.MULTIPLE_CHOICE_QUESTION
-          "
-        />
-        <Reported-TasksCodingChallengeInfo
-          v-if="reportedTask.subtask_type === TASK_TYPE.CODING_CHALLENGE"
-          :codingChallenge="CodingChallenge"
-          :codingChallengeSolution="codingChallengeSolution"
-        />
-
-        <Reported-TasksMatching
-          v-if="reportedTask.subtask_type === TASK_TYPE.MATCHING"
-        />
-
-        <Reported-TasksQuestion
-          v-if="reportedTask.subtask_type === TASK_TYPE.QUESTION"
-        />
-      </div>
-    </div>
-    <section class="flex justify-center gap-4 mt-2 flex-wrap lg:flex-nowrap">
-      <div class="flex flex-col gap-4 w-full">
-        <h2 class="text-xl text-white text-center">
-          {{ t("Headings.Report") }}
-        </h2>
-        <InputBtn
-          :icon="MinusCircleIcon"
-          class="w-full"
-          sm
-          :loading="loadingCorrect"
-          @click="fnResolveReport(RESOLVE.REVISE), (loadingCorrect = true)"
-        >
-          {{ t("Buttons.rejectReport") }}
-        </InputBtn>
-      </div>
-
-      <div class="flex flex-col gap-4 w-full">
-        <h2 class="text-xl text-white text-center">{{ t("Headings.Task") }}</h2>
-        <InputBtn
-          :icon="TrashIcon"
-          sm
-          :loading="loadingCorrect"
-          @click="deleteTask(), (loadingCorrect = true)"
-        >
-          {{ t("Buttons.deleteTask") }}
-        </InputBtn>
-      </div>
-
-      <div class="flex flex-col gap-4 w-full">
-        <h2 class="text-xl text-white text-center">
-          {{ t("Headings.Block") }}
-        </h2>
-        <InputBtn
-          :icon="NoSymbolIcon"
-          sm
-          :loading="loadingCorrect"
-          @click="
-            fnResolveReport(RESOLVE.BLOCK_REPORTER), (loadingCorrect = true)
-          "
-        >
-          {{ t("Buttons.blockReporter") }}
-        </InputBtn>
-
-        <InputBtn
-          :icon="NoSymbolIcon"
-          sm
-          :loading="loadingCorrect"
-          @click="
-            fnResolveReport(RESOLVE.BLOCK_CREATOR), (loadingCorrect = true)
-          "
-        >
-          {{ t("Buttons.blockCreator") }}
-        </InputBtn>
-      </div>
-    </section>
-  </div>
+	<div class="flex flex-col gap-5">
+		<PageTitle class="mb-2" />
+		<section class="bg-[#3fdfa933] p-2 flex items-center capitalize gap-2 rounded-md">
+			<div class="h-10 w-10 mt-0.5">
+				<ExclamationCircleIcon class="text-info min-w-[20px] min-h-[20px]" />
+			</div>
+			<p class="text-white max-w-fit flex gap-5">
+				<span class="font-bold text-xl"> {{ t("Headings.Reason") }} </span>
+				{{ t(`Body.${reportedTask.reason}`) }}
+			</p>
+		</section>
+		<div class="flex flex-wrap xl:flex-nowrap justify-center">
+			<div class="w-1/3 p-3 min-w-[400px] flex-grow xl:flex-grow-0">
+				<p class="text-xl text-white">{{ t("Body.reportInformation") }}</p>
+				<p class="text-md text-white">
+					{{ t("Body.taskType") }}:
+					<span class="text-accent">{{
+						t(`Body.${reportedTask.subtask_type}`)
+					}}</span>
+				</p>
+				<p class="text-md text-white">
+					{{ t("Body.reportedBy") }}:
+					<span class="text-accent">{{ reportedTask.userName }}</span>
+				</p>
+				<p class="text-md text-white">
+					{{ t("Body.reason") }}:
+					<span class="text-accent">{{
+						reportedTask.reason.toLowerCase()
+					}}</span>
+				</p>
+				<p class="text-md text-white">
+					{{ t("Body.comment") }}:
+					<span class="text-accent">{{ reportedTask.comment }}</span>
+				</p>
+				<p class="text-md text-white">
+					{{ t("Body.reportedAt") }}:
+					<span class="text-accent">{{
+						`${reportedAt.date} ${reportedAt.month.string}, ${reportedAt.year}`
+					}}</span>
+				</p>
+				<p class="text-md text-white">
+					{{ t("Body.taskCreator") }}:
+					<span class="text-accent">{{ reportedTask.creatorName }}</span>
+				</p>
+			</div>
+			<div class="w-2/3 p-3 flex-grow xl:flex-grow-0">
+				<Reported-TasksQuizInfo :mcq="mcq" v-if="
+					reportedTask.subtask_type === TASK_TYPE.MULTIPLE_CHOICE_QUESTION
+				" />
+				<Reported-TasksCodingChallengeInfo v-if="reportedTask.subtask_type === TASK_TYPE.CODING_CHALLENGE"
+					:codingChallenge="CodingChallenge" :codingChallengeSolution="codingChallengeSolution" />
+
+				<Reported-TasksMatching v-if="reportedTask.subtask_type === TASK_TYPE.MATCHING" />
+
+				<Reported-TasksQuestion v-if="reportedTask.subtask_type === TASK_TYPE.QUESTION" />
+			</div>
+		</div>
+		<section class="flex justify-center gap-4 mt-2 flex-wrap xl:flex-nowrap">
+			<InputBtn sm :loading="loadingCorrect" @click="deleteTask(), (loadingCorrect = true)">
+				{{ t("Buttons.deleteTask") }}
+			</InputBtn>
+
+			<InputBtn sm :loading="loadingCorrect" @click="
+				fnResolveReport(RESOLVE.BLOCK_REPORTER), (loadingCorrect = true)
+				">
+				{{ t("Buttons.blockReporter") }}
+			</InputBtn>
+
+			<InputBtn sm :loading="loadingCorrect" @click="fnResolveReport(RESOLVE.BLOCK_CREATOR), (loadingCorrect = true)">
+				{{ t("Buttons.blockCreator") }}
+			</InputBtn>
+
+			<InputBtn sm @click="openDialogEditTask()">
+				{{ t("Buttons.adjustTask") }}
+			</InputBtn>
+
+			<InputBtn sm :loading="loadingCorrect" @click="fnResolveReport(RESOLVE.REVISE), (loadingCorrect = true)">
+				{{ t("Buttons.markAsRevised") }}
+			</InputBtn>
+
+			<DialogSlot v-if="dialogEditTask" :label="'Headings.Quiz'" :show="dialogEditTask"
+				@closeFunction="closeEditTaskDialog()">
+				<LazyFormQuiz :data="mcq" :taskId="task_id.toString()" />
+			</DialogSlot>
+		</section>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -143,6 +104,7 @@ import {
 } from "@heroicons/vue/24/outline";
 import { useI18n } from "vue-i18n";
 import { RESOLVE, TASK_TYPE } from "~/types/reportedTaskTypes";
+import { useDialogSlot } from "~/composables/dialogSlot";
 
 definePageMeta({
   middleware: ["auth"],
@@ -152,31 +114,33 @@ definePageMeta({
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
+const dialogEditTask = useDialogSlot();
 const codingChallengeSolution: any = useCodingChallengeSolution();
 const reportId = computed(() => {
   return route.params?.id ?? "";
 });
 
-const task_id = computed(() => {
-  return route.query?.taskId ?? "";
-});
-const subtask_id = computed(() => {
-  return route.query?.subtaskId ?? "";
-});
+const task_id = computed(() => route.query?.taskId ?? "");
+const subtask_id = computed(() => route.query?.subtaskId ?? "");
 
 const reportedTask = useReportedSubtask();
-const reportedAt = computed(() => {
-  return convertTimestampToDate(
-    convertDateToTimestamp(reportedTask.value.timestamp)
-  );
-});
+const reportedAt = computed(() => convertTimestampToDate(
+  convertDateToTimestamp(reportedTask.value.timestamp)
+));
 
 const loadingCorrect = ref(false);
 const loadingInCorrect = ref(false);
 const CodingChallenge: any = useCodingChallenge();
-const solution: any = useCodingChallengeSolution();
 const mcq: any = useMcq();
 
+function openDialogEditTask() {
+  dialogEditTask.value = true;
+}
+
+async function closeEditTaskDialog() {
+  dialogEditTask.value = false;
+}
+
 async function fnResolveReport(action: RESOLVE) {
   const [success, error] = await resolveReport(reportId.value, {
     action: action,
diff --git a/types/courseTypes.ts b/types/courseTypes.ts
new file mode 100644
index 0000000..76a7449
--- /dev/null
+++ b/types/courseTypes.ts
@@ -0,0 +1,16 @@
+export class Quiz {
+  coins: number = 0;
+  creation_timestamp: string = "";
+  creator: string = "";
+  enabled: boolean = false;
+  id: string = "";
+  question: string = "";
+  rated: boolean = false;
+  retired: boolean = false;
+  single_choice: boolean = false;
+  solved: boolean = false;
+  task_id: string = "";
+  type: string = "";
+  xp: number = 0;
+  answers: string[] = [];
+}