diff --git a/src/main/java/edu/byu/cs/controller/CasController.java b/src/main/java/edu/byu/cs/controller/CasController.java
index 95325ee2..99c21263 100644
--- a/src/main/java/edu/byu/cs/controller/CasController.java
+++ b/src/main/java/edu/byu/cs/controller/CasController.java
@@ -1,6 +1,9 @@
 package edu.byu.cs.controller;
 
 import edu.byu.cs.canvas.CanvasException;
+import edu.byu.cs.controller.exception.BadRequestException;
+import edu.byu.cs.controller.exception.InternalServerException;
+import edu.byu.cs.dataAccess.DataAccessException;
 import edu.byu.cs.model.User;
 import edu.byu.cs.properties.ApplicationProperties;
 import edu.byu.cs.service.CasService;
diff --git a/src/main/java/edu/byu/cs/controller/exception/PriorRepoClaimBlockageException.java b/src/main/java/edu/byu/cs/controller/exception/PriorRepoClaimBlockageException.java
new file mode 100644
index 00000000..c72d5c42
--- /dev/null
+++ b/src/main/java/edu/byu/cs/controller/exception/PriorRepoClaimBlockageException.java
@@ -0,0 +1,9 @@
+package edu.byu.cs.controller.exception;
+
+public class PriorRepoClaimBlockageException extends Exception {
+    private static final String secrets = "btw im a teapot";
+
+    public PriorRepoClaimBlockageException(String message) {
+        super(message);
+    }
+}
diff --git a/src/main/java/edu/byu/cs/service/SubmissionService.java b/src/main/java/edu/byu/cs/service/SubmissionService.java
index e34bef09..6ba4fc5c 100644
--- a/src/main/java/edu/byu/cs/service/SubmissionService.java
+++ b/src/main/java/edu/byu/cs/service/SubmissionService.java
@@ -194,8 +194,8 @@ public static void approveSubmission(String adminNetId, ApprovalRequest request)
     /**
      * Creates a grader for the given request with an observer that sends messages to the subscribed sessions
      *
-     * @param netId the netId of the user
-     * @param phase the phase to grade
+     * @param netId           the netId of the user
+     * @param phase           the phase to grade
      * @param adminSubmission if the grader should run in admin mode
      * @return the grader
      * @throws IOException if there is an error creating the grader
diff --git a/src/main/java/edu/byu/cs/service/UserService.java b/src/main/java/edu/byu/cs/service/UserService.java
index 0eb600ca..7c04691a 100644
--- a/src/main/java/edu/byu/cs/service/UserService.java
+++ b/src/main/java/edu/byu/cs/service/UserService.java
@@ -113,7 +113,8 @@ private static boolean isValidRepoUrl(String url) {
     /**
      * Checks to see if anyone currently or previously (other than the provided user) has claimed the provided repoUrl.
      * returns if the repo is available. it will throw otherwise, containing a message why
-     * @param url the repoUrl to check if currently or previously claimed
+     *
+     * @param url   the repoUrl to check if currently or previously claimed
      * @param netId the user trying to claim the url, so that they can claim urls they previously claimed
      * @return null if the repo is available for that user. returns the update that prevents the user from claiming the url.
      */
diff --git a/src/main/java/edu/byu/cs/util/PhaseUtils.java b/src/main/java/edu/byu/cs/util/PhaseUtils.java
index e63e7e50..03f6dad0 100644
--- a/src/main/java/edu/byu/cs/util/PhaseUtils.java
+++ b/src/main/java/edu/byu/cs/util/PhaseUtils.java
@@ -152,9 +152,9 @@ public static boolean isPhaseGraded(Phase phase) {
      */
     public static Collection<Rubric.RubricType> requiredRubricTypes(Phase phase) {
         return switch (phase) {
-            case Phase0, Phase1, Phase3, Phase4 -> Set.of(Rubric.RubricType.PASSOFF_TESTS);
+            case Phase0, Phase1, Phase3, Phase4, Phase6 -> Set.of(Rubric.RubricType.PASSOFF_TESTS);
             case GitHub -> Set.of(Rubric.RubricType.GITHUB_REPO);
-            case Phase5, Phase6, Quality, Commits -> Set.of();
+            case Phase5, Quality, Commits -> Set.of();
         };
     }
 
diff --git a/src/main/resources/frontend/src/components/config/BannerConfigEditor.vue b/src/main/resources/frontend/src/components/config/BannerConfigEditor.vue
new file mode 100644
index 00000000..f6729e96
--- /dev/null
+++ b/src/main/resources/frontend/src/components/config/BannerConfigEditor.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useAppConfigStore } from '@/stores/appConfig'
+import { setBanner } from '@/services/configService'
+
+const { closeEditor } = defineProps<{
+  closeEditor: () => void
+}>();
+
+const appConfigStore = useAppConfigStore();
+
+const bannerMessageToSubmit = ref<string>(appConfigStore.bannerMessage)
+const bannerColorToSubmit = ref<string>(appConfigStore.bannerColor)
+const bannerLinkToSubmit = ref<string>(appConfigStore.bannerLink)
+const bannerWillExpire = ref<boolean>(false)
+const bannerExpirationDate = ref<string>("")
+const bannerExpirationTime = ref<string>("")
+const clearBannerMessage = () => {
+  bannerMessageToSubmit.value = ""
+  bannerLinkToSubmit.value = ""
+  bannerColorToSubmit.value = ""
+  bannerColorToSubmit.value = ""
+  bannerWillExpire.value = false
+}
+const submitBanner = async () => {
+  let combinedDateTime;
+  if (bannerWillExpire.value) {
+    combinedDateTime = `${bannerExpirationDate.value}T${bannerExpirationTime.value ? bannerExpirationTime.value : "23:59"}:59`;
+  } else {
+    combinedDateTime = ""
+  }
+  try {
+    await setBanner(bannerMessageToSubmit.value, bannerLinkToSubmit.value, bannerColorToSubmit.value, combinedDateTime)
+  } catch (e) {
+    alert("There was a problem in saving the updated banner message:\n" + e)
+  }
+  closeEditor()
+}
+</script>
+
+<template>
+  <p>Set a message for students to see from the Autograder</p>
+  <input v-model="bannerMessageToSubmit" type="text" placeholder="No Banner Message"/>
+  <p>Set a url that the user will be taken to if they click on the banner</p>
+  <input v-model="bannerLinkToSubmit" type="text" placeholder="No Destination URL"/>
+  <p>Choose a background color</p>
+  <select id="bannerColorSelect" v-model="bannerColorToSubmit" :style="{
+      backgroundColor: bannerColorToSubmit,
+      color: (bannerColorToSubmit ? '#ffffff' : '#000000')
+    }">
+    <option selected value="">Default</option>
+    <option value="#d62b18">Red</option>
+    <option value="#eb700c">Orange</option>
+    <option value="#ded77a">Yellow</option>
+    <option value="#0cab11">Green</option>
+    <option value="#002E5D">BYU Blue</option>
+    <option value="#5e12b5">Purple</option>
+    <option value="#424142">Gray</option>
+    <option value="#000000">Black</option>
+  </select>
+  <p>Message Expires: <input type="checkbox" v-model="bannerWillExpire"/></p>
+  <div v-if="bannerWillExpire">
+    <input type="date" v-model="bannerExpirationDate"/><input type="time" v-model="bannerExpirationTime"/>
+    <p><em>If no time is selected, it will expire at the end of the day (Utah Time)</em></p>
+  </div>
+
+  <div>
+    <button class="small" @click="submitBanner" :disabled="bannerWillExpire && (bannerExpirationDate.length == 0)">Save</button>
+    <button class="small" @click="clearBannerMessage">Clear</button>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/main/resources/frontend/src/components/config/ConfigSection.vue b/src/main/resources/frontend/src/components/config/ConfigSection.vue
new file mode 100644
index 00000000..a35d2e74
--- /dev/null
+++ b/src/main/resources/frontend/src/components/config/ConfigSection.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+/**
+ * A reusable wrapper component that provides a consistent interface for editable configuration sections.
+ * Each section includes a title, description, current value display, and an editable popup interface.
+ *
+ * All editors should take a function as a prop for closing the editor popup. The function is provided by
+ * the ConfigSection component by decomposition.
+ *
+ * <template #editor="{ closeEditor }"> gives any element inside the template tag access to the `closeEditor()`
+ * function, which will close the editor popup.
+ *
+ * ConfigSection will automatically reload the config from the server each time an editor is opened, to ensure
+ * the admin has the most upto date config
+ *
+ * @example
+ * <ConfigSection
+ *   title="Banner Message"
+ *   description="A dynamic message displayed across the top of the Autograder"
+ * >
+ *   <template #current>
+ *     <p>Current message: {{ currentMessage }}</p>
+ *   </template>
+ *   <template #editor="{ closeEditor }">
+ *     <BannerConfigEditor :closeEditor="closeEditor"/>
+ *   </template>
+ * </ConfigSection>
+ */
+
+import { ref } from 'vue'
+import PopUp from '@/components/PopUp.vue'
+import { useAppConfigStore } from '@/stores/appConfig'
+
+defineProps<{
+  title: string
+  description: string
+}>()
+
+const editorPopup = ref<boolean>(false);
+
+const openEditor = () => {
+  useAppConfigStore().updateConfig()
+  editorPopup.value = true
+}
+
+const closeEditor = () => {
+  editorPopup.value = false;
+  useAppConfigStore().updateConfig()
+}
+</script>
+
+<template>
+  <section class="config-section">
+    <h3 @click="openEditor" style="cursor: pointer">{{ title }} <i class="fa-solid fa-pen-to-square"/></h3>
+    <p>{{ description }}</p>
+    <slot name="current"/>
+    <PopUp
+      v-if="editorPopup"
+      @closePopUp="editorPopup = false">
+      <h3>Edit {{ title }}</h3>
+      <slot name="editor" :closeEditor="closeEditor"/>
+    </PopUp>
+  </section>
+</template>
+
+<style scoped>
+.config-section {
+  padding: 1rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.5rem;
+  background-color: white;
+}
+</style>
diff --git a/src/main/resources/frontend/src/components/config/CourseIdConfigEditor.vue b/src/main/resources/frontend/src/components/config/CourseIdConfigEditor.vue
new file mode 100644
index 00000000..c01e60c7
--- /dev/null
+++ b/src/main/resources/frontend/src/components/config/CourseIdConfigEditor.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { listOfPhases, Phase, type RubricInfo, type RubricType } from '@/types/types'
+import {
+  convertPhaseStringToEnum,
+  convertRubricTypeToHumanReadable,
+  getRubricTypes,
+  isPhaseGraded
+} from '@/utils/utils'
+import { computed, type WritableComputedRef } from 'vue'
+import { setCanvasCourseIds, setCourseIds } from '@/services/configService'
+import { useAppConfigStore } from '@/stores/appConfig'
+
+const appConfigStore = useAppConfigStore();
+
+const { closeEditor } = defineProps<{
+  closeEditor: () => void
+}>();
+
+const assignmentIdProxy = (phase: Phase): WritableComputedRef<number> => computed({
+  get: (): number => appConfigStore.assignmentIds.get(phase) || -1,
+  set: (value: number) => appConfigStore.assignmentIds.set(phase, value)
+})
+
+const rubricIdInfoProxy = (phase: Phase, rubricType: RubricType): WritableComputedRef<string> => {
+  return getProxy(
+    phase,
+    rubricType,
+    (rubricInfo) => rubricInfo.id,
+    (rubricInfo, value) => rubricInfo.id = value,
+    "No Rubric ID found"
+  );
+}
+
+const rubricPointsInfoProxy = (phase: Phase, rubricType: RubricType): WritableComputedRef<number> => {
+  return getProxy(
+    phase,
+    rubricType,
+    (rubricInfo) => rubricInfo.points,
+    (rubricInfo, value) => rubricInfo.points = value,
+    -1
+  );
+}
+
+const getProxy = <T>(
+  phase: Phase,
+  rubricType: RubricType,
+  getFunc: (rubricInfo: RubricInfo) => T,
+  setFunc: (rubricInfo: RubricInfo, value: T) => void,
+  defaultValue: T,
+): WritableComputedRef<T> => computed({
+  get: (): T => {
+    const rubricIdMap = appConfigStore.rubricInfo.get(phase);
+    if (!rubricIdMap) return defaultValue;
+    const rubricInfo = rubricIdMap.get(rubricType);
+    if (!rubricInfo) return defaultValue;
+    return getFunc(rubricInfo);
+  },
+  set: (value: T) => {
+    const rubricTypeMap = appConfigStore.rubricInfo.get(phase);
+    if (!rubricTypeMap) return;
+    const rubricInfo = rubricTypeMap.get(rubricType);
+    if (!rubricInfo) return;
+    setFunc(rubricInfo, value);
+  }
+});
+
+const submitManuelCourseIds = async () => {
+  const userConfirmed = window.confirm("Are you sure you want to manually override? \n\nIf you changed the course ID incorrectly, it won't be able to reset properly.");
+  if (userConfirmed) {
+    try {
+      await setCourseIds(appConfigStore.courseNumber, appConfigStore.assignmentIds, appConfigStore.rubricInfo);
+      closeEditor()
+    } catch (e) {
+      alert("There was problem manually setting the course-related IDs: " + (e as Error).message);
+    }
+  }
+}
+
+const submitCanvasCourseIds = async () => {
+  const userConfirmed = window.confirm("Are you sure you want to use Canvas to reset ID values? \n\nNote: This will fail if the currently saved Course ID is incorrect.")
+  if (userConfirmed) {
+    try {
+      await setCanvasCourseIds();
+    } catch (e) {
+      alert("There was problem getting and setting the course-related IDs using Canvas: " + (e as Error).message);
+    }
+    closeEditor()
+  }
+}
+
+</script>
+
+<template>
+  <p>
+    <i class="fa-solid fa-triangle-exclamation" style="color: orangered"/>
+    Note: All the default input values are the values that are currently being used.
+  </p>
+
+  <br>
+  <h4>Course Number</h4>
+  <label for="courseIdInput">Course Number: </label>
+  <input id="courseIdInput" type="number" v-model.number="appConfigStore.courseNumber" placeholder="Course Number">
+  <br><br>
+  <h4>Assignment and Rubric IDs/Points</h4>
+  <div v-for="(phase, phaseIndex) in listOfPhases()" :key="phaseIndex">
+    <div v-if="isPhaseGraded(phase)">
+      <h4>{{ phase }}:</h4>
+      <label :for="'assignmentIdInput' + phaseIndex">Assignment ID: </label>
+      <input
+        :id="'assignmentIdInput' + phaseIndex"
+        type="number"
+        v-model.number="assignmentIdProxy(phase).value"
+        placeholder="Assignment ID"
+      >
+      <br>
+
+      <ol>
+        <li v-for="(rubricType, rubricIndex) in getRubricTypes(convertPhaseStringToEnum(phase as unknown as string))" :key="rubricIndex">
+          <u>{{ convertRubricTypeToHumanReadable(rubricType) }}</u>:
+          <div class="inline-container">
+            <label :for="'rubricIdInput' + phaseIndex + rubricIndex">Rubric&nbsp;ID: </label>
+            <input
+              :id="'rubricIdInput' + phaseIndex + rubricIndex"
+              type="text"
+              v-model="rubricIdInfoProxy(phase, rubricType).value"
+              placeholder="Rubric ID"
+            >
+          </div>
+          <div class="inline-container">
+            <label :for="'rubricPointsInput' + phaseIndex + rubricIndex">Rubric Points: </label>
+            <input
+              :id="'rubricPointsInput' + phaseIndex + rubricIndex"
+              type="number"
+              v-model.number="rubricPointsInfoProxy(phase, rubricType).value"
+              placeholder="Points"
+            >
+          </div>
+        </li>
+      </ol>
+    </div>
+  </div>
+
+  <br>
+  <button @click="submitManuelCourseIds">Submit</button>
+  <button @click="submitCanvasCourseIds">Reset IDs Via Canvas</button>
+</template>
+
+<style scoped>
+.inline-container {
+  display: flex;
+  align-items: center;
+  margin-right: 10px; /* Optional: Adjust spacing between elements */
+  margin-left: 10px;
+}
+
+.inline-container label {
+  margin-right: 5px; /* Optional: Adjust spacing between label and input */
+}
+</style>
diff --git a/src/main/resources/frontend/src/components/config/LivePhaseConfigEditor.vue b/src/main/resources/frontend/src/components/config/LivePhaseConfigEditor.vue
new file mode 100644
index 00000000..de746ea9
--- /dev/null
+++ b/src/main/resources/frontend/src/components/config/LivePhaseConfigEditor.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { listOfPhases, Phase } from '@/types/types'
+import { useAppConfigStore } from '@/stores/appConfig'
+import { setLivePhases } from '@/services/configService'
+
+const appConfigStore = useAppConfigStore();
+
+const { closeEditor } = defineProps<{
+  closeEditor: () => void
+}>();
+
+const setAllPhases = (setting: boolean) => {
+  for (const phase of listOfPhases() as Phase[]) {
+    appConfigStore.phaseActivationList[phase] = setting
+  }
+}
+const submitLivePhases = async () => {
+  let livePhases: Phase[] = []
+  for (const phase of listOfPhases() as Phase[]) {
+    if (useAppConfigStore().phaseActivationList[phase]) {
+      livePhases.push(phase);
+    }
+  }
+
+  try {
+    await setLivePhases(livePhases)
+  } catch (e) {
+    alert("There was a problem in saving live phases")
+  }
+  closeEditor()
+}
+</script>
+
+<template>
+  <div class="checkboxes">
+    <label v-for="(phase, index) in listOfPhases()" :key="index">
+      <span><input type="checkbox" v-model="appConfigStore.phaseActivationList[phase]"> {{ phase }}</span>
+    </label>
+  </div>
+
+  <div class="submitChanges">
+    <p><em>This will not effect admin submissions</em></p>
+    <div>
+      <button @click="setAllPhases(true)" class="small">Enable all</button>
+      <button @click="setAllPhases(false)" class="small">Disable all</button>
+    </div>
+    <button @click="submitLivePhases">Submit Changes</button>
+  </div>
+</template>
+
+<style scoped>
+.checkboxes {
+  display: flex;
+  flex-direction: column;
+}
+.submitChanges {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.submitChanges >* {
+  margin: 5px;
+}
+</style>
diff --git a/src/main/resources/frontend/src/views/AdminView/ConfigView.vue b/src/main/resources/frontend/src/views/AdminView/ConfigView.vue
index 50efa303..5252c1d2 100644
--- a/src/main/resources/frontend/src/views/AdminView/ConfigView.vue
+++ b/src/main/resources/frontend/src/views/AdminView/ConfigView.vue
@@ -1,332 +1,76 @@
 <script setup lang="ts">
-import {computed, ref, type WritableComputedRef} from 'vue'
-import PopUp from '@/components/PopUp.vue'
-import {listOfPhases, Phase, type RubricInfo, type RubricType} from '@/types/types'
-import {setBanner, setLivePhases, setCanvasCourseIds, setCourseIds} from '@/services/configService'
+import { defineAsyncComponent, onMounted, ref } from 'vue'
+import { listOfPhases } from '@/types/types'
 import { useAppConfigStore } from '@/stores/appConfig'
-import {
-  convertPhaseStringToEnum,
-  convertRubricTypeToHumanReadable,
-  getRubricTypes,
-  isPhaseGraded, readableTimestamp
-} from '@/utils/utils'
+import { generateClickableLink, readableTimestamp } from '@/utils/utils'
+import ConfigSection from '@/components/config/ConfigSection.vue'
 
-const appConfigStore = useAppConfigStore();
-
-// PopUp Control
-const openLivePhases = ref<boolean>(false);
-const openBannerMessage = ref<boolean>(false);
-const openCanvasCourseIds = ref<boolean>(false);
-const openManuelCourseIds = ref<boolean>(false);
-
-// =========================
-
-// Banner Message Setting
-const bannerMessageToSubmit = ref<string>(appConfigStore.bannerMessage)
-const bannerColorToSubmit = ref<string>("")
-const bannerLinkToSubmit = ref<string>("")
-const bannerWillExpire = ref<boolean>(false)
-const bannerExpirationDate = ref<string>("")
-const bannerExpirationTime = ref<string>("")
-const clearBannerMessage = () => {
-  bannerMessageToSubmit.value = ""
-  bannerLinkToSubmit.value = ""
-  bannerColorToSubmit.value = ""
-  bannerColorToSubmit.value = ""
-  bannerWillExpire.value = false
-}
-const submitBanner = async () => {
-  let combinedDateTime;
-  if (bannerWillExpire.value) {
-    combinedDateTime = `${bannerExpirationDate.value}T${bannerExpirationTime.value ? bannerExpirationTime.value : "23:59"}:59`;
-  } else {
-    combinedDateTime = ""
-  }
-  try {
-    await setBanner(bannerMessageToSubmit.value, bannerLinkToSubmit.value, bannerColorToSubmit.value, combinedDateTime)
-  } catch (e) {
-    alert("There was a problem in saving the updated banner message:\n" + e)
-  }
-  openBannerMessage.value = false
-}
-// =========================
-
-// Live Phase Setting
-const setAllPhases = (setting: boolean) => {
-  for (const phase of listOfPhases() as Phase[]) {
-    appConfigStore.phaseActivationList[phase] = setting
-  }
-}
-const submitLivePhases = async () => {
-  let livePhases: Phase[] = []
-  for (const phase of listOfPhases() as Phase[]) {
-    if (useAppConfigStore().phaseActivationList[phase]) {
-      livePhases.push(phase);
-    }
-  }
-
-  try {
-    await setLivePhases(livePhases)
-  } catch (e) {
-    alert("There was a problem in saving live phases")
-  }
-  openLivePhases.value = false
-}
-// =========================
-
-// Course ID Setting
+// Lazy Load Editor Components
+const BannerConfigEditor = defineAsyncComponent(() => import('@/components/config/BannerConfigEditor.vue'))
+const LivePhaseConfigEditor = defineAsyncComponent(() => import('@/components/config/LivePhaseConfigEditor.vue'))
+const CourseIdConfigEditor = defineAsyncComponent(() => import('@/components/config/CourseIdConfigEditor.vue'))
 
-const getUpdatedConfig = async () => {
-  await appConfigStore.updateConfig();
-  openManuelCourseIds.value = true;
-}
+const appConfigStore = useAppConfigStore();
 
-const assignmentIdProxy = (phase: Phase): WritableComputedRef<number> => computed({
-  get: (): number => appConfigStore.assignmentIds.get(phase) || -1,
-  set: (value: number) => appConfigStore.assignmentIds.set(phase, value)
+onMounted( async () => {
+  await useAppConfigStore().updateConfig();
 })
 
-const rubricIdInfoProxy = (phase: Phase, rubricType: RubricType): WritableComputedRef<string> => {
-  return getProxy(
-      phase,
-      rubricType,
-      (rubricInfo) => rubricInfo.id,
-      (rubricInfo, value) => rubricInfo.id = value,
-      "No Rubric ID found"
-  );
-}
-
-const rubricPointsInfoProxy = (phase: Phase, rubricType: RubricType): WritableComputedRef<number> => {
-  return getProxy(
-      phase,
-      rubricType,
-      (rubricInfo) => rubricInfo.points,
-      (rubricInfo, value) => rubricInfo.points = value,
-      -1
-  );
-}
-
-const getProxy = <T>(
-    phase: Phase,
-    rubricType: RubricType,
-    getFunc: (rubricInfo: RubricInfo) => T,
-    setFunc: (rubricInfo: RubricInfo, value: T) => void,
-    defaultValue: T,
-): WritableComputedRef<T> => computed({
-  get: (): T => {
-    const rubricIdMap = appConfigStore.rubricInfo.get(phase);
-    if (!rubricIdMap) return defaultValue;
-    const rubricInfo = rubricIdMap.get(rubricType);
-    if (!rubricInfo) return defaultValue;
-    return getFunc(rubricInfo);
-  },
-  set: (value: T) => {
-    const rubricTypeMap = appConfigStore.rubricInfo.get(phase);
-    if (!rubricTypeMap) return;
-    const rubricInfo = rubricTypeMap.get(rubricType);
-    if (!rubricInfo) return;
-    setFunc(rubricInfo, value);
-  }
-});
-
-const submitManuelCourseIds = async () => {
-  const userConfirmed = window.confirm("Are you sure you want to manually override?");
-  if (userConfirmed) {
-    try {
-      await setCourseIds(appConfigStore.courseNumber, appConfigStore.assignmentIds, appConfigStore.rubricInfo);
-      openManuelCourseIds.value = false;
-    } catch (e) {
-      alert("There was problem manually setting the course-related IDs: " + (e as Error).message);
-    }
-  }
-}
-
-const submitCanvasCourseIds = async () => {
-  try {
-    await setCanvasCourseIds();
-    openCanvasCourseIds.value = false;
-  } catch (e) {
-    alert("There was problem getting and setting the course-related IDs using Canvas: " + (e as Error).message);
-  }
-}
-
-// =========================
-
 </script>
 
 <template>
   <div id="configContainer">
-    <div class="configCategory">
-      <h3>Live Phases</h3>
-      <p>These are the phases are live and open for students to submit to</p>
-      <div v-for="phase in listOfPhases()">
-        <p>
-          <i v-if="appConfigStore.phaseActivationList[phase]" class="fa-solid fa-circle-check" style="color: green"/>
-          <i v-else class="fa-solid fa-x" style="color: red"/>
-          {{phase}}</p>
+    <ConfigSection title="Banner Message" description="A dynamic message displayed across the top of the Autograder">
+      <template #editor="{ closeEditor }">
+        <BannerConfigEditor :closeEditor="closeEditor"/>
+      </template>
+      <template #current>
+      <div v-if="appConfigStore.bannerMessage">
+        <p><span class="infoLabel">Current Message: </span><span v-text="appConfigStore.bannerMessage"/></p>
+        <p><span class="infoLabel">Current Link: </span><span v-html="generateClickableLink(appConfigStore.bannerLink)"/></p>
+        <p><span class="infoLabel">Expires: </span><span v-text="readableTimestamp(appConfigStore.bannerExpiration)"/></p>
       </div>
-      <button @click="openLivePhases = true">Update</button>
-    </div>
-
-    <div class="configCategory">
-      <h3>Banner message</h3>
-      <span v-if="appConfigStore.bannerMessage">
-        <p><span class="infoDescription">Current Message: </span><span v-text="appConfigStore.bannerMessage"/></p>
-        <p><span class="infoDescription">Current Link: </span><span v-text="appConfigStore.bannerLink"/></p>
-        <p><span class="infoDescription">Expires: </span><span v-text="readableTimestamp(appConfigStore.bannerExpiration)"/></p>
-      </span>
-      <p v-else>There is currently no banner message</p>
-      <button @click="openBannerMessage = true">Set</button>
-    </div>
-
-    <div class="configCategory">
-      <h3>Course Related IDs</h3>
-      <button @click="openCanvasCourseIds = true">Update using Canvas</button>
-      <button @click="getUpdatedConfig">Update Manually</button>
-    </div>
+        <p v-else>There is currently no banner message</p>
+      </template>
+    </ConfigSection>
+
+    <ConfigSection title="Live Phases" description="These phases are live and open for students to submit to">
+      <template #editor="{ closeEditor }">
+        <LivePhaseConfigEditor :closeEditor="closeEditor"/>
+      </template>
+      <template #current>
+        <div v-for="phase in listOfPhases()">
+          <p>
+            <i v-if="appConfigStore.phaseActivationList[phase]" class="fa-solid fa-circle-check" style="color: green"/>
+            <i v-else class="fa-solid fa-x" style="color: red"/>
+            {{phase}}</p>
+        </div>
+      </template>
+    </ConfigSection>
+
+    <ConfigSection title="Course IDs" description="Phase assignment ID numbers, rubric IDs, and rubric points">
+      <template #editor="{ closeEditor }">
+        <CourseIdConfigEditor :closeEditor="closeEditor"/>
+      </template>
+      <template #current>
+        <p><span class="infoLabel">Course ID:</span> {{appConfigStore.courseNumber}}</p>
+        <p><em>Open editor to see the rest of the values</em></p>
+      </template>
+    </ConfigSection>
   </div>
-
-  <PopUp
-    v-if="openLivePhases"
-    @closePopUp="openLivePhases = false; appConfigStore.updateConfig()">
-    <h3>Live Phases</h3>
-    <p>Enable student submissions for the following phases:</p>
-
-    <div class="checkboxes">
-      <label v-for="(phase, index) in listOfPhases()" :key="index">
-        <span><input type="checkbox" v-model="appConfigStore.phaseActivationList[phase]"> {{ phase }}</span>
-      </label>
-    </div>
-
-    <div class="submitChanges">
-      <p><em>This will not effect admin submissions</em></p>
-      <div>
-        <button @click="setAllPhases(true)" class="small">Enable all</button>
-        <button @click="setAllPhases(false)" class="small">Disable all</button>
-      </div>
-      <button @click="submitLivePhases">Submit Changes</button>
-    </div>
-  </PopUp>
-
-  <PopUp
-    v-if="openBannerMessage"
-    @closePopUp="openBannerMessage = false">
-    <h3>Banner Message</h3>
-    <p>Set a message for students to see from the Autograder</p>
-    <input v-model="bannerMessageToSubmit" type="text" placeholder="No Banner Message"/>
-    <p>Set a url that the user will be taken to if they click on the banner</p>
-    <input v-model="bannerLinkToSubmit" type="text" placeholder="No Destination URL"/>
-    <p>Choose a background color</p>
-    <select id="bannerColorSelect" v-model="bannerColorToSubmit">
-      <option selected value="">Default</option>
-      <option value="#d62b18">Red</option>
-      <option value="#eb700c">Orange</option>
-      <option value="#ded77a">Yellow</option>
-      <option value="#0cab11">Green</option>
-      <option value="#002E5D">BYU Blue</option>
-      <option value="#5e12b5">Purple</option>
-      <option value="#424142">Gray</option>
-      <option value="#000000">Black</option>
-    </select>
-    <p>Message Expires: <input type="checkbox" v-model="bannerWillExpire"/></p>
-    <div v-if="bannerWillExpire">
-      <input type="date" v-model="bannerExpirationDate"/><input type="time" v-model="bannerExpirationTime"/>
-      <p><em>If no time is selected, it will expire at the end of the day (Utah Time)</em></p>
-    </div>
-
-    <div>
-      <button class="small" @click="submitBanner" :disabled="bannerWillExpire && (bannerExpirationDate.length == 0)">Save</button>
-      <button class="small" @click="clearBannerMessage">Clear</button>
-    </div>
-  </PopUp>
-
-  <PopUp
-    v-if="openCanvasCourseIds"
-    @closePopUp="openCanvasCourseIds = false">
-
-    <h3 style="text-align: center">Course Related IDs</h3>
-    <p style="text-align: center">
-      Are you sure you want to use Canvas for retrieving assignment IDs, rubric IDs, and rubric points?<br />
-      This will overwrite the preexisting values and cannot be restored.
-    </p>
-
-    <span class="center-buttons">
-      <button @click="submitCanvasCourseIds">Yes</button>
-      <button @click="openCanvasCourseIds = false">Go Back</button>
-    </span>
-  </PopUp>
-
-  <PopUp
-    v-if="openManuelCourseIds"
-    @closePopUp="openManuelCourseIds = false">
-    <h3>Course Related IDs</h3>
-    <p>
-      <i class="fa-solid fa-triangle-exclamation" style="color: orangered"/>
-      Note: All the default input values are the values that are currently being used.
-    </p>
-
-    <br>
-    <h4>Course Number</h4>
-    <label for="courseIdInput">Course Number: </label>
-    <input id="courseIdInput" type="number" v-model.number="appConfigStore.courseNumber" placeholder="Course Number">
-    <br><br>
-    <h4>Assignment and Rubric IDs/Points</h4>
-    <div v-for="(phase, phaseIndex) in listOfPhases()" :key="phaseIndex">
-      <div v-if="isPhaseGraded(phase)">
-        <h4>{{ phase }}:</h4>
-        <label :for="'assignmentIdInput' + phaseIndex">Assignment ID: </label>
-        <input
-            :id="'assignmentIdInput' + phaseIndex"
-            type="number"
-            v-model.number="assignmentIdProxy(phase).value"
-            placeholder="Assignment ID"
-        >
-        <br>
-
-        <ol>
-          <li v-for="(rubricType, rubricIndex) in getRubricTypes(convertPhaseStringToEnum(phase as unknown as string))" :key="rubricIndex">
-            <u>{{ convertRubricTypeToHumanReadable(rubricType) }}</u>:
-            <div class="inline-container">
-              <label :for="'rubricIdInput' + phaseIndex + rubricIndex">Rubric&nbsp;ID: </label>
-              <input
-                  :id="'rubricIdInput' + phaseIndex + rubricIndex"
-                  type="text"
-                  v-model="rubricIdInfoProxy(phase, rubricType).value"
-                  placeholder="Rubric ID"
-              >
-            </div>
-            <div class="inline-container">
-              <label :for="'rubricPointsInput' + phaseIndex + rubricIndex">Rubric Points: </label>
-              <input
-                  :id="'rubricPointsInput' + phaseIndex + rubricIndex"
-                  type="number"
-                  v-model.number="rubricPointsInfoProxy(phase, rubricType).value"
-                  placeholder="Points"
-              >
-            </div>
-          </li>
-        </ol>
-      </div>
-    </div>
-
-    <br>
-    <button @click="submitManuelCourseIds">Submit</button>
-    <button @click="getUpdatedConfig">Reset Values</button>
-    <button @click="openManuelCourseIds = false">Close</button>
-  </PopUp>
-
 </template>
 
 <style scoped>
-.submitChanges {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+:deep(input) {
+  border: 1px solid #ccc;
+  padding: 8px;
+  border-radius: 4px;
 }
-.submitChanges >* {
-  margin: 5px;
+:deep(input[type="text"]) {
+  width: 100%;
 }
-.infoDescription {
+
+.infoLabel {
   font-weight: bold;
 }
 
@@ -337,39 +81,8 @@ const submitCanvasCourseIds = async () => {
   margin: 10px;
 }
 
-button {
-  margin-right: 5px;
-  margin-top: 5px;
-}
-
 input[type="text"]{
   padding: 5px;
   width: 100%;
 }
-
-.checkboxes {
-  display: flex;
-  flex-direction: column;
-}
-
-.center-buttons {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-
-
-.inline-container {
-  display: flex;
-  align-items: center;
-  margin-right: 10px; /* Optional: Adjust spacing between elements */
-  margin-left: 10px;
-}
-
-.inline-container label {
-  margin-right: 5px; /* Optional: Adjust spacing between label and input */
-}
-
-
 </style>