diff --git a/cypress/e2e/partner-admin/default-tests/testProgressReportFiltering.spec.cy.js b/cypress/e2e/partner-admin/default-tests/testProgressReportFiltering.spec.cy.js
index 3e98d574e..2d56f22fc 100644
--- a/cypress/e2e/partner-admin/default-tests/testProgressReportFiltering.spec.cy.js
+++ b/cypress/e2e/partner-admin/default-tests/testProgressReportFiltering.spec.cy.js
@@ -34,6 +34,7 @@ function setFilterBySchool(school) {
 function setFilterByGrade(grade) {
   cy.get('[data-cy="filter-by-grade"]', { timeout: timeout }).click();
   cy.get('ul > li', { timeout: timeout }).contains(grade).click();
+  cy.get('body').type('{esc}');
   cy.wait(0.05 * timeout);
 }
 
@@ -41,6 +42,7 @@ function setFilterByProgressCategory(header, category) {
   cy.contains('div.p-column-header-content', header).find('button').click();
   cy.get('[data-cy="progress-filter-dropdown"]', { timeout: timeout }).click();
   cy.get('ul>li').find('.p-tag-value', { timeout: timeout }).contains(category).click();
+  // Click off the dropdown to prevent it from hiding other elements
   cy.get('button').contains('Apply').click();
   cy.wait(0.05 * timeout);
 }
diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
new file mode 100644
index 000000000..b390481aa
--- /dev/null
+++ b/src/components/tasks/ManageTasks.vue
@@ -0,0 +1,797 @@
+<template>
+  <PvToast />
+  <PvSelectButton
+    v-model="viewModel"
+    :options="modelViews"
+    class="flex my-2 select-button p-2"
+    @change="handleViewChange($event.value)"
+  />
+  <div v-show="viewModel === 'Create Task'">
+    <div v-if="!created" class="card px-3">
+      <h1 class="text-center font-bold">Create a New Task</h1>
+      <!-- <p class="login-title" align="left">Register for ROAR</p> -->
+      <form class="p-fluid" @submit.prevent="handleNewTaskSubmit(!t$.$invalid)">
+        <!-- Task name -->
+        <div class="flex flex-column row-gap-3">
+          <section class="form-section">
+            <div class="p-input-icon-right">
+              <label for="taskName">
+                <small class="text-gray-400 font-bold">Task Name </small>
+                <span class="required">*</span></label
+              >
+              <PvInputText
+                v-model="t$.taskName.$model"
+                name="taskName"
+                :class="{ 'p-invalid': t$.taskName.$invalid && submitted }"
+                aria-describedby="activation-code-error"
+              />
+            </div>
+            <span v-if="t$.taskName.$error && submitted">
+              <span v-for="(error, index) of t$.taskName.$errors" :key="index">
+                <small class="p-error">{{ error.$message }}</small>
+              </span>
+            </span>
+            <small v-if="(t$.taskName.$invalid && submitted) || t$.taskName.$pending.$response" class="p-error">
+              {{ t$.taskName.required.$message.replace('Value', 'Task Name') }}
+            </small>
+          </section>
+          <!-- Task ID -->
+          <section class="form-section">
+            <div class="p-input-icon-right">
+              <label for="taskId">
+                <small class="text-gray-400 font-bold">Task ID </small>
+                <span class="required">*</span></label
+              >
+              <PvInputText
+                v-model="t$.taskId.$model"
+                name="taskId"
+                :class="{ 'p-invalid': t$.taskId.$invalid && submitted }"
+                aria-describedby="activation-code-error"
+              />
+            </div>
+            <span v-if="t$.taskId.$error && submitted">
+              <span v-for="(error, index) of t$.taskId.$errors" :key="index">
+                <small class="p-error">{{ error.$message }}</small>
+              </span>
+            </span>
+            <small v-else-if="(t$.taskId.$invalid && submitted) || t$.taskId.$pending.$response" class="p-error">
+              {{ t$.taskId.required.$message.replace('Value', 'Task ID') }}
+            </small>
+          </section>
+          <!-- Cover Image -->
+          <section class="form-section">
+            <div>
+              <label for="coverImage">
+                <small class="text-gray-400 font-bold">Cover Image (URL)</small>
+              </label>
+              <PvInputText v-model="taskFields.coverImage" name="coverImage" />
+            </div>
+          </section>
+          <!--Description-->
+          <section class="form-section">
+            <div class="p-input-icon-right">
+              <label for="description">
+                <small class="text-gray-400 font-bold">Description</small>
+              </label>
+              <PvInputText v-model="taskFields.description" name="description" />
+            </div>
+          </section>
+          <!--Task URL-->
+          <section class="form-section">
+            <div v-if="isExternalTask">
+              <label for="taskURL">
+                <small class="text-gray-400 font-bold">Task URL </small>
+                <span class="required">*</span></label
+              >
+              <PvInputText
+                v-model="t$.taskURL.$model"
+                name="taskURL"
+                :class="{ 'p-invalid': t$.taskURL.$invalid && submitted }"
+                aria-describedby="first-name-error"
+              />
+              <span v-if="t$.taskURL.$error && submitted">
+                <span v-for="(error, index) of t$.taskURL.$errors" :key="index">
+                  <small class="p-error">{{ error.$message }}</small>
+                </span>
+              </span>
+              <small v-else-if="(t$.taskURL.$invalid && submitted) || t$.taskURL.$pending.$response" class="p-error">
+                {{ t$.taskURL.required.$message.replace('Value', 'Task URL') }}
+              </small>
+            </div>
+          </section>
+        </div>
+
+        <div v-if="!isExternalTask">
+          <h3 class="text-center">
+            <strong>Configure Game Parameters</strong>
+          </h3>
+          <h4 class="text-center">Create the configurable game parameters for variants of this task.</h4>
+          <div v-for="(param, index) in gameConfig" :key="index">
+            <div class="flex gap-2 align-content-start flex-grow-0 params-container">
+              <PvInputText v-model="param.name" placeholder="Name" />
+
+              <PvDropdown v-model="param.type" :options="typeOptions" />
+
+              <PvInputText v-if="param.type === 'string'" v-model="param.value" placeholder="Value" />
+
+              <PvDropdown v-else-if="param.type === 'boolean'" v-model="param.value" :options="[true, false]" />
+
+              <PvInputNumber v-else-if="param.type === 'number'" v-model="param.value" />
+
+              <PvButton
+                icon="pi pi-trash"
+                class="delete-btn my-1 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                text
+                @click="removeField(gameConfig, index)"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div v-else>
+          <h3 class="text-center">Configure URL Parameters</h3>
+          <h4 class="text-center">
+            These parameters will be appended to the task URL to generate the variant URL for this task.
+          </h4>
+          <div v-for="(param, index) in taskParams" :key="index">
+            <div class="flex gap-2 align-content-start flex-grow-0 params-container">
+              <PvInputText v-model="param.name" placeholder="Name" />
+
+              <PvDropdown v-model="param.type" :options="typeOptions" />
+
+              <PvInputText v-if="param.type === 'string'" v-model="param.value" placeholder="Value" />
+
+              <PvDropdown v-else-if="param.type === 'boolean'" v-model="param.value" :options="[true, false]" />
+
+              <PvInputNumber v-else-if="param.type === 'number'" v-model="param.value" />
+
+              <PvButton
+                icon="pi pi-trash"
+                text
+                class="delete-btn bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                @click="removeField(taskParams, index)"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="w-full flex justify-content-center">
+          <div v-if="!isExternalTask" class="w-2">
+            <PvButton
+              label="Add Field"
+              text
+              icon="pi pi-plus"
+              class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+              @click="addField(gameConfig)"
+            />
+          </div>
+          <div v-else class="w-2">
+            <PvButton
+              label="Add Field"
+              text
+              icon="pi pi-plus"
+              class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+              @click="addField(taskParams)"
+            />
+          </div>
+        </div>
+        <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">
+          <div class="flex flex-row align-items-center">
+            <PvCheckbox v-model="taskCheckboxData" input-id="chbx-demoTask" value="isDemoTask" />
+            <label class="ml-1 mr-3" for="chbx-demoTask">Mark as <b>Demo Task</b></label>
+          </div>
+          <div class="flex flex-row align-items-center">
+            <PvCheckbox v-model="taskCheckboxData" input-id="chbx-testTask" value="isTestTask" />
+            <label class="ml-1 mr-3" for="chbx-testTask">Mark as <b>Test Task</b></label>
+          </div>
+          <div class="flex flex-row align-items-center">
+            <PvCheckbox v-model="taskCheckboxData" input-id="chbx-externalTask" value="isExternalTask" />
+            <label class="ml-1 mr-3" for="chbx-externalTask">Mark as <b>External Task</b> </label>
+          </div>
+          <div class="flex flex-row align-items-center">
+            <PvCheckbox v-model="taskCheckboxData" input-id="chbx-registeredTask" value="isRegisteredTask" />
+            <label class="ml-1 mr-3" for="chbx-externalTask">Mark as <b>Registered Task</b> </label>
+          </div>
+        </div>
+        <div class="form-submit">
+          <PvButton
+            type="submit"
+            label="Submit"
+            class="submit-button bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+            severity="primary"
+          />
+        </div>
+      </form>
+    </div>
+
+    <div v-else>
+      <h2>Your task has been created!</h2>
+      <p>
+        Redirect to this URL upon task completion. ParticipantId can be any string, completed should be set to true.
+      </p>
+      <p>roar.education/?participantId=[$PARTICIPANT_ID]&completed=[$BOOLEAN]</p>
+      <PvButton
+        label="Create Another Task"
+        class="submit-button bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+        @click="created = false"
+      />
+    </div>
+  </div>
+
+  <div v-show="viewModel === 'Update Task'">
+    <h1 class="text-center font-bold">Update a Task</h1>
+    <form @submit.prevent="handleUpdateTask()">
+      <section class="flex flex-column gap-2 mb-4 p-4">
+        <label for="variant-fields" class="my-2">
+          <small class="text-gray-400 font-bold">Select an Existing Task </small>
+          <span class="required">*</span></label
+        >
+        <PvDropdown
+          v-model="selectedTask"
+          :options="formattedTasks"
+          option-label="name"
+          option-value="id"
+          placeholder="Select a Task"
+        />
+      </section>
+
+      <section v-if="taskData" class="flex flex-column align-items-start mt-4 p-4">
+        <div class="flex flex-column w-full">
+          <label for="fieldsOutput">
+            <strong>Fields</strong>
+          </label>
+          <div v-for="(value, key) in taskData" :key="key">
+            <div v-if="!ignoreFields.includes(key)">
+              <div
+                v-if="updatedTaskData[key] !== undefined"
+                class="flex align-items-center justify-content-between gap-2 mb-1"
+              >
+                <label :for="key" class="w-1">
+                  <em>{{ key }}</em>
+                </label>
+                <PvInputText :placeholder="typeof value" class="w-2 text-center" disabled />
+
+                <PvInputText
+                  v-if="typeof value === 'string'"
+                  v-model="updatedTaskData[key]"
+                  :placeholder="value"
+                  class="flex-grow-1"
+                />
+                <PvInputNumber
+                  v-else-if="typeof value === 'number'"
+                  v-model="updatedTaskData[key]"
+                  class="flex-grow-1"
+                />
+                <PvDropdown
+                  v-else-if="typeof value === 'boolean'"
+                  v-model="updatedTaskData[key]"
+                  :options="booleanDropDownOptions"
+                  option-label="label"
+                  option-value="value"
+                  class="flex-grow-1"
+                />
+                <PvButton
+                  type="button"
+                  icon="pi pi-trash"
+                  class="bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                  text
+                  @click="deleteParam(key)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="newFields.length > 0" class="w-full">
+          <div v-for="(field, index) in newFields" :key="index" class="flex align-items-center column-gap-2 mb-1">
+            <PvInputText v-model="field.name" placeholder="Field Name" />
+            <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
+
+            <PvInputText
+              v-if="field.type === 'string'"
+              v-model="field.value"
+              placeholder="Field Value"
+              class="flex-grow-1"
+            />
+            <PvInputNumber
+              v-if="field.type === 'number'"
+              v-model="field.value"
+              placeholder="Field Value"
+              class="flex-grow-1"
+            />
+            <PvDropdown
+              v-if="field.type === 'boolean'"
+              v-model="field.value"
+              placeholder="Field Value"
+              :options="booleanDropDownOptions"
+              option-label="label"
+              option-value="value"
+              class="flex-grow-1"
+            />
+            <PvButton
+              type="button"
+              icon="pi pi-trash"
+              class="bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+              text
+              @click="removeNewField(field.name, newFields)"
+            />
+          </div>
+        </div>
+        <PvButton
+          label="Add Field"
+          text
+          icon="pi pi-plus"
+          class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+          @click="newField"
+        />
+
+        <div class="flex flex-column w-full">
+          <label for="gameConfigOutput">
+            <strong>Game Parameters</strong>
+          </label>
+          <div v-for="(param, paramName) in updatedTaskData.gameConfig" id="paramsOutput" :key="paramName" class="mb-1">
+            <div
+              v-if="updatedTaskData.gameConfig[paramName] !== undefined"
+              class="flex align-items-center justify-content-end column-gap-2"
+            >
+              <label :for="paramName" class="w-2">
+                <em>{{ paramName }} </em>
+              </label>
+              <PvInputText id="inputEditParamType" :placeholder="typeof param" class="w-2 text-center" disabled />
+              <PvInputText
+                v-if="typeof param === 'string'"
+                v-model="updatedTaskData.gameConfig[paramName]"
+                :placeholder="param"
+                class="flex-grow-1"
+              />
+              <PvInputNumber
+                v-else-if="typeof param === 'number'"
+                v-model="updatedTaskData.gameConfig[paramName]"
+                class="flex-grow-1"
+              />
+              <PvDropdown
+                v-else-if="typeof param === 'boolean'"
+                v-model="updatedTaskData.gameConfig[paramName]"
+                :options="booleanDropDownOptions"
+                option-label="label"
+                option-value="value"
+                class="flex-grow-1"
+              />
+              <PvButton
+                type="button"
+                icon="pi pi-trash"
+                class="bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                text
+                @click="deleteParam(paramName)"
+              />
+            </div>
+          </div>
+          <div v-if="addedGameConfig.length > 0">
+            <div
+              v-for="(field, index) in addedGameConfig"
+              :key="index"
+              class="flex align-items-center column-gap-2 mb-1"
+            >
+              <PvInputText v-model="field.name" placeholder="Field Name" />
+              <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
+              <PvInputText
+                v-if="field.type === 'string'"
+                v-model="field.value"
+                placeholder="Field Value"
+                class="flex-grow-1"
+              />
+              <PvInputNumber
+                v-if="field.type === 'number'"
+                v-model="field.value"
+                placeholder="Field Value"
+                class="flex-grow-1"
+              />
+              <PvDropdown
+                v-if="field.type === 'boolean'"
+                v-model="field.value"
+                placeholder="Field Value"
+                :options="booleanDropDownOptions"
+                option-label="label"
+                option-value="value"
+                class="flex-grow-1"
+              />
+              <PvButton
+                type="button"
+                icon="pi pi-trash"
+                class="bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                text
+                @click="removeNewField(field.name, addedGameConfig)"
+              />
+            </div>
+          </div>
+        </div>
+        <PvButton
+          label="Add Parameter"
+          text
+          icon="pi pi-plus"
+          class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+          @click="addGameConfig"
+        />
+      </section>
+
+      <PvButton type="submit" class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+        >Update Task</PvButton
+      >
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+import { required, requiredIf, url } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { useAuthStore } from '@/store/auth';
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
+import { storeToRefs } from 'pinia';
+import { useToast } from 'primevue/usetoast';
+import { taskFetcher } from '@/helpers/query/tasks';
+import { cloneDeep, camelCase } from 'lodash';
+
+const toast = useToast();
+const initialized = ref(false);
+const registeredTasksOnly = ref(true);
+const taskCheckboxData = ref();
+const authStore = useAuthStore();
+const { roarfirekit } = storeToRefs(authStore);
+const queryClient = useQueryClient();
+
+const isExternalTask = computed(() => !!taskCheckboxData.value?.find((item) => item === 'isExternalTask'));
+const selectedTask = ref(null);
+let taskData = computed(() => {
+  if (!selectedTask.value) return null;
+
+  return tasks.value.find((task) => task.id === selectedTask.value);
+});
+
+// Reactive clone for holding changes made to taskData without affecting the original taskData and avoiding reactivity issues
+let updatedTaskData = reactive(cloneDeep(taskData.value));
+// Array of objects which models the new fields for the task object being updated
+// This array of objects is later converted back into an object and spread into the updatedTaskData object
+let newFields = reactive([]);
+// Array of objects which models the new fields for the gameConfig object being updated
+// This array of objects is later converted back into an object and spread into the updatedTaskData object
+let addedGameConfig = reactive([]);
+
+const viewModel = ref('Create Task');
+const modelViews = ['Create Task', 'Update Task'];
+
+const handleViewChange = (value) => {
+  const selectedView = modelViews.find((view) => view === value);
+  if (selectedView) {
+    viewModel.value = selectedView;
+  }
+};
+
+watch(taskData, (newVal) => {
+  updatedTaskData = reactive(cloneDeep(newVal));
+});
+
+// Ignore these fields when displaying the task data
+const ignoreFields = ['id', 'lastUpdated', 'gameConfig', 'parentDoc'];
+
+const typeOptions = ['string', 'number', 'boolean'];
+
+const booleanDropDownOptions = [
+  { label: 'true', value: true },
+  { label: 'false', value: false },
+];
+
+const submitted = ref(false);
+const created = ref(false);
+
+let unsubscribe;
+const init = () => {
+  if (unsubscribe) unsubscribe();
+  initialized.value = true;
+};
+
+unsubscribe = authStore.$subscribe(async (mutation, state) => {
+  if (state.roarfirekit.restConfig) init();
+});
+
+onMounted(() => {
+  if (roarfirekit.value.restConfig) init();
+});
+
+const { data: tasks } = useQuery({
+  queryKey: ['tasks', registeredTasksOnly],
+  // non-registered tasks, all data
+  queryFn: () => taskFetcher(false, true),
+  keepPreviousData: true,
+  enabled: initialized,
+  staleTime: 5 * 60 * 1000, // 5 minutes
+});
+
+const formattedTasks = computed(() => {
+  if (!tasks.value) return [];
+  return tasks.value.map((task) => {
+    return {
+      name: task.taskName ?? task.id,
+      ...task,
+    };
+  });
+});
+
+// For modeling a task to submit to the DB
+const taskFields = reactive({
+  taskName: '',
+  taskURL: '',
+  taskId: '',
+  coverImage: '',
+  description: '',
+  gameConfig: {},
+  // Based on type of account?
+  external: isExternalTask,
+});
+
+// Validation rules for task fields
+const taskRules = {
+  taskName: { required },
+  taskURL: { required: requiredIf(isExternalTask.value), url },
+  taskId: { required },
+};
+
+const t$ = useVuelidate(taskRules, taskFields);
+
+// Array of objects which models the game configuration fields
+// This array of objects is later converted back into an object and spread into the task object
+const gameConfig = ref([
+  {
+    name: '',
+    value: '',
+    type: 'String',
+  },
+]);
+
+// Array of objects which models the task parameters and is used to build the task URL
+const taskParams = ref([
+  {
+    name: '',
+    value: '',
+    type: 'String',
+  },
+]);
+
+// For adding a new field to the new task document
+function addField(type) {
+  type.push({
+    name: '',
+    value: '',
+    type: 'String',
+  });
+}
+
+// For removing a field from the task document
+function removeField(type, index) {
+  type.splice(index, 1);
+}
+
+// Adds a new object to the newFields array, which models a new field for the task object being updated
+const newField = () => {
+  newFields.push({ name: '', value: '', type: 'string' });
+};
+
+// Removes a field from the newFields or addedGameConfig array
+const removeNewField = (field, array) => {
+  const updatedFields = array.filter((item) => item.name !== field);
+  array.splice(0, array.length, ...updatedFields);
+};
+
+// Deletes a parameter from the updatedTaskData object
+const deleteParam = (param) => {
+  if (updatedTaskData['gameConfig'][param] !== undefined) {
+    delete updatedTaskData['gameConfig'][param];
+  }
+  delete updatedTaskData[param];
+};
+
+// Adds a new object to the addedGameConfig array, which models a new field for the gameConfig object being updated
+const addGameConfig = () => {
+  addedGameConfig.push({ name: '', value: '', type: 'string' });
+};
+
+// Takes the array of objects that will be added to the current data object in Firestore
+// and checks if any of the new fields are duplicates of existing fields to prevent overwriting data
+const checkForDuplicates = (newItemsArray, currentDataObject) => {
+  if (currentDataObject === undefined) return { isDuplicate: false, duplicateField: '' };
+
+  const keys = Object.keys(currentDataObject);
+  for (const newItem of newItemsArray) {
+    if (keys.includes(newItem.name)) {
+      return { isDuplicate: true, duplicateField: newItem.name };
+    }
+  }
+  return { isDuplicate: false, duplicateField: '' };
+};
+
+// Helper function to check for errors before updating a task
+// Returns true if there are errors, false if there are none
+const checkForErrors = () => {
+  console.log('Checking for errors...');
+  if (!selectedTask.value) {
+    toast.add({ severity: 'error', summary: 'Oops!', detail: 'Please select a task to update.', life: 3000 });
+    return true;
+  }
+
+  if (newFields.length > 0) {
+    const { isDuplicate, duplicateField } = checkForDuplicates(newFields, updatedTaskData);
+    if (isDuplicate) {
+      toast.add({
+        severity: 'error',
+        summary: 'Oops!',
+        detail: `Duplicate field name detected: ${duplicateField}.`,
+        life: 3000,
+      });
+      return true;
+    }
+  }
+
+  if (addedGameConfig.length > 0) {
+    const { isDuplicate, duplicateField } = checkForDuplicates(addedGameConfig, updatedTaskData.gameConfig);
+    if (isDuplicate) {
+      toast.add({
+        severity: 'error',
+        summary: 'Oops!',
+        detail: `Duplicate field name detected: ${duplicateField}.`,
+        life: 3000,
+      });
+      return true;
+    }
+  }
+  return false;
+};
+
+const handleUpdateTask = async () => {
+  // Check for errors before updating the task; end function if errors are found
+  if (checkForErrors()) return;
+
+  const convertedFields = convertParamsToObj(newFields);
+  const convertedGameConfig = convertParamsToObj(addedGameConfig);
+  const updateData = {
+    taskId: selectedTask.value,
+    data: {
+      ...updatedTaskData,
+      ...convertedFields,
+      gameConfig: {
+        ...updatedTaskData.gameConfig,
+        ...convertedGameConfig,
+      },
+    },
+  };
+
+  try {
+    await authStore.roarfirekit.updateTaskOrVariant(updateData);
+    toast.add({ severity: 'success', summary: 'Hoorah!', detail: 'Task successfully updated.', life: 3000 });
+
+    // Reset the form and re-fetch the tasks
+    resetUpdateTaskForm();
+    await queryClient.invalidateQueries(['tasks', registeredTasksOnly]);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const handleNewTaskSubmit = async (isFormValid) => {
+  submitted.value = true;
+  const isDemoData = !!taskCheckboxData.value?.find((item) => item === 'isDemoTask');
+  const isTestData = !!taskCheckboxData.value?.find((item) => item === 'isTestTask');
+  const isExternalTask = !!taskCheckboxData.value?.find((item) => item === 'isExternalTask');
+  const isRegisteredTask = !!taskCheckboxData.value?.find((item) => item === 'isRegisteredTask');
+
+  if (!isFormValid) {
+    return;
+  }
+
+  const convertedGameConfig = convertParamsToObj(gameConfig) ?? {};
+  const convertedTaskParams = isExternalTask ? convertParamsToObj(taskParams) : null;
+
+  let newTaskObject = reactive({
+    taskId: taskFields.taskId,
+    taskName: taskFields.taskName,
+    taskDescription: taskFields.description,
+    taskImage: taskFields.coverImage,
+    gameConfig: convertedGameConfig,
+    taskParams: convertedTaskParams,
+    demoData: isDemoData,
+    testData: isTestData,
+    registered: isRegisteredTask,
+  });
+
+  if (isExternalTask.value) {
+    newTaskObject.taskURL = buildTaskURL(taskFields.taskURL, taskParams);
+  }
+
+  // Write task variant to DB
+  try {
+    await authStore.roarfirekit.registerTaskVariant({ ...newTaskObject });
+    created.value = true;
+    // Re-fetch tasks
+    await queryClient.invalidateQueries(['tasks', registeredTasksOnly]);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+function convertParamsToObj(paramType) {
+  // If the paramType is an array of objects with a key called "value", convert it to an object
+  // Otherwise, just use the paramType object
+  const target = paramType.value !== undefined ? paramType.value : paramType;
+
+  return target.reduce((acc, item) => {
+    if (item.name) {
+      acc[camelCase(item.name)] = item.value;
+    }
+    return acc;
+  }, {});
+}
+
+function buildTaskURL(url, params) {
+  const baseURL = url;
+
+  let queryParams = url.includes('/?') ? '' : '/?';
+
+  params.value.forEach((param, i) => {
+    if (param.name) {
+      if (i === 0) {
+        queryParams += `${param.name}=${param.value}`;
+      } else {
+        queryParams += `&${param.name}=${param.value}`;
+      }
+    }
+  });
+
+  const completeURL = baseURL + queryParams;
+
+  return completeURL;
+}
+
+const resetUpdateTaskForm = () => {
+  selectedTask.value = null;
+  updatedTaskData = reactive(cloneDeep(taskData.value));
+  clearFieldConfigArrays();
+};
+
+const clearFieldConfigArrays = () => {
+  newFields = reactive([]);
+  addedGameConfig = reactive([]);
+};
+</script>
+
+<style>
+.submit-button {
+  margin: auto;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  display: flex;
+  border: none;
+  width: 11.75rem;
+}
+
+.submit-button:hover {
+  background-color: #2b8ecb;
+  color: black;
+}
+
+.delete-btn {
+  padding: 0.8rem;
+}
+
+.select-button .p-button:last-of-type:not(:only-of-type) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 25rem;
+  border-bottom-right-radius: 25rem;
+}
+
+.select-button .p-button:first-of-type:not(:only-of-type) {
+  border-top-left-radius: 25rem;
+  border-bottom-left-radius: 25rem;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+</style>
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
new file mode 100644
index 000000000..e21467d7c
--- /dev/null
+++ b/src/components/tasks/ManageVariants.vue
@@ -0,0 +1,849 @@
+<template>
+  <PvToast />
+  <PvSelectButton
+    v-model="viewModel"
+    :options="modelViews"
+    class="flex my-2 select-button p-2"
+    @change="handleViewChange($event.value)"
+  />
+  <div v-show="viewModel === 'Create Variant'">
+    <div class="card px-3">
+      <form class="p-fluid" @submit.prevent="handleVariantSubmit(!v$.$invalid)">
+        <h1 class="text-center font-bold">Create a New Variant</h1>
+
+        <div class="flex flex-column row-gap-3">
+          <section class="form-section">
+            <div class="flex justify-content-between align-items-center">
+              <label for="variant-fields">
+                <small class="text-gray-400 font-bold">Select an Existing Task </small>
+                <span class="required">*</span></label
+              >
+              <div class="flex flex-column gap-2 align-items-end">
+                <div class="flex flex-row align-items-center justify-content-end gap-2 flex-order-1">
+                  <!--                    This does not seemt to function properly, comming it out for now.-->
+                  <!--                    <label class="ml-7" for="chbx-registeredTask">Search registered tasks only?</label>-->
+                  <!--                    <PvCheckbox v-model="registeredTasksOnly" input-id="chbx-registeredTask" :binary="true" />-->
+                </div>
+              </div>
+            </div>
+            <PvDropdown
+              v-model="v$.selectedGame.$model"
+              :options="formattedTasks"
+              option-label="name"
+              placeholder="Select a Game"
+              :loading="isFetchingTasks"
+              :class="{ 'p-invalid': v$.variantName.$invalid && submitted }"
+              name="variant-fields"
+              @click="clearFieldParamArrays()"
+            ></PvDropdown>
+            <span v-if="v$.selectedGame.$error && submitted">
+              <span v-for="(error, index) of v$.selectedGame.$errors" :key="index">
+                <small class="p-error">{{ error.$message }}</small>
+              </span>
+            </span>
+            <small
+              v-else-if="(v$.selectedGame.$invalid && submitted) || v$.selectedGame.$pending.$response"
+              class="p-error"
+            >
+              {{ v$.selectedGame.id.required.$message.replace('Value', 'Task selection') }}
+            </small>
+          </section>
+
+          <section class="form-section">
+            <div class="p-input-icon-right">
+              <label for="variantName">
+                <small class="text-gray-400 font-bold">Variant Name </small>
+                <span class="required">*</span></label
+              >
+              <PvInputText
+                v-model="v$.variantName.$model"
+                name="variantName"
+                :class="{ 'p-invalid': v$.variantName.$invalid && submitted }"
+                aria-describedby="activation-code-error"
+              />
+            </div>
+            <span v-if="v$.variantName.$error && submitted">
+              <span v-for="(error, index) of v$.variantName.$errors" :key="index">
+                <small class="p-error">{{ error.$message }}</small>
+              </span>
+            </span>
+            <small
+              v-else-if="(v$.variantName.$invalid && submitted) || v$.variantName.$pending.$response"
+              class="p-error"
+            >
+              {{ v$.variantName.required.$message.replace('Value', 'Variant Name') }}
+            </small>
+          </section>
+        </div>
+
+        <div class="flex flex-column align-items-center">
+          <h3 class="text-center">
+            <strong>Configure Parameter Values</strong>
+          </h3>
+          <h4 class="text-center">
+            Set the game parameters for a new variant of task <strong>{{ variantFields.selectedGame.id }}</strong>
+          </h4>
+          <div class="flex flex-column">
+            <!--
+            Each param looks like this:
+            {"name": "someParam", "type": "string, boolean, or number", "value": "valueOfParam"}
+
+            We want to assign the value of param.name to the value of the equivalent key in variantParams
+
+            So if param.name is "someParam", then
+            variantParams[param.name] returns the value of variantParams.someParam,which is the value that we want to change for a new variant
+-->
+            <div
+              v-for="(param, index) in mappedGameConfig"
+              :key="index"
+              class="flex align-items-center justify-content-center dynamic-param-container gap-4"
+            >
+              <div v-if="!deletedParams.includes(param.name)" class="flex align-items-center">
+                <label for="inputParamName">Parameter:</label>
+
+                <PvInputText id="inputParamName" v-model="variantParams[param.name]" :value="param.name" disabled />
+              </div>
+
+              <div class="flex align-items-center">
+                <label for="inputParamType">Type:</label>
+                <PvInputText id="inputParamType" v-model="param.type" :value="param.type" disabled />
+              </div>
+
+              <div class="flex align-items-center gap-2 flex-grow-1">
+                <label for="inputParamValue">Value:</label>
+                <PvInputText
+                  v-if="param.type === 'string'"
+                  id="inputParamValue"
+                  v-model="variantParams[param.name]"
+                  placeholder="Set game parameter to desired value"
+                  class="flex-grow-1"
+                />
+                <PvDropdown
+                  v-else-if="param.type === 'boolean'"
+                  id="inputParamValue"
+                  v-model="variantParams[param.name]"
+                  :options="booleanDropDownOptions"
+                  option-label="label"
+                  option-value="value"
+                  placeholder="Set game parameter to desired value"
+                  class="flex-grow-1"
+                />
+                <PvInputNumber
+                  v-else-if="param.type === 'number'"
+                  id="inputParamValue"
+                  v-model="variantParams[param.name]"
+                  placeholder="Set game parameter to desired value"
+                  class="flex-grow-1"
+                />
+              </div>
+
+              <div>
+                <PvButton
+                  type="button"
+                  icon="pi pi-trash"
+                  class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                  text
+                  @click="moveToDeletedParams(param.name)"
+                />
+              </div>
+            </div>
+
+            <div v-if="newParams.length > 0" class="w-full">
+              <div v-for="(field, index) in newParams" :key="index" class="flex align-items-center column-gap-2 mb-1">
+                <PvInputText v-model="field.name" placeholder="Field Name" />
+                <PvDropdown
+                  v-model="field.type"
+                  :options="['string', 'number', 'boolean']"
+                  placeholder="Field Type"
+                  class="w-fit"
+                />
+
+                <PvInputText
+                  v-if="field.type === 'string'"
+                  v-model="field.value"
+                  placeholder="Field Value"
+                  class="w-full"
+                />
+                <PvInputNumber
+                  v-if="field.type === 'number'"
+                  v-model="field.value"
+                  placeholder="Field Value"
+                  class="w-full"
+                />
+                <PvDropdown
+                  v-if="field.type === 'boolean'"
+                  v-model="field.value"
+                  placeholder="Field Value"
+                  :options="booleanDropDownOptions"
+                  option-label="label"
+                  option-value="value"
+                  class="w-full"
+                />
+                <PvButton
+                  type="button"
+                  icon="pi pi-trash"
+                  class="w-4rem bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                  text
+                  @click="removeField(field.name, newParams)"
+                />
+              </div>
+            </div>
+          </div>
+          <PvButton
+            label="Add Parameter"
+            text
+            icon="pi pi-plus"
+            class="w-2 my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+            @click="newParam"
+          />
+        </div>
+        <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">
+          <div class="flex flex-row align-items-center">
+            <PvCheckbox
+              v-model="variantCheckboxData"
+              input-id="chbx-demoVariant"
+              name="variantCheckboxData"
+              value="isDemoVariant"
+            />
+            <label class="ml-1 mr-3" for="chbx-demoVariant">Mark as <b>Demo Variant</b></label>
+          </div>
+          <div class="flex flex-row align-items-center">
+            <PvCheckbox
+              v-model="variantCheckboxData"
+              input-id="chbx-testVariant"
+              name="variantCheckboxData"
+              value="isTestVariant"
+            />
+            <label class="ml-1 mr-3" for="chbx-testVariant">Mark as <b>Test Variant</b></label>
+          </div>
+          <div class="flex flex-row align-items-center">
+            <div class="flex flex-row align-items-center">
+              <PvCheckbox
+                v-model="variantCheckboxData"
+                input-id="chbx-registeredVariant"
+                name="variantCheckboxData"
+                value="isRegisteredVariant"
+              />
+              <label class="ml-1 mr-3" for="chbx-externalVariant">Mark as <b>Registered Variant</b></label>
+            </div>
+          </div>
+        </div>
+        <div class="form-submit">
+          <PvButton
+            type="submit"
+            label="Submit"
+            class="submit-button w-2 my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+            severity="primary"
+          />
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <div v-show="viewModel === 'Update Variant'">
+    <h1 class="text-center font-bold">Update a Variant</h1>
+    <form @submit.prevent="handleUpdateVariant()">
+      <section class="flex flex-column gap-2 mb-4 p-4">
+        <label for="task-select" class="my-2">
+          <small class="text-gray-400 font-bold">Select an Existing Task </small>
+          <span class="required">*</span></label
+        >
+        <PvDropdown
+          v-model="selectedTask"
+          :options="formattedTasks"
+          option-label="name"
+          option-value="id"
+          placeholder="Select a Game"
+          @click="clearFieldParamArrays()"
+        />
+        <label for="variant-select" class="my-2">
+          <small class="text-gray-400 font-bold">Select an Existing Variant </small>
+          <span class="required">*</span></label
+        >
+        <PvDropdown
+          v-model="selectedVariant"
+          :options="filteredVariants"
+          :option-label="(data) => (data.variant.name ? data.variant.name : data.variant.id)"
+          option-value="variant"
+          placeholder="Select a Variant"
+          @click="clearFieldParamArrays()"
+        />
+      </section>
+
+      <section v-if="selectedVariant" class="flex flex-column align-items-start mt-4 p-4">
+        <div class="flex flex-column w-full">
+          <label for="fieldsOutput">
+            <strong>Fields</strong>
+          </label>
+          <div v-for="(value, key) in selectedVariant" id="fieldsOutput" :key="key">
+            <div v-if="!ignoreFields.includes(key)">
+              <div
+                v-if="updatedVariantData[key] !== undefined"
+                class="flex align-items-center justify-content-between gap-2 mb-1"
+              >
+                <label :for="key" class="w-1">
+                  <em>{{ key }}</em>
+                </label>
+                <PvInputText id="inputEditVariantType" :placeholder="typeof value" disabled class="w-2 text-center" />
+                <PvInputText
+                  v-if="typeof value === 'string'"
+                  v-model="updatedVariantData[key]"
+                  :placeholder="value"
+                  class="flex-grow-1"
+                />
+                <PvInputNumber
+                  v-else-if="typeof value === 'number'"
+                  v-model="updatedVariantData[key]"
+                  class="flex-grow-1"
+                />
+                <PvDropdown
+                  v-else-if="typeof value === 'boolean'"
+                  v-model="updatedVariantData[key]"
+                  :options="booleanDropDownOptions"
+                  option-label="label"
+                  option-value="value"
+                  class="flex-grow-1"
+                />
+                <PvButton
+                  type="button"
+                  icon="pi pi-trash"
+                  class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                  text
+                  @click="deleteParam(key)"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div v-if="addedFields.length > 0" class="w-full">
+            <div v-for="(field, index) in addedFields" :key="index" class="flex align-items-center column-gap-2 mb-1">
+              <PvInputText v-model="field.name" placeholder="Field Name" />
+              <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
+
+              <PvInputText
+                v-if="field.type === 'string'"
+                v-model="field.value"
+                placeholder="Field Value"
+                class="flex-grow-1"
+              />
+              <PvInputNumber
+                v-if="field.type === 'number'"
+                v-model="field.value"
+                placeholder="Field Value"
+                class="flex-grow-1"
+              />
+              <PvDropdown
+                v-if="field.type === 'boolean'"
+                v-model="field.value"
+                placeholder="Field Value"
+                :options="booleanDropDownOptions"
+                option-label="label"
+                option-value="value"
+                class="flex-grow-1"
+              />
+              <PvButton
+                type="button"
+                icon="pi pi-trash"
+                class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                @click="removeField(field.name, addedFields)"
+              />
+            </div>
+          </div>
+        </div>
+        <PvButton
+          label="Add Field"
+          text
+          icon="pi pi-plus"
+          class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+          @click="addField"
+        />
+
+        <!--          **** Disabling the function to edit game params for now ****-->
+
+        <!--          <div class="flex flex-column w-8">-->
+        <!--            <label for="paramsOutput">-->
+        <!--              <strong>Game Params</strong>-->
+        <!--            </label>-->
+        <!--            <div v-for="(param, paramName) in selectedVariant.params" id="paramsOutput" :key="paramName" class="mb-1">-->
+        <!--              <div-->
+        <!--                v-if="updatedVariantData.params[paramName] !== undefined"-->
+        <!--                class="flex align-items-center justify-content-end column-gap-2"-->
+        <!--              >-->
+        <!--                <label :for="paramName" class="w-2">-->
+        <!--                  <em>{{ paramName }} </em>-->
+        <!--                </label>-->
+        <!--                <PvInputText id="inputEditParamType" :placeholder="typeof param" class="w-2" disabled />-->
+        <!--                <PvInputText-->
+        <!--                  v-if="typeof param === 'string'"-->
+        <!--                  v-model="updatedVariantData.params[paramName]"-->
+        <!--                  :placeholder="param"-->
+        <!--                  class="flex-grow-1"-->
+        <!--                />-->
+        <!--                <PvInputNumber-->
+        <!--                  v-else-if="typeof param === 'number'"-->
+        <!--                  v-model="updatedVariantData.params[paramName]"-->
+        <!--                  class="flex-grow-1"-->
+        <!--                />-->
+        <!--                <PvDropdown-->
+        <!--                  v-else-if="typeof param === 'boolean'"-->
+        <!--                  v-model="updatedVariantData.params[paramName]"-->
+        <!--                  :options="booleanDropDownOptions"-->
+        <!--                  option-label="label"-->
+        <!--                  option-value="value"-->
+        <!--                  class="flex-grow-1"-->
+        <!--                />-->
+        <!--                <PvButton type="button" @click="deleteParam(paramName)">Delete</PvButton>-->
+        <!--              </div>-->
+        <!--            </div>-->
+        <!--            <div v-if="addedParams.length > 0">-->
+        <!--              <div v-for="(field, index) in addedParams" :key="index" class="flex align-items-center column-gap-2 mb-1">-->
+        <!--                <PvInputText v-model="field.name" placeholder="Field Name" />-->
+        <!--                <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />-->
+        <!--                <PvInputText-->
+        <!--                  v-if="field.type === 'string'"-->
+        <!--                  v-model="field.value"-->
+        <!--                  placeholder="Field Value"-->
+        <!--                  class="flex-grow-1"-->
+        <!--                />-->
+        <!--                <PvInputNumber-->
+        <!--                  v-if="field.type === 'number'"-->
+        <!--                  v-model="field.value"-->
+        <!--                  placeholder="Field Value"-->
+        <!--                  class="flex-grow-1"-->
+        <!--                />-->
+        <!--                <PvDropdown-->
+        <!--                  v-if="field.type === 'boolean'"-->
+        <!--                  v-model="field.value"-->
+        <!--                  placeholder="Field Value"-->
+        <!--                  :options="booleanDropDownOptions"-->
+        <!--                  option-label="label"-->
+        <!--                  option-value="value"-->
+        <!--                  class="flex-grow-1"-->
+        <!--                />-->
+        <!--                <PvButton type="button" @click="removeField(field.name, addedParams)">Delete</PvButton>-->
+        <!--              </div>-->
+        <!--            </div>-->
+        <!--          </div>-->
+        <!--          <PvButton label="Add Param" text icon="pi pi-plus" class="my-4" @click="addParam" />-->
+      </section>
+
+      <PvButton type="submit" class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+        >Update Variant</PvButton
+      >
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+import { required } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { useAuthStore } from '@/store/auth';
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
+import { storeToRefs } from 'pinia';
+import { useToast } from 'primevue/usetoast';
+import { taskFetcher } from '@/helpers/query/tasks';
+import { variantsFetcher } from '../../helpers/query/tasks';
+import { cloneDeep, camelCase } from 'lodash';
+
+const toast = useToast();
+const initialized = ref(false);
+const registeredTasksOnly = ref(true);
+const variantCheckboxData = ref();
+const authStore = useAuthStore();
+const { roarfirekit } = storeToRefs(authStore);
+const queryClient = useQueryClient();
+
+const selectedTask = ref(null);
+const selectedVariant = ref(null);
+// Reactive clone for holding changes made to variantData without affecting the original variantData and avoiding reactivity issues
+let updatedVariantData = reactive(cloneDeep(selectedVariant.value));
+// Array of objects which models the new fields added to the variant
+// This array of objects is later converted back into an object and spread into the updatedVariantData object
+let addedFields = reactive([]);
+
+// Array of objects which models the new params added to the variant
+// This array of objects is later converted back into an object and spread into the updatedVariantData object
+// let addedParams = reactive([]);
+// Array of objects which models the new params added to the variant to be created
+// This array of objects is later converted back into an object and spread into the variantParams object
+
+let newParams = reactive([]);
+
+const viewModel = ref('Create Variant');
+const modelViews = ['Create Variant', 'Update Variant'];
+
+const handleViewChange = (value) => {
+  const selectedView = modelViews.find((view) => view === value);
+  if (selectedView) {
+    viewModel.value = selectedView;
+  }
+};
+
+// Fields to ignore when displaying variant data
+const ignoreFields = ['id', 'lastUpdated', 'params', 'parentDoc'];
+
+const booleanDropDownOptions = [
+  { label: 'true', value: true },
+  { label: 'false', value: false },
+];
+
+watch(selectedVariant, (newVal) => {
+  updatedVariantData = reactive(cloneDeep(newVal));
+});
+
+let unsubscribe;
+const init = () => {
+  if (unsubscribe) unsubscribe();
+  initialized.value = true;
+};
+
+unsubscribe = authStore.$subscribe(async (mutation, state) => {
+  if (state.roarfirekit.restConfig) init();
+});
+
+onMounted(() => {
+  if (roarfirekit.value.restConfig) init();
+});
+
+const { isFetching: isFetchingTasks, data: tasks } = useQuery({
+  queryKey: ['tasks', registeredTasksOnly],
+  queryFn: () => taskFetcher(registeredTasksOnly.value),
+  keepPreviousData: true,
+  enabled: initialized,
+  staleTime: 5 * 60 * 1000, // 5 minutes
+});
+
+const { data: allVariants } = useQuery({
+  queryKey: ['variants', 'all'],
+  queryFn: () => variantsFetcher(),
+  keepPreviousData: true,
+  enabled: initialized,
+  staleTime: 5 * 60 * 1000, // 5 minutes
+});
+
+const formattedTasks = computed(() => {
+  if (!tasks.value) return [];
+  return tasks.value.map((task) => {
+    return {
+      name: task.taskName ?? task.id,
+      ...task,
+    };
+  });
+});
+
+// Filter variants based on selected task
+const filteredVariants = computed(() => {
+  if (!allVariants.value || !selectedTask.value) {
+    return [];
+  }
+
+  return allVariants.value.filter((variant) => variant.task.id === selectedTask.value);
+});
+
+// Fields for modeling  a new variant
+const variantFields = reactive({
+  variantName: '',
+  selectedGame: {},
+  // Based on type of account?
+  external: true,
+});
+
+// Validation rules for variantFields
+const variantRules = {
+  variantName: { required },
+  selectedGame: {
+    id: { required },
+  },
+};
+const v$ = useVuelidate(variantRules, variantFields);
+const submitted = ref(false);
+
+// Turn mappedGameConfig into an object {key: value, key: value...} which models gameConfig, filtered for deleted params
+// This builds the object of parameters that will be sent to the DB
+const variantParams = computed(() => {
+  const params = reactive({});
+
+  if (!mappedGameConfig.value) {
+    return params;
+  }
+
+  mappedGameConfig.value.forEach((param) => {
+    params[param.name] = param.value;
+  });
+
+  return params;
+});
+
+// Turn the gameConfig object into an array of key/value pairs [{name: 'key', value: 'value', type: 'type'}...]
+// This allows simplified editing of the gameConfig object
+const mappedGameConfig = computed(() => {
+  // Prevent any errors if selectedGame is not set
+  if (!variantFields.selectedGame?.gameConfig) {
+    return [];
+  }
+
+  return Object.entries(variantFields.selectedGame.gameConfig).map(([key, value]) => ({
+    name: key,
+    type: typeof value,
+    value: value,
+  }));
+});
+
+// Keep track of params that are not needed for the particular variant when creating a new variant
+const deletedParams = ref([]);
+
+// Push the name of the param to the deletedParams array
+// Remove the param from the mappedGameConfig array
+// Remove the param from the variantParams object
+const moveToDeletedParams = (param) => {
+  for (const _param of mappedGameConfig.value) {
+    if (_param.name === param) {
+      console.log(mappedGameConfig.value.indexOf(_param));
+      const index = mappedGameConfig.value.indexOf(_param);
+      mappedGameConfig.value = mappedGameConfig.value.splice(index, 1);
+      delete variantParams.value[_param.name];
+    }
+  }
+  deletedParams.value.push(param);
+};
+
+// Delete the param from the updatedVariantData object when updating a variant
+const deleteParam = (param) => {
+  if (updatedVariantData['params'][param] !== undefined) {
+    delete updatedVariantData['params'][param];
+  }
+  delete updatedVariantData[param];
+};
+
+// Add a new field to the updatedVariantData object when updating a variant
+const addField = () => {
+  addedFields.push({ name: '', value: '', type: 'string' });
+};
+
+// Remove a field from the addedFields array when updating a variant
+const removeField = (field, array) => {
+  const updatedFields = array.filter((item) => item.name !== field);
+  array.splice(0, array.length, ...updatedFields);
+};
+
+// Add a new param to the updatedVariantData object when updating a variant
+// const addParam = () => {
+//   addedParams.push({ name: '', value: '', type: 'string' });
+// };
+
+// Add a new param to the newParams array when creating a new variant
+const newParam = () => {
+  newParams.push({ name: '', value: '', type: 'string' });
+};
+
+// Convert an array of paramType objects into a single object
+function convertParamsToObj(paramType) {
+  return paramType.reduce((acc, item) => {
+    if (item.name) {
+      // Check if name is not empty
+      acc[camelCase(item.name)] = item.value;
+    }
+    return acc;
+  }, {});
+}
+
+// Takes the array of objects that will be added to the current data object in Firestore
+// and checks if any of the new fields are duplicates of existing fields to prevent overwriting data
+const checkForDuplicates = (newItemsArray, currentDataObject) => {
+  if (currentDataObject === undefined) return { isDuplicate: false, duplicateField: '' };
+
+  const keys = Object.keys(currentDataObject);
+  for (const newItem of newItemsArray) {
+    if (keys.includes(newItem.name)) {
+      return { isDuplicate: true, duplicateField: newItem.name };
+    }
+  }
+  return { isDuplicate: false, duplicateField: '' };
+};
+
+// Helper function to check for errors before updating a task
+// Returns true if there are errors, false if there are none
+const checkForErrors = () => {
+  console.log('Checking for errors...');
+
+  if (addedFields.length > 0) {
+    const { isDuplicate, duplicateField } = checkForDuplicates(addedFields, updatedVariantData);
+    if (isDuplicate) {
+      toast.add({
+        severity: 'error',
+        summary: 'Oops!',
+        detail: `Duplicate field name detected: ${duplicateField}.`,
+        life: 3000,
+      });
+      return true;
+    }
+  }
+
+  if (newParams.length > 0) {
+    const { isDuplicate, duplicateField } = checkForDuplicates(newParams, variantParams.value);
+    if (isDuplicate) {
+      toast.add({
+        severity: 'error',
+        summary: 'Oops!',
+        detail: `Duplicate field name detected: ${duplicateField}.`,
+        life: 3000,
+      });
+      return true;
+    }
+  }
+};
+
+const handleUpdateVariant = async () => {
+  // Check for errors before updating a variant; end function if errors are found
+  if (checkForErrors()) return;
+
+  // Additional error checking; could be combined into checkForErrors()
+  // With some additional logic
+  if (!selectedTask.value) {
+    toast.add({ severity: 'error', summary: 'Invalid Form', detail: 'Please select a task.', life: 3000 });
+    return;
+  }
+
+  if (!selectedVariant.value) {
+    toast.add({ severity: 'error', summary: 'Invalid Form', detail: 'Please select a variant.', life: 3000 });
+    return;
+  }
+
+  const convertedFields = convertParamsToObj(addedFields);
+  // const convertedParams = convertParamsToObj(addedParams);
+  const updateData = {
+    taskId: selectedTask.value,
+    variantId: selectedVariant.value.id,
+    data: {
+      ...updatedVariantData,
+      ...convertedFields,
+      // params: {
+      //   ...updatedVariantData.params,
+      //   ...convertedParams,
+      // },
+    },
+  };
+
+  try {
+    await authStore.roarfirekit.updateTaskOrVariant(updateData);
+    toast.add({ severity: 'success', summary: 'Hoorah!', detail: 'Variant successfully updated.', life: 3000 });
+
+    // Reset the form and re-fetch the data
+    resetUpdateVariantForm();
+    await queryClient.invalidateQueries(['tasks', registeredTasksOnly]);
+    await queryClient.invalidateQueries(['variants', 'all']);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const handleVariantSubmit = async (isFormValid) => {
+  if (checkForErrors()) return;
+
+  submitted.value = true;
+  const isDemoData = !!variantCheckboxData.value?.find((item) => item === 'isDemoVariant');
+  const isTestData = !!variantCheckboxData.value?.find((item) => item === 'isTestVariant');
+  // const isExternalVariant = !!variantCheckboxData.value?.find((item) => item === 'isExternalVariant');
+  const isRegisteredVariant = !!variantCheckboxData.value?.find((item) => item === 'isRegisteredVariant');
+
+  if (!isFormValid) {
+    return;
+  }
+
+  const convertedParams = convertParamsToObj(newParams) ?? {};
+
+  const combinedParams = {
+    ...variantParams.value,
+    ...convertedParams,
+  };
+
+  const newVariantObject = reactive({
+    taskId: variantFields.selectedGame.id,
+    taskDescription: variantFields.selectedGame.description,
+    taskImage: variantFields.selectedGame.image,
+    variantName: variantFields.variantName,
+    variantParams: combinedParams,
+    demoData: { task: !!variantFields.selectedGame?.demoData, variant: isDemoData },
+    testData: { task: !!variantFields.selectedGame?.testData, variant: isTestData },
+    registered: isRegisteredVariant,
+  });
+
+  try {
+    await authStore.roarfirekit.registerTaskVariant({ ...newVariantObject });
+
+    toast.add({ severity: 'success', summary: 'Hoorah!', detail: 'Variant successfully created.', life: 3000 });
+
+    submitted.value = false;
+
+    // Reset the form and re-fetch the data
+    resetCreateVariantForm();
+    await queryClient.invalidateQueries(['tasks', registeredTasksOnly]);
+    await queryClient.invalidateQueries(['variants', 'all']);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+function resetCreateVariantForm() {
+  Object.assign(variantFields, {
+    variantName: '',
+    selectedGame: {},
+    external: true,
+  });
+
+  variantParams.value = [
+    {
+      name: '',
+      value: '',
+      type: 'String',
+    },
+  ];
+
+  variantCheckboxData.value = [];
+  clearFieldParamArrays();
+}
+
+const resetUpdateVariantForm = () => {
+  selectedTask.value = null;
+  selectedVariant.value = null;
+  updatedVariantData = {};
+  clearFieldParamArrays();
+};
+
+const clearFieldParamArrays = () => {
+  addedFields = reactive([]);
+  // addedParams = reactive([]);
+  newParams = reactive([]);
+};
+</script>
+
+<style>
+.submit-button {
+  margin: auto;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  display: flex;
+  border: none;
+  width: 11.75rem;
+}
+
+.submit-button:hover {
+  background-color: #2b8ecb;
+  color: black;
+}
+
+.select-button .p-button:last-of-type:not(:only-of-type) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 25rem;
+  border-bottom-right-radius: 25rem;
+}
+
+.select-button .p-button:first-of-type:not(:only-of-type) {
+  border-top-left-radius: 25rem;
+  border-bottom-left-radius: 25rem;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+</style>
diff --git a/src/components/tasks/RegisterTask.vue b/src/components/tasks/RegisterTask.vue
deleted file mode 100644
index a5eaf313e..000000000
--- a/src/components/tasks/RegisterTask.vue
+++ /dev/null
@@ -1,547 +0,0 @@
-<template>
-  <PvToast />
-  <PvTabView>
-    <PvTabPanel header="Register Task">
-      <div v-if="!created" class="card px-3">
-        <h1 class="text-center font-bold">Register a New Task</h1>
-        <!-- <p class="login-title" align="left">Register for ROAR</p> -->
-        <form class="p-fluid" @submit.prevent="handleNewTaskSubmit(!t$.$invalid)">
-          <!-- Task name -->
-          <div class="flex flex-column row-gap-3">
-            <section class="form-section">
-              <div class="p-input-icon-right">
-                <label for="taskName">Task Name <span class="required">*</span></label>
-                <PvInputText
-                  v-model="t$.taskName.$model"
-                  name="taskName"
-                  :class="{ 'p-invalid': t$.taskName.$invalid && submitted }"
-                  aria-describedby="activation-code-error"
-                />
-              </div>
-              <span v-if="t$.taskName.$error && submitted">
-                <span v-for="(error, index) of t$.taskName.$errors" :key="index">
-                  <small class="p-error">{{ error.$message }}</small>
-                </span>
-              </span>
-              <small v-if="(t$.taskName.$invalid && submitted) || t$.taskName.$pending.$response" class="p-error">
-                {{ t$.taskName.required.$message.replace('Value', 'Task Name') }}
-              </small>
-            </section>
-            <!-- Task ID -->
-            <section class="form-section">
-              <div class="p-input-icon-right">
-                <label for="taskId">Task ID <span class="required">*</span></label>
-                <PvInputText
-                  v-model="t$.taskId.$model"
-                  name="taskId"
-                  :class="{ 'p-invalid': t$.taskId.$invalid && submitted }"
-                  aria-describedby="activation-code-error"
-                />
-              </div>
-              <span v-if="t$.taskId.$error && submitted">
-                <span v-for="(error, index) of t$.taskId.$errors" :key="index">
-                  <small class="p-error">{{ error.$message }}</small>
-                </span>
-              </span>
-              <small v-else-if="(t$.taskId.$invalid && submitted) || t$.taskId.$pending.$response" class="p-error">
-                {{ t$.taskId.required.$message.replace('Value', 'Task ID') }}
-              </small>
-            </section>
-            <!--Task URL-->
-            <section class="form-section">
-              <div v-if="isExternalTask">
-                <label for="taskURL">Task URL <span class="required">*</span></label>
-                <PvInputText
-                  v-model="t$.taskURL.$model"
-                  name="taskURL"
-                  :class="{ 'p-invalid': t$.taskURL.$invalid && submitted }"
-                  aria-describedby="first-name-error"
-                />
-                <span v-if="t$.taskURL.$error && submitted">
-                  <span v-for="(error, index) of t$.taskURL.$errors" :key="index">
-                    <small class="p-error">{{ error.$message }}</small>
-                  </span>
-                </span>
-                <small v-else-if="(t$.taskURL.$invalid && submitted) || t$.taskURL.$pending.$response" class="p-error">
-                  {{ t$.taskURL.required.$message.replace('Value', 'Task URL') }}
-                </small>
-              </div>
-            </section>
-            <!-- Cover Image -->
-            <section class="form-section">
-              <div>
-                <label for="coverImage">Cover Image (URL)</label>
-                <PvInputText v-model="taskFields.coverImage" name="coverImage" />
-              </div>
-            </section>
-            <!--Description-->
-            <section class="form-section">
-              <div class="p-input-icon-right">
-                <label for="description">Description </label>
-                <PvInputText v-model="taskFields.description" name="description" />
-              </div>
-            </section>
-          </div>
-
-          <h3 class="text-center">Parameters / Configuration</h3>
-
-          <div v-for="(param, index) in taskParams" :key="index">
-            <div class="flex gap-2 align-content-start flex-grow-0 params-container">
-              <PvInputText v-model="param.name" placeholder="Name" />
-
-              <PvDropdown v-model="param.type" :options="typeOptions" />
-
-              <PvInputText v-if="param.type === 'String'" v-model="param.value" placeholder="Value" />
-
-              <PvDropdown v-else-if="param.type === 'Boolean'" v-model="param.value" :options="[true, false]" />
-
-              <PvInputNumber v-else-if="param.type === 'Number'" v-model="param.value" show-buttons />
-
-              <PvButton
-                icon="pi pi-trash"
-                text
-                class="bg-primary text-white w-2 border-round border-none hover:bg-red-900"
-                @click="removeField(taskParams, index)"
-              />
-            </div>
-          </div>
-
-          <div class="w-full flex justify-content-end">
-            <div class="w-2">
-              <PvButton
-                label="Add Field"
-                class="surface-ground w-10 h-3rem p-3rem text-primary border-round border-none hover:bg-primary hover:text-white"
-                text
-                icon="pi pi-plus ml-2"
-                @click="addField(taskParams)"
-              />
-            </div>
-          </div>
-          <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">
-            <div class="flex flex-row align-items-center">
-              <PvCheckbox v-model="taskCheckboxData" input-id="chbx-demoTask" value="isDemoTask" />
-              <label class="ml-1 mr-3" for="chbx-demoTask">Mark as <b>Demo Task</b></label>
-            </div>
-            <div class="flex flex-row align-items-center">
-              <PvCheckbox v-model="taskCheckboxData" input-id="chbx-testTask" value="isTestTask" />
-              <label class="ml-1 mr-3" for="chbx-testTask">Mark as <b>Test Task</b></label>
-            </div>
-            <div class="flex flex-row align-items-center">
-              <PvCheckbox v-model="taskCheckboxData" input-id="chbx-externalTask" value="isExternalTask" />
-              <label class="ml-1 mr-3" for="chbx-externalTask">Mark as <b>External Task</b> </label>
-            </div>
-          </div>
-          <div class="form-submit flex justify-content-center">
-            <PvButton
-              type="submit"
-              label="Submit"
-              class="bg-primary h-3rem w-3 text-white border-round border-none hover:bg-red-900"
-              severity="primary"
-            />
-          </div>
-        </form>
-      </div>
-
-      <div v-else>
-        <h2>Your task has been created!</h2>
-        <p>
-          Redirect to this URL upon task completion. ParticipantId can be any string, completed should be set to true.
-        </p>
-        <p>roar.education/?participantId=[$PARTICIPANT_ID]&completed=[$BOOLEAN]</p>
-      </div>
-    </PvTabPanel>
-
-    <PvTabPanel header="Register Variant">
-      <div class="card px-3">
-        <form class="p-fluid" @submit.prevent="handleVariantSubmit(!v$.$invalid)">
-          <h1 class="text-center font-bold">Register a New Variant</h1>
-
-          <div class="flex flex-column row-gap-3">
-            <section class="form-section">
-              <div class="flex justify-content-between align-items-center">
-                <label for="variant-fields">Select an Existing Task (Task ID) <span class="required">*</span></label>
-                <div class="flex flex-column gap-2 align-items-end">
-                  <div class="flex flex-row align-items-center justify-content-end gap-2 flex-order-1">
-                    <label class="ml-7" for="chbx-registeredTask">Search registered tasks only?</label>
-                    <PvCheckbox v-model="registeredTasksOnly" input-id="chbx-registeredTask" :binary="true" />
-                  </div>
-                </div>
-              </div>
-              <PvDropdown
-                v-model="v$.selectedGame.$model"
-                :options="tasks"
-                option-label="id"
-                placeholder="Select a Game"
-                :loading="isFetchingTasks"
-                :class="{ 'p-invalid': v$.variantName.$invalid && submitted }"
-                name="variant-fields"
-              ></PvDropdown>
-              <span v-if="v$.selectedGame.$error && submitted">
-                <span v-for="(error, index) of v$.selectedGame.$errors" :key="index">
-                  <small class="p-error">{{ error.$message }}</small>
-                </span>
-              </span>
-              <small
-                v-else-if="(v$.selectedGame.$invalid && submitted) || v$.selectedGame.$pending.$response"
-                class="p-error"
-              >
-                {{ v$.selectedGame.id.required.$message.replace('Value', 'Task selection') }}
-              </small>
-            </section>
-
-            <section class="form-section">
-              <div class="p-input-icon-right">
-                <label for="variantName">Variant Name <span class="required">*</span></label>
-                <PvInputText
-                  v-model="v$.variantName.$model"
-                  name="variantName"
-                  :class="{ 'p-invalid': v$.variantName.$invalid && submitted }"
-                  aria-describedby="activation-code-error"
-                />
-              </div>
-              <span v-if="v$.variantName.$error && submitted">
-                <span v-for="(error, index) of v$.variantName.$errors" :key="index">
-                  <small class="p-error">{{ error.$message }}</small>
-                </span>
-              </span>
-              <small
-                v-else-if="(v$.variantName.$invalid && submitted) || v$.variantName.$pending.$response"
-                class="p-error"
-              >
-                {{ v$.variantName.required.$message.replace('Value', 'Variant Name') }}
-              </small>
-            </section>
-          </div>
-
-          <h3 class="text-center">Parameters / Configuration</h3>
-
-          <div v-for="(param, index) in variantParams" :key="index">
-            <div class="flex gap-2 align-content-start flex-grow-0 params-container">
-              <PvInputText v-model="param.name" placeholder="Name" />
-
-              <PvDropdown v-model="param.type" :options="typeOptions" />
-
-              <PvInputText v-if="param.type === 'String'" v-model="param.value" placeholder="Value" />
-
-              <PvDropdown v-else-if="param.type === 'Boolean'" v-model="param.value" :options="[true, false]" />
-
-              <PvInputNumber v-else-if="param.type === 'Number'" v-model="param.value" show-buttons />
-
-              <PvButton
-                icon="pi pi-trash"
-                class="bg-primary text-white w-2 border-round border-none hover:bg-red-900"
-                text
-                @click="removeField(variantParams, index)"
-              />
-            </div>
-          </div>
-
-          <div class="w-full flex justify-content-end">
-            <div class="w-2">
-              <PvButton
-                class="surface-ground w-10 h-3rem p-3rem text-primary border-round border-none hover:bg-primary hover:text-white"
-                icon="pi pi-plus ml-2"
-                label="Add Field"
-                text
-                @click="addField(variantParams)"
-              />
-            </div>
-          </div>
-          <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">
-            <div class="flex flex-row align-items-center">
-              <PvCheckbox
-                v-model="variantCheckboxData"
-                input-id="chbx-demoVariant"
-                name="variantCheckboxData"
-                value="isDemoVariant"
-              />
-              <label class="ml-1 mr-3" for="chbx-demoVariant">Mark as <b>Demo Variant</b></label>
-            </div>
-            <div class="flex flex-row align-items-center">
-              <PvCheckbox v-model="variantCheckboxData" input-id="chbx-testVariant" name="variantCheckboxData" />
-              <label class="ml-1 mr-3" for="chbx-testVariant">Mark as <b>Test Variant</b></label>
-            </div>
-            <div class="flex flex-row align-items-center">
-              <PvCheckbox
-                v-model="variantCheckboxData"
-                input-id="chbx-externalVariant"
-                name="variantCheckboxData"
-                value="isExternalVariant"
-              />
-              <label class="ml-1 mr-3" for="chbx-externalVariant">Mark as <b>External Variant</b></label>
-            </div>
-          </div>
-          <div class="form-submit flex justify-content-center">
-            <PvButton
-              type="submit"
-              label="Submit"
-              class="bg-primary h-3rem w-3 text-white border-round border-none hover:bg-red-900"
-              severity="primary"
-            />
-          </div>
-        </form>
-      </div>
-    </PvTabPanel>
-  </PvTabView>
-</template>
-
-<script setup>
-import { reactive, ref, onMounted, computed } from 'vue';
-import { required, requiredIf, url } from '@vuelidate/validators';
-import { useVuelidate } from '@vuelidate/core';
-import { useAuthStore } from '@/store/auth';
-import { useQuery } from '@tanstack/vue-query';
-import { storeToRefs } from 'pinia';
-import { useToast } from 'primevue/usetoast';
-import { taskFetcher } from '@/helpers/query/tasks';
-
-const toast = useToast();
-const initialized = ref(false);
-const registeredTasksOnly = ref(true);
-const taskCheckboxData = ref();
-const variantCheckboxData = ref();
-const authStore = useAuthStore();
-const { roarfirekit } = storeToRefs(authStore);
-const isExternalTask = computed(() => !!taskCheckboxData.value?.find((item) => item === 'isExternalTask'));
-
-let unsubscribe;
-const init = () => {
-  if (unsubscribe) unsubscribe();
-  initialized.value = true;
-};
-
-unsubscribe = authStore.$subscribe(async (mutation, state) => {
-  if (state.roarfirekit.restConfig) init();
-});
-
-onMounted(() => {
-  if (roarfirekit.value.restConfig) init();
-});
-
-const { isFetching: isFetchingTasks, data: tasks } = useQuery({
-  queryKey: ['tasks', registeredTasksOnly],
-  queryFn: () => taskFetcher(registeredTasksOnly.value),
-  keepPreviousData: true,
-  enabled: initialized,
-  staleTime: 5 * 60 * 1000, // 5 minutes
-});
-
-const taskFields = reactive({
-  taskName: '',
-  taskURL: '',
-  taskId: '',
-  coverImage: '',
-  description: '',
-  // Based on type of account?
-  external: true,
-});
-
-const taskRules = {
-  taskName: { required },
-  taskURL: { required: requiredIf(isExternalTask.value), url },
-  taskId: { required },
-};
-
-const taskParams = ref([
-  {
-    name: '',
-    value: '',
-    type: 'String',
-  },
-]);
-
-const variantFields = reactive({
-  variantName: '',
-  selectedGame: {},
-  // Based on type of account?
-  external: true,
-});
-
-const variantRules = {
-  variantName: { required },
-  selectedGame: {
-    id: { required },
-  },
-};
-
-const variantParams = ref([
-  {
-    name: '',
-    value: '',
-    type: 'String',
-  },
-]);
-
-function addField(type) {
-  type.push({
-    name: '',
-    value: '',
-    type: 'String',
-  });
-}
-
-function removeField(type, index) {
-  type.splice(index, 1);
-}
-
-const typeOptions = ['String', 'Number', 'Boolean'];
-
-const t$ = useVuelidate(taskRules, taskFields);
-const v$ = useVuelidate(variantRules, variantFields);
-const submitted = ref(false);
-const created = ref(false);
-
-const handleNewTaskSubmit = async (isFormValid) => {
-  submitted.value = true;
-  const isDemoData = !!taskCheckboxData.value?.find((item) => item === 'isDemoTask');
-  const isTestData = !!taskCheckboxData.value?.find((item) => item === 'isTestTask');
-
-  if (!isFormValid) {
-    return;
-  }
-
-  const convertedParams = convertParamsToObj(taskParams);
-
-  let newTaskObject = reactive({
-    taskId: taskFields.taskId,
-    taskName: taskFields.taskName,
-    taskDescription: taskFields.description,
-    taskImage: taskFields.coverImage,
-    variantParams: convertedParams,
-    demoData: { task: isDemoData, variant: isDemoData },
-    testData: { task: isTestData, variant: isTestData },
-  });
-
-  if (isExternalTask.value) {
-    newTaskObject.taskURL = buildTaskURL(taskFields.taskURL, taskParams);
-  }
-
-  // Write task variant to DB
-  try {
-    await authStore.roarfirekit.registerTaskVariant({ ...newTaskObject });
-    created.value = true;
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-const handleVariantSubmit = async (isFormValid) => {
-  submitted.value = true;
-  const isDemoData = !!variantCheckboxData.value?.find((item) => item === 'isDemoVariant');
-  const isTestData = !!variantCheckboxData.value?.find((item) => item === 'isTestVariant');
-  const isExternalVariant = !!variantCheckboxData.value?.find((item) => item === 'isExternalVariant');
-
-  if (!isFormValid) {
-    return;
-  }
-
-  const convertedParams = convertParamsToObj(variantParams);
-
-  const newVariantObject = reactive({
-    taskId: variantFields.selectedGame.id,
-    taskDescription: variantFields.selectedGame.description,
-    taskImage: variantFields.selectedGame.image,
-    variantName: variantFields.variantName,
-    variantParams: convertedParams,
-    // TODO: Check if this is the valid way to see demo/test data values
-    demoData: { task: !!variantFields.selectedGame?.demoData, variant: isDemoData },
-    testData: { task: !!variantFields.selectedGame?.testData, variant: isTestData },
-  });
-
-  if (isExternalVariant) {
-    newVariantObject.variantParams = {
-      ...convertedParams,
-      variantURL: buildTaskURL(variantFields.selectedGame?.taskURL || '', variantParams),
-    };
-  }
-
-  // Write variant to Db
-  try {
-    await authStore.roarfirekit.registerTaskVariant({ ...newVariantObject });
-
-    toast.add({ severity: 'success', summary: 'Hoorah!', detail: 'Variant successfully created.', life: 3000 });
-
-    submitted.value = false;
-
-    resetVariantForm();
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-function convertParamsToObj(paramType) {
-  return paramType.value.reduce((acc, item) => {
-    if (item.name) {
-      // Check if name is not empty
-      acc[item.name] = item.value;
-    }
-    return acc;
-  }, {});
-}
-
-function buildTaskURL(url, params) {
-  const baseURL = url;
-
-  let queryParams = url.includes('/?') ? '' : '/?';
-
-  params.value.forEach((param, i) => {
-    if (param.name) {
-      if (i === 0) {
-        queryParams += `${param.name}=${param.value}`;
-      } else {
-        queryParams += `&${param.name}=${param.value}`;
-      }
-    }
-  });
-
-  const completeURL = baseURL + queryParams;
-
-  return completeURL;
-}
-
-function resetVariantForm() {
-  Object.assign(variantFields, {
-    variantName: '',
-    selectedGame: {},
-    external: true,
-  });
-
-  variantParams.value = [
-    {
-      name: '',
-      value: '',
-      type: 'String',
-    },
-  ];
-}
-</script>
-
-<style>
-.p-checkbox-box.p-highlight {
-  background-color: var(--primary-color);
-  border-color: var(--primary-color);
-  color: white;
-}
-.submit-button {
-  margin: auto;
-  margin-top: 1rem;
-  margin-bottom: 0.5rem;
-  display: flex;
-  border: none;
-  width: 11.75rem;
-}
-
-.submit-button:hover {
-  background-color: #2b8ecb;
-  color: black;
-}
-
-.delete-btn {
-  padding: 0.8rem;
-}
-
-.params-container {
-  display: flex;
-  margin-bottom: 1rem;
-}
-</style>
diff --git a/src/helpers/query/tasks.js b/src/helpers/query/tasks.js
index 6697f432a..66ac6fdf3 100644
--- a/src/helpers/query/tasks.js
+++ b/src/helpers/query/tasks.js
@@ -5,6 +5,7 @@ import { convertValues, getAxiosInstance, mapFields } from './utils';
 
 export const getTasksRequestBody = ({
   registered = true,
+  allData = false,
   orderBy,
   aggregationQuery,
   pageLimit,
@@ -24,9 +25,11 @@ export const getTasksRequestBody = ({
       requestBody.structuredQuery.offset = page * pageLimit;
     }
 
-    requestBody.structuredQuery.select = {
-      fields: select.map((field) => ({ fieldPath: field })),
-    };
+    if (!allData) {
+      requestBody.structuredQuery.select = {
+        fields: select.map((field) => ({ fieldPath: field })),
+      };
+    }
   }
 
   requestBody.structuredQuery.from = [
@@ -63,13 +66,14 @@ export const getTasksRequestBody = ({
   return requestBody;
 };
 
-export const taskFetcher = async (registered = true, select = ['name', 'testData', 'demoData']) => {
+export const taskFetcher = async (registered = true, allData = false, select = ['name', 'testData', 'demoData']) => {
   const axiosInstance = getAxiosInstance('app');
   const requestBody = getTasksRequestBody({
     registered,
+    allData,
     aggregationQuery: false,
     paginate: false,
-    select: select,
+    select: allData ? '' : select,
   });
 
   return axiosInstance.post(':runQuery', requestBody).then(({ data }) => mapFields(data));
diff --git a/src/pages/RegisterGame.vue b/src/pages/ManageTasksVariants.vue
similarity index 70%
rename from src/pages/RegisterGame.vue
rename to src/pages/ManageTasksVariants.vue
index aa8569094..d22c6968d 100644
--- a/src/pages/RegisterGame.vue
+++ b/src/pages/ManageTasksVariants.vue
@@ -4,19 +4,28 @@
       <div class="flex flex-column mb-5">
         <div class="flex align-items-center flex-wrap gap-3 mb-2">
           <i class="pi pi-pencil text-gray-400 rounded" style="font-size: 1.6rem" />
-          <div class="admin-page-header">Register Task</div>
+          <div class="admin-page-header">Manage Tasks</div>
         </div>
-        <div class="text-md text-gray-500 ml-6">Register a new task or variant.</div>
+        <div class="text-md text-gray-500 ml-6">Manage tasks and variants.</div>
       </div>
       <div class="register-container mx-auto md:flex-none">
-        <RegisterTask />
+        <PvTabView>
+          <PvTabPanel header="Tasks">
+            <ManageTasks />
+          </PvTabPanel>
+
+          <PvTabPanel header="Variants">
+            <ManageVariants />
+          </PvTabPanel>
+        </PvTabView>
       </div>
     </section>
   </main>
 </template>
 
 <script setup>
-import RegisterTask from '@/components/tasks/RegisterTask.vue';
+import ManageTasks from '../components/tasks/ManageTasks.vue';
+import ManageVariants from '../components/tasks/ManageVariants.vue';
 </script>
 
 <style scoped>
diff --git a/src/router/index.js b/src/router/index.js
index c074b2c23..14cd77a00 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -195,10 +195,10 @@ const routes = [
   },
 
   {
-    path: '/register-game',
-    name: 'RegisterGame',
-    component: () => import('../pages/RegisterGame.vue'),
-    meta: { pageTitle: 'Register Game', requireAdmin: true, requireSuperAdmin: true },
+    path: '/manage-tasks-variants',
+    name: 'ManageTasksVariants',
+    component: () => import('../pages/ManageTasksVariants.vue'),
+    meta: { pageTitle: 'Manage Tasks', requireAdmin: true, requireSuperAdmin: true },
   },
   {
     path: '/register',
diff --git a/src/router/sidebarActions.js b/src/router/sidebarActions.js
index e9fbff78a..5a0386449 100644
--- a/src/router/sidebarActions.js
+++ b/src/router/sidebarActions.js
@@ -62,9 +62,9 @@ const sidebarActionOptions = [
     category: 'Administrations',
   },
   {
-    title: 'Register Task',
+    title: 'Manage Tasks',
     icon: 'pi pi-pencil',
-    buttonLink: { name: 'RegisterGame' },
+    buttonLink: { name: 'ManageTasksVariants' },
     requiresSuperAdmin: true,
     requiresAdmin: true,
     project: 'ALL',