diff --git a/VueApp/src/CTS/components/LevelSelect.vue b/VueApp/src/CTS/components/LevelSelect.vue
index 09669f8c0..14aef7145 100644
--- a/VueApp/src/CTS/components/LevelSelect.vue
+++ b/VueApp/src/CTS/components/LevelSelect.vue
@@ -73,7 +73,10 @@ getLevels()
                 flat
                 size="md"
                 dense
-                :class="selectedLevel.levelId == level.levelId ? 'selectedLevel q-py-sm' : 'q-py-sm'"
+                :class="[
+                    'q-py-sm',
+                    selectedLevel.levelId == level.levelId ? ['selectedLevel', `selectedLevel--${level.order}`] : '',
+                ]"
                 @click="selectedLevel = level"
             >
                 <q-tooltip
@@ -109,7 +112,9 @@ getLevels()
                 no-caps
                 size="md"
                 dense
-                :class="selectedLevel.levelId == level.levelId ? 'selectedLevel' : ''"
+                :class="
+                    selectedLevel.levelId == level.levelId ? ['selectedLevel', `selectedLevel--${level.order}`] : ''
+                "
                 @click="selectedLevel = level"
             >
                 <template #default> {{ level.order }}. {{ level.levelName }} </template>
@@ -143,17 +148,38 @@ getLevels()
 
 <style scoped>
 div.levelSelection button {
-    border: 1px solid rgb(30 136 229);
-    color: rgb(30 136 229);
+    border: 1px solid var(--q-secondary);
+    color: var(--q-secondary);
     width: 100%;
     margin-bottom: 0.2rem;
 }
 
 div.levelSelection button.selectedLevel {
-    background-color: rgb(30 136 229);
+    background-color: var(--q-secondary);
     color: white;
 }
 
+div.levelSelection button.selectedLevel.selectedLevel--1 {
+    background-color: rgba(62, 127, 238, 0.3);
+    color: #212529;
+}
+div.levelSelection button.selectedLevel.selectedLevel--2 {
+    background-color: rgba(62, 127, 238, 0.7);
+    color: #212529;
+}
+div.levelSelection button.selectedLevel.selectedLevel--3 {
+    background-color: rgba(62, 127, 238, 1);
+    color: #000;
+}
+div.levelSelection button.selectedLevel.selectedLevel--4 {
+    background-color: rgba(0, 44, 175, 0.8);
+    color: #fff;
+}
+div.levelSelection button.selectedLevel.selectedLevel--5 {
+    background-color: rgba(11, 3, 139, 1);
+    color: #fff;
+}
+
 .levelHover {
     font-size: 0.8rem;
 }
diff --git a/VueApp/src/CTS/components/ServiceSelect.vue b/VueApp/src/CTS/components/ServiceSelect.vue
index 02e28621e..73a5ed6b6 100644
--- a/VueApp/src/CTS/components/ServiceSelect.vue
+++ b/VueApp/src/CTS/components/ServiceSelect.vue
@@ -95,13 +95,13 @@ void getServices()
                     side
                     v-if="scope.opt.thisWeek"
                 >
-                    <q-badge color="green"> This Week </q-badge>
+                    <q-badge color="positive"> This Week </q-badge>
                 </q-item-section>
                 <q-item-section
                     side
                     v-if="scope.opt.lastWeek && !scope.opt.thisWeek"
                 >
-                    <q-badge color="blue"> Last Week </q-badge>
+                    <q-badge color="primary"> Last Week </q-badge>
                 </q-item-section>
                 <q-item-section
                     side
diff --git a/VueApp/src/CTS/pages/AssessmentCompetency.vue b/VueApp/src/CTS/pages/AssessmentCompetency.vue
index 5c46c03f6..de520f301 100644
--- a/VueApp/src/CTS/pages/AssessmentCompetency.vue
+++ b/VueApp/src/CTS/pages/AssessmentCompetency.vue
@@ -5,6 +5,7 @@ import { useRoute } from "vue-router"
 import type { Competency, MilestoneLevel } from "@/CTS/types"
 import StudentSelect from "@/components/StudentSelect.vue"
 import LevelSelect from "@/CTS/components/LevelSelect.vue"
+import StatusBanner from "@/components/StatusBanner.vue"
 
 const route = useRoute()
 
@@ -63,7 +64,7 @@ const milestoneLevels = ref([
 function submitMilestone() {}
 </script>
 <template>
-    <h2>Competency Assessment</h2>
+    <h1>Competency Assessment</h1>
     <div class="row justify-between items-center q-mb-lg">
         <div class="col-12 col-md-6">
             <h2 class="epa text-weight-regular">{{ competency.number }} {{ competency.name }}</h2>
@@ -84,13 +85,13 @@ function submitMilestone() {}
         v-bind="studentMilestone"
         v-show="selectedStudentId > 0"
     >
-        <div
-            class="bg-red-5 text-white q-pa-sm rounded q-mb-md"
+        <StatusBanner
             v-if="submitErrors?.message?.length > 0"
+            type="error"
         >
             {{ submitErrors.message }}
             Please make sure you have selected a service, EPA, student, and a level on the entrustment scale.
-        </div>
+        </StatusBanner>
         <LevelSelect
             level-type="milestone"
             @level-change="(selectedLevelId: number) => (levelId = selectedLevelId)"
diff --git a/VueApp/src/CTS/pages/AssessmentEpa.vue b/VueApp/src/CTS/pages/AssessmentEpa.vue
index b79211e3d..2e213e25c 100644
--- a/VueApp/src/CTS/pages/AssessmentEpa.vue
+++ b/VueApp/src/CTS/pages/AssessmentEpa.vue
@@ -6,6 +6,7 @@ import type { Epa } from "@/CTS/types"
 import StudentSelect from "@/components/StudentSelect.vue"
 import ServiceSelectBox from "@/CTS/components/ServiceSelect.vue"
 import LevelSelect from "@/CTS/components/LevelSelect.vue"
+import StatusBanner from "@/components/StatusBanner.vue"
 
 //epas
 const epas = ref([]) as Ref<Epa[]>
@@ -123,21 +124,14 @@ watch(selectedStudentId, () => {
                 </div>
             </div>
 
-            <q-banner
-                inline-actions
-                rounded
+            <StatusBanner
                 v-if="success"
-                class="bg-green text-white q-mb-md"
+                v-model:visible="success"
+                type="success"
+                dismissible
             >
                 EPA Saved
-                <template #action>
-                    <q-btn
-                        flat
-                        label="Dismiss"
-                        @click="success = false"
-                    ></q-btn>
-                </template>
-            </q-banner>
+            </StatusBanner>
 
             <div v-if="serviceId != null && epa?.epaId">
                 <div class="row justify-between items-center q-mb-lg">
@@ -161,13 +155,13 @@ watch(selectedStudentId, () => {
                     v-bind="studentEpa"
                     v-show="selectedStudentId > 0"
                 >
-                    <div
-                        class="bg-red-5 text-white q-pa-sm rounded q-mb-md"
+                    <StatusBanner
                         v-if="submitErrors"
+                        type="error"
                     >
                         Please make sure you have selected a service, EPA, student, a level on the entrustment scale,
                         and entered a comment.
-                    </div>
+                    </StatusBanner>
                     <LevelSelect
                         level-type="epa"
                         @level-change="(selectedLevelId: number) => (levelId = selectedLevelId)"
diff --git a/VueApp/src/CTS/pages/AssessmentEpaEdit.vue b/VueApp/src/CTS/pages/AssessmentEpaEdit.vue
index ca1bd0a73..a73f67f33 100644
--- a/VueApp/src/CTS/pages/AssessmentEpaEdit.vue
+++ b/VueApp/src/CTS/pages/AssessmentEpaEdit.vue
@@ -5,6 +5,7 @@ import { useRoute, useRouter } from "vue-router"
 import { useFetch } from "@/composables/ViperFetch"
 import { useDateFunctions } from "@/composables/DateFunctions"
 import LevelSelect from "@/CTS/components/LevelSelect.vue"
+import StatusBanner from "@/components/StatusBanner.vue"
 
 const { formatDateForDateInput } = useDateFunctions()
 const route = useRoute()
@@ -73,24 +74,17 @@ getStudentEpa()
             class="col"
             v-show="studentEpa.encounterId"
         >
-            <q-banner
-                inline-actions
-                rounded
+            <StatusBanner
                 v-if="success"
-                class="bg-green text-white q-mb-md"
+                v-model:visible="success"
+                type="success"
+                dismissible
             >
                 EPA Saved
-                <template #action>
-                    <q-btn
-                        flat
-                        label="Dismiss"
-                        @click="success = false"
-                    ></q-btn>
-                </template>
-            </q-banner>
+            </StatusBanner>
             <div class="row justify-between items-end q-mb-lg">
                 <div class="col-12 col-md-6 col-lg-5">
-                    <h2 class="epa">{{ studentEpa.epaName }}</h2>
+                    <h1 class="epa">{{ studentEpa.epaName }}</h1>
                 </div>
                 <div class="col-12 col-md-6 col-lg-3 q-mr-md text-weight-medium text-body1">
                     Service: {{ studentEpa.serviceName }}
@@ -109,6 +103,7 @@ getStudentEpa()
                                     class="smallPhoto rounded-borders"
                                     loading="eager"
                                     :no-spinner="true"
+                                    :alt="`${studentEpa.studentName}'s photo`"
                                 ></q-img>
                             </q-avatar>
                         </div>
@@ -116,13 +111,13 @@ getStudentEpa()
                 </div>
             </div>
             <q-form @submit="submitEpa">
-                <div
-                    class="bg-red-5 text-white q-pa-sm rounded"
+                <StatusBanner
                     v-if="submitErrors?.message?.length > 0"
+                    type="error"
                 >
                     {{ submitErrors.message }}
                     Please make sure you have selected a service, EPA, student, and a level on the entrustment scale.
-                </div>
+                </StatusBanner>
                 <LevelSelect
                     level-type="epa"
                     @level-change="(selectedLevelId: number) => (levelId = selectedLevelId)"
@@ -171,7 +166,7 @@ getStudentEpa()
 </template>
 
 <style scoped>
-h2.epa {
+h1.epa {
     font-weight: 400;
     font-size: 2rem;
     margin-bottom: 4px;
diff --git a/VueApp/src/CTS/pages/AssessmentList.vue b/VueApp/src/CTS/pages/AssessmentList.vue
index f7b777669..2adfa1597 100644
--- a/VueApp/src/CTS/pages/AssessmentList.vue
+++ b/VueApp/src/CTS/pages/AssessmentList.vue
@@ -30,7 +30,7 @@ const searchForm = ref({
     dateTo: null,
 })
 const columns: QTableProps["columns"] = [
-    { name: "action", label: "", field: "id", align: "left" },
+    { name: "action", label: "Actions", field: "id", align: "left" },
     { name: "studentName", label: "Student", field: "studentName", align: "left", sortable: true },
     { name: "epaName", label: "EPA", field: "epaName", align: "left", sortable: true },
     { name: "serviceName", label: "Service", field: "serviceName", align: "left", sortable: true },
@@ -138,7 +138,7 @@ loadPageData()
 </script>
 
 <template>
-    <h2>View Assessments</h2>
+    <h1>View Assessments</h1>
 
     <q-form>
         <div class="row">
@@ -268,8 +268,9 @@ loadPageData()
     >
         <template #top-right>
             <q-input
-                borderless
+                outlined
                 dense
+                bg-color="white"
                 debounce="300"
                 v-model="filter"
                 placeholder="Search"
diff --git a/VueApp/src/CTS/pages/AuditList.vue b/VueApp/src/CTS/pages/AuditList.vue
index dc5d8c0bd..1303c2bc6 100644
--- a/VueApp/src/CTS/pages/AuditList.vue
+++ b/VueApp/src/CTS/pages/AuditList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Ref } from "vue"
 import type { QTableProps } from "quasar"
-import { ref, inject } from "vue"
+import { ref, inject, computed } from "vue"
 import { useFetch } from "@/composables/ViperFetch"
 import { useDateFunctions } from "@/composables/DateFunctions"
 import type { Person } from "@/CTS/types"
@@ -17,7 +17,7 @@ const actions = ref([]) as Ref<string[]>
 const areas = ref([]) as Ref<string[]>
 const showDetail = ref(false)
 
-const auditColumns: QTableProps["columns"] = [
+const baseColumns: QTableProps["columns"] = [
     { name: "area", label: "Area", field: "area", align: "left", sortable: true },
     { name: "action", label: "Action", field: "action", align: "left", sortable: true },
     {
@@ -30,8 +30,9 @@ const auditColumns: QTableProps["columns"] = [
     },
     { name: "modifiedBy", label: "By", field: "modifiedByName", align: "left", sortable: true },
     { name: "modifiedPerson", label: "Modified Person", field: "modifiedPersonName", align: "left", sortable: true },
-    { name: "detail", label: "Detail", field: "detail", align: "left", sortable: false },
 ]
+const detailColumn = { name: "detail", label: "Details", field: "detail", align: "left" as const, sortable: false }
+const auditColumns = computed(() => (showDetail.value ? [...baseColumns!, detailColumn] : baseColumns!))
 const loading = ref(false)
 const pagination = ref({ page: 1, sortBy: "timestamp", descending: true, rowsPerPage: 25, rowsNumber: 100 }) as Ref<any>
 const filter = ref({
@@ -66,10 +67,9 @@ async function loadAudit(page: number, perPage: number, sortBy: string, descendi
     const p = new URLSearchParams()
     if (filter.value.area !== null) p.append("area", filter.value.area)
     if (filter.value.action !== null) p.append("action", filter.value.action)
-    if (filter.value.modifiedBy?.personId !== null)
-        p.append("modifiedById", filter.value.modifiedBy?.personId.toString())
-    if (filter.value.modifiedPerson?.personId !== null)
-        p.append("modifiedPersonId", filter.value.modifiedPerson?.personId.toString())
+    if (filter.value.modifiedBy?.personId != null) p.append("modifiedById", filter.value.modifiedBy.personId.toString())
+    if (filter.value.modifiedPerson?.personId != null)
+        p.append("modifiedPersonId", filter.value.modifiedPerson.personId.toString())
     if (filter.value.dateFrom !== null) p.append("dateFrom", filter.value.dateFrom)
     if (filter.value.dateTo !== null) p.append("dateTo", filter.value.dateTo)
 
@@ -121,7 +121,7 @@ loadAreas()
 </script>
 
 <template>
-    <h2>View Audit Log</h2>
+    <h1>View Audit Log</h1>
     <q-form>
         <div class="row">
             <div class="col-12 col-md-6 col-lg-3">
@@ -203,6 +203,11 @@ loadAreas()
             </div>
         </div>
     </q-form>
+    <q-toggle
+        v-model="showDetail"
+        label="Show Details"
+        class="q-mb-sm"
+    />
     <q-table
         row-key="ctsAuditId"
         :rows="auditRows"
@@ -212,27 +217,17 @@ loadAreas()
         :rows-per-page-options="[5, 10, 15, 25, 50, 100]"
         @request="loadAuditRows"
     >
-        <template #header-cell-detail="props">
-            <q-th :props="props">
-                <q-toggle
-                    v-model="showDetail"
-                    label="Details"
-                />
-            </q-th>
-        </template>
         <template #body-cell-detail="props">
             <q-td
                 :props="props"
                 style="max-width: 300px"
             >
-                <template v-if="showDetail">
-                    <div
-                        v-for="(value, key) in props.row.detail2"
-                        :key="key"
-                    >
-                        {{ key }}: {{ value }}
-                    </div>
-                </template>
+                <div
+                    v-for="(value, key) in props.row.detail2"
+                    :key="key"
+                >
+                    {{ key }}: {{ value }}
+                </div>
             </q-td>
         </template>
     </q-table>
diff --git a/VueApp/src/CTS/pages/CompetenciesBundleReport.vue b/VueApp/src/CTS/pages/CompetenciesBundleReport.vue
index 5f12f28bd..6373535f5 100644
--- a/VueApp/src/CTS/pages/CompetenciesBundleReport.vue
+++ b/VueApp/src/CTS/pages/CompetenciesBundleReport.vue
@@ -226,7 +226,7 @@ onMounted(() => {
                         <q-td :props="props">
                             <div
                                 v-if="props.value.length === 0"
-                                class="text-grey-6"
+                                class="text-grey-8"
                             >
                                 None
                             </div>
@@ -238,7 +238,7 @@ onMounted(() => {
                                     v-for="bundle in props.value"
                                     :key="bundle.bundleId"
                                     color="info"
-                                    text-color="white"
+                                    text-color="dark"
                                     size="sm"
                                     dense
                                     class="q-ma-xs"
@@ -289,7 +289,7 @@ onMounted(() => {
                                     <div class="text-subtitle2 q-mb-xs">Associated Bundles:</div>
                                     <div
                                         v-if="props.row.bundles.length === 0"
-                                        class="text-grey-6"
+                                        class="text-grey-8"
                                     >
                                         None
                                     </div>
@@ -301,7 +301,7 @@ onMounted(() => {
                                             v-for="bundle in props.row.bundles"
                                             :key="bundle.bundleId"
                                             color="info"
-                                            text-color="white"
+                                            text-color="dark"
                                             size="sm"
                                             dense
                                         >
diff --git a/VueApp/src/CTS/pages/CourseStudents.vue b/VueApp/src/CTS/pages/CourseStudents.vue
index 7d914e28d..91d947579 100644
--- a/VueApp/src/CTS/pages/CourseStudents.vue
+++ b/VueApp/src/CTS/pages/CourseStudents.vue
@@ -3,7 +3,7 @@ import { ref } from "vue"
 const student = ref("")
 </script>
 <template>
-    <h2>Students for VET430 Lab 1 Challenging Communication - Simulated Lab with Actors and Video</h2>
+    <h1>Students for VET430 Lab 1 Challenging Communication - Simulated Lab with Actors and Video</h1>
 
     <h3>Add Student(s)</h3>
     <div class="row q-mb-md">
@@ -12,6 +12,7 @@ const student = ref("")
                 dense
                 options-dense
                 outlined
+                label="Student"
                 :options="['Student 1', 'Student 2']"
                 v-model="student"
             ></q-select>
@@ -28,22 +29,23 @@ const student = ref("")
             >
                 <thead>
                     <tr>
-                        <th>Assess Competency</th>
+                        <th class="text-center">Assess Competency</th>
                         <th class="text-left">Student</th>
                         <th class="text-left">Time</th>
                         <th class="text-center">Manually Added</th>
-                        <th class="text-left">Remove</th>
+                        <th class="text-center">Remove</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr>
-                        <td>
+                        <td class="text-center">
                             <q-btn
                                 dense
                                 flat
                                 icon="assignment"
                                 size="sm"
                                 color="primary"
+                                aria-label="Assess competency for Montserrat Armero"
                                 to="AssessmentCompetency?studentId=23631&sessionId="
                             ></q-btn>
                         </td>
@@ -54,26 +56,29 @@ const student = ref("")
                                 name="check"
                                 color="primary"
                                 size="sm"
+                                aria-label="Manually added"
                             ></q-icon>
                         </td>
-                        <td>
+                        <td class="text-center">
                             <q-btn
                                 dense
                                 icon="delete"
-                                color="red-5"
+                                color="negative"
                                 flat
                                 size="sm"
+                                aria-label="Remove Montserrat Armero"
                             ></q-btn>
                         </td>
                     </tr>
                     <tr>
-                        <td>
+                        <td class="text-center">
                             <q-btn
                                 dense
                                 flat
                                 icon="assignment"
                                 size="sm"
                                 color="primary"
+                                aria-label="Assess competency for Hailey Atwood"
                                 to="AssessmentCompetency?studentId=34123&sessionId="
                             ></q-btn>
                         </td>
@@ -84,26 +89,29 @@ const student = ref("")
                                 name="check"
                                 color="primary"
                                 size="sm"
+                                aria-label="Manually added"
                             ></q-icon>
                         </td>
-                        <td>
+                        <td class="text-center">
                             <q-btn
                                 dense
                                 icon="delete"
-                                color="red-5"
+                                color="negative"
                                 flat
                                 size="sm"
+                                aria-label="Remove Hailey Atwood"
                             ></q-btn>
                         </td>
                     </tr>
                     <tr>
-                        <td>
+                        <td class="text-center">
                             <q-btn
                                 dense
                                 flat
                                 icon="assignment"
                                 size="sm"
                                 color="primary"
+                                aria-label="Assess competency for Xander Avila"
                                 to="AssessmentCompetency?studentId=34158&sessionId="
                             ></q-btn>
                         </td>
@@ -114,15 +122,17 @@ const student = ref("")
                                 name="check"
                                 color="primary"
                                 size="sm"
+                                aria-label="Manually added"
                             ></q-icon>
                         </td>
-                        <td>
+                        <td class="text-center">
                             <q-btn
                                 dense
                                 icon="delete"
-                                color="red-5"
+                                color="negative"
                                 flat
                                 size="sm"
+                                aria-label="Remove Xander Avila"
                             ></q-btn>
                         </td>
                     </tr>
diff --git a/VueApp/src/CTS/pages/CtsHome.vue b/VueApp/src/CTS/pages/CtsHome.vue
index 8a8b092ea..7c3ec0696 100644
--- a/VueApp/src/CTS/pages/CtsHome.vue
+++ b/VueApp/src/CTS/pages/CtsHome.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-if="loadHome">
-        <h2>Competency Tracking System (CTS)</h2>
+        <h1>Competency Tracking System (CTS)</h1>
         <p>
             The Council on Education has mandated that veterinary graduates must have the basic scientific knowledge,
             skills and values to practice veterinary medicine, independently, at the time of graduation. At a minimum,
diff --git a/VueApp/src/CTS/pages/ManageBundleCompetencies.vue b/VueApp/src/CTS/pages/ManageBundleCompetencies.vue
index 8416466a1..0b9ecfd5e 100644
--- a/VueApp/src/CTS/pages/ManageBundleCompetencies.vue
+++ b/VueApp/src/CTS/pages/ManageBundleCompetencies.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, inject } from "vue"
 import type { Ref } from "vue"
-import type { QTableProps } from "quasar"
+import { useQuasar, type QTableProps } from "quasar"
 import { useRoute } from "vue-router"
 import { useFetch } from "@/composables/ViperFetch"
 import type {
@@ -14,6 +14,7 @@ import type {
     Role,
 } from "@/CTS/types"
 
+const $q = useQuasar()
 const { get, post, put, del } = useFetch()
 const apiUrl = inject("apiURL")
 const route = useRoute()
@@ -40,7 +41,7 @@ const columns = ref([
     { name: "order", label: "Order", field: "order", align: "left", sortable: true },
     { name: "competencyname", label: "Competency", field: "competencyName", align: "left", sortable: true },
     { name: "role", label: "Role", field: "roleName", align: "left", sortable: true },
-    { name: "action", label: "", field: "", align: "left" },
+    { name: "action", label: "Actions", field: "", align: "left" },
 ]) as Ref<QTableProps["columns"]>
 const paging = ref({ page: 1, sortBy: "enteredOn", descending: true, rowsPerPage: 0 }) as Ref<any>
 
@@ -140,11 +141,18 @@ async function updateBundleCompetency() {
         clearComp()
     }
 }
-async function removeBundleCompetency(comp: BundleCompetency) {
-    var result = await del(apiUrl + "cts/bundles/" + bundleId + "/competencies/" + comp.bundleCompetencyId)
-    if (result.success) {
-        loadBundleComps()
-    }
+function removeBundleCompetency(comp: BundleCompetency) {
+    $q.dialog({
+        title: "Confirm Delete",
+        message: "Are you sure you want to remove this competency from the bundle?",
+        cancel: true,
+        persistent: true,
+    }).onOk(async () => {
+        var result = await del(apiUrl + "cts/bundles/" + bundleId + "/competencies/" + comp.bundleCompetencyId)
+        if (result.success) {
+            loadBundleComps()
+        }
+    })
 }
 function clearComp() {
     bundleCompetency.value = structuredClone(defaultBundleCompetency)
@@ -185,28 +193,37 @@ function editGroup(group: BundleCompetencyGroup) {
     bundleCompetencyGroup.value = group
     showGroupForm.value = true
 }
-async function removeBundleCompetencyGroup() {
-    let success = (
-        await del(apiUrl + "cts/bundles/" + bundleId + "/groups/" + bundleCompetencyGroup.value.bundleCompetencyGroupId)
-    ).success
-    if (success) {
-        loadBundleComps()
-        clearBundleCompetencyGroup()
-    }
+function removeBundleCompetencyGroup() {
+    $q.dialog({
+        title: "Confirm Delete",
+        message: "Are you sure you want to remove this competency group from the bundle?",
+        cancel: true,
+        persistent: true,
+    }).onOk(async () => {
+        let success = (
+            await del(
+                apiUrl + "cts/bundles/" + bundleId + "/groups/" + bundleCompetencyGroup.value.bundleCompetencyGroupId,
+            )
+        ).success
+        if (success) {
+            loadBundleComps()
+            clearBundleCompetencyGroup()
+        }
+    })
 }
 
 load()
 </script>
 <template>
     <div v-if="bundle != null">
-        <h2>Competencies for Bundle {{ bundle?.name }}</h2>
+        <h1>Competencies for Bundle {{ bundle?.name }}</h1>
         <q-btn
             dense
             no-caps
             label="Add Group"
             @click="showGroupForm = true"
             class="q-mt-lg q-px-sm"
-            color="green"
+            color="positive"
             icon="add"
         ></q-btn>
         <div
@@ -253,7 +270,7 @@ load()
                         v-if="bundleCompetencyGroup?.bundleCompetencyGroupId"
                         type="button"
                         @click="removeBundleCompetencyGroup()"
-                        color="red-5"
+                        color="negative"
                         dense
                         class="col-5 col-sm-2 col-md-1 q-px-sm q-mr-md"
                         label="Delete"
@@ -304,7 +321,7 @@ load()
                     type="submit"
                     label="Add"
                     icon="add"
-                    color="green"
+                    color="positive"
                     class="col-auto q-ml-md q-px-sm"
                 ></q-btn>
             </div>
@@ -314,6 +331,18 @@ load()
     <q-dialog v-model="showCompForm">
         <q-card class="q-pa-lg">
             <q-form @submit="updateBundleCompetency()">
+                <q-card-section class="row items-center q-pb-none">
+                    <div class="text-h6">Edit Competency</div>
+                    <q-space />
+                    <q-btn
+                        icon="close"
+                        flat
+                        round
+                        dense
+                        aria-label="Close dialog"
+                        v-close-popup
+                    />
+                </q-card-section>
                 <q-card-section>
                     <div class="row">
                         <div class="col-12">
@@ -423,7 +452,7 @@ load()
                 <q-icon
                     v-if="props.row.levels.findIndex((l: any) => l.levelId === level.levelId) > -1"
                     name="check"
-                    color="green"
+                    color="positive"
                 ></q-icon>
             </q-td>
         </template>
@@ -441,7 +470,7 @@ load()
                     dense
                     size="sm"
                     icon="delete"
-                    color="red-5"
+                    color="negative"
                     @click="removeBundleCompetency(props.row)"
                 ></q-btn>
             </q-td>
diff --git a/VueApp/src/CTS/pages/ManageBundles.vue b/VueApp/src/CTS/pages/ManageBundles.vue
index 65431a18e..0b5cf5dc8 100644
--- a/VueApp/src/CTS/pages/ManageBundles.vue
+++ b/VueApp/src/CTS/pages/ManageBundles.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref, inject } from "vue"
 import type { Ref } from "vue"
-import type { QTableProps } from "quasar"
+import { useQuasar, type QTableProps } from "quasar"
 import { useFetch } from "@/composables/ViperFetch"
+const $q = useQuasar()
 const { get, post, put, del } = useFetch()
 
 import type { Bundle, Role } from "@/CTS/types"
@@ -26,7 +27,7 @@ const bundleRoles = ref([]) as Ref<number[]>
 const bundles = ref([]) as Ref<Bundle[]>
 const paging = ref({ page: 1, sortBy: "enteredOn", descending: true, rowsPerPage: 0 }) as Ref<any>
 const columns: QTableProps["columns"] = [
-    { name: "action", label: "", field: "id", align: "left" },
+    { name: "action", label: "Actions", field: "id", align: "left" },
     { name: "name", label: "Name", field: "name", align: "left", sortable: true },
     { name: "compcount", label: "Competency Count", field: "competencyCount", align: "left", sortable: true },
     { name: "roles", label: "Roles", field: "roles", align: "left", sortable: true },
@@ -72,17 +73,24 @@ function clearBundle() {
     load()
 }
 
-async function removeBundle() {
-    let r = await del(apiUrl + "cts/bundles/" + bundle.value.bundleId)
-    if (r.success) {
-        clearBundle()
-    }
+function removeBundle() {
+    $q.dialog({
+        title: "Confirm Delete",
+        message: "Are you sure you want to delete this bundle?",
+        cancel: true,
+        persistent: true,
+    }).onOk(async () => {
+        let r = await del(apiUrl + "cts/bundles/" + bundle.value.bundleId)
+        if (r.success) {
+            clearBundle()
+        }
+    })
 }
 
 load()
 </script>
 <template>
-    <h2>Manage Bundles</h2>
+    <h1>Manage Bundles</h1>
     <q-card flat>
         <q-form @submit="save()">
             <h3>{{ bundle?.bundleId == null ? "Add Bundle" : "Update Bundle" }}</h3>
@@ -141,7 +149,7 @@ load()
                     v-if="bundle?.bundleId"
                     type="button"
                     @click="clearBundle()"
-                    color="primary"
+                    color="secondary"
                     dense
                     class="col-5 col-sm-2 col-md-1 q-px-sm q-mr-md"
                     label="Cancel"
@@ -150,7 +158,7 @@ load()
                     v-if="bundle?.bundleId"
                     type="button"
                     @click="removeBundle()"
-                    color="red-5"
+                    color="negative"
                     dense
                     class="col-5 col-sm-2 col-md-1 q-px-sm q-mr-md"
                     label="Delete"
@@ -176,6 +184,7 @@ load()
                     dense
                     size="sm"
                     icon="edit"
+                    :aria-label="`Edit bundle: ${props.row.name}`"
                     @click="selectBundle(props.row)"
                     color="primary"
                 ></q-btn>
@@ -199,6 +208,7 @@ load()
                     class="q-mr-md"
                     icon="list"
                     color="primary"
+                    :aria-label="`View competencies for ${props.row.name}`"
                     :to="'ManageBundleCompetencies?bundleId=' + props.row.bundleId"
                 ></q-btn>
                 {{ props.row.competencyCount }}
@@ -209,7 +219,7 @@ load()
                 <q-icon
                     v-if="props.row.clinical"
                     name="check"
-                    color="green"
+                    color="positive"
                 />
             </q-td>
         </template>
@@ -218,7 +228,7 @@ load()
                 <q-icon
                     v-if="props.row.assessment"
                     name="check"
-                    color="green"
+                    color="positive"
                 />
             </q-td>
         </template>
@@ -227,7 +237,7 @@ load()
                 <q-icon
                     v-if="props.row.milestone"
                     name="check"
-                    color="green"
+                    color="positive"
                 />
             </q-td>
         </template>
diff --git a/VueApp/src/CTS/pages/ManageCompetencies.vue b/VueApp/src/CTS/pages/ManageCompetencies.vue
index 438761e06..3af43934c 100644
--- a/VueApp/src/CTS/pages/ManageCompetencies.vue
+++ b/VueApp/src/CTS/pages/ManageCompetencies.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { inject, ref, watch } from "vue"
 import type { Ref } from "vue"
-import type { QTreeNode } from "quasar"
+import { useQuasar, type QTreeNode } from "quasar"
 import { useFetch } from "@/composables/ViperFetch"
 import type { Competency, Domain } from "@/CTS/types"
 
+const $q = useQuasar()
 const { get, post, put, del } = useFetch()
 const apiUrl = inject("apiURL")
 const domains = ref([]) as Ref<Domain[]>
@@ -30,12 +31,15 @@ const showDescriptions = ref(false)
 const tree = ref(null) as Ref<any>
 
 async function load() {
-    Promise.resolve([
+    const [, , hierarchyResult] = await Promise.all([
         get(apiUrl + "cts/domains").then((r) => (domains.value = r.result)),
         get(apiUrl + "cts/competencies").then((r) => (competencies.value = r.result)),
+        get(apiUrl + "cts/competencies/hierarchy"),
     ])
-    await get(apiUrl + "cts/competencies/hierarchy").then((r) => (competencyHierachy.value = r.result))
-    treeNodes.value = competencyHierachy.value.map(createTreeNode)
+    if (hierarchyResult?.result) {
+        competencyHierachy.value = hierarchyResult.result
+        treeNodes.value = competencyHierachy.value.map(createTreeNode)
+    }
     loaded.value = true
 }
 
@@ -60,12 +64,19 @@ async function submitComp() {
     }
 }
 
-async function deleteComp() {
-    const r = await del(apiUrl + "cts/competencies/" + selectedComp.value.competencyId, selectedComp.value)
-    if (r.success) {
-        await load()
-        clearComp()
-    }
+function deleteComp() {
+    $q.dialog({
+        title: "Confirm Delete",
+        message: "Are you sure you want to delete this competency?",
+        cancel: true,
+        persistent: true,
+    }).onOk(async () => {
+        const r = await del(apiUrl + "cts/competencies/" + selectedComp.value.competencyId, selectedComp.value)
+        if (r.success) {
+            await load()
+            clearComp()
+        }
+    })
 }
 
 function addChild(comp: Competency) {
@@ -111,7 +122,7 @@ watch(
 load()
 </script>
 <template>
-    <h2>Manage Competencies</h2>
+    <h1>Manage Competencies</h1>
     <q-dialog
         v-model="showForm"
         @hide="clearComp()"
@@ -120,6 +131,18 @@ load()
             style="width: 500px; max-width: 80vw"
             class="q-pa-sm"
         >
+            <q-card-section class="row items-center q-pb-none">
+                <div class="text-h6">{{ selectedComp?.competencyId ? "Edit" : "Add" }} Competency</div>
+                <q-space />
+                <q-btn
+                    icon="close"
+                    flat
+                    round
+                    dense
+                    aria-label="Close dialog"
+                    v-close-popup
+                />
+            </q-card-section>
             <q-form
                 @submit="submitComp"
                 v-model="selectedComp"
@@ -210,7 +233,7 @@ load()
                         no-caps
                         label="Delete"
                         v-if="selectedComp.competencyId != null"
-                        color="red-5"
+                        color="negative"
                         class="q-px-md q-mx-md col"
                         @click="deleteComp()"
                     ></q-btn>
@@ -254,49 +277,58 @@ load()
                 dense
                 no-caps
                 class="q-px-sm q-ml-md"
-                color="green"
+                color="positive"
                 icon="add"
                 label="Add Competency"
                 @click="showForm = true"
             ></q-btn>
         </span>
     </h3>
+    <div
+        v-if="loaded && treeNodes.length === 0"
+        class="text-grey-8 q-pa-md"
+        role="status"
+    >
+        No competencies found.
+    </div>
     <q-tree
         :nodes="treeNodes"
         node-key="competencyId"
         v-model:expanded="expanded"
         dense
-        v-if="loaded"
+        v-if="loaded && treeNodes.length > 0"
         ref="tree"
     >
         <template #default-header="prop">
             <div class="row full-width items-center">
                 <div
-                    :class="'col-auto q-mr-sm ' + (prop.node.children.length == 0 ? 'q-ml-sm' : '')"
+                    :class="'col-auto q-mr-xs ' + (prop.node.children.length == 0 ? 'q-ml-sm' : '')"
                     @click.stop
                 >
                     <q-btn
                         dense
                         flat
-                        size="sm"
+                        size="1.4rem"
                         icon="add"
-                        color="green"
+                        color="secondary"
                         @click="addChild(prop.node.comp)"
                         title="Add child of this competency"
+                        aria-label="Add child of this competency"
                     ></q-btn>
                 </div>
                 <div
-                    class="col-auto q-mr-sm"
+                    class="col-auto q-mr-xs"
                     @click.stop
                 >
                     <q-btn
                         dense
                         flat
-                        size="sm"
+                        size="1.2rem"
                         icon="edit"
-                        color="grey"
+                        color="secondary"
                         @click="editComp(prop.node.comp)"
-                        title="Edit"
+                        title="Edit competency"
+                        aria-label="Edit competency"
                     ></q-btn>
                 </div>
                 <div class="col-9 col-sm-10">
@@ -305,7 +337,7 @@ load()
                     }}</span>
                     <q-icon
                         name="school"
-                        color="green"
+                        color="positive"
                         v-if="prop.node.comp.canLinkToStudent"
                         class="q-ml-md"
                     ></q-icon>
diff --git a/VueApp/src/CTS/pages/ManageCourseCompetencies.vue b/VueApp/src/CTS/pages/ManageCourseCompetencies.vue
index 2aa40c69f..101e355a6 100644
--- a/VueApp/src/CTS/pages/ManageCourseCompetencies.vue
+++ b/VueApp/src/CTS/pages/ManageCourseCompetencies.vue
@@ -49,7 +49,12 @@ function getSessions() {
 function getTerms() {
     get(apiUrl + "curriculum/terms")
         .then((r) => (terms.value = r.result))
-        .then(() => (selectedTerm.value = storedTerm.value || terms.value[0]))
+        .then(() => {
+            const stored = storedTerm.value
+            selectedTerm.value =
+                (stored?.termCode ? terms.value.find((t: Term) => t.termCode === stored.termCode) : null) ||
+                terms.value[0]
+        })
 }
 
 function getRoles() {
diff --git a/VueApp/src/CTS/pages/ManageDomains.vue b/VueApp/src/CTS/pages/ManageDomains.vue
index 1a0f924d8..fe9f55181 100644
--- a/VueApp/src/CTS/pages/ManageDomains.vue
+++ b/VueApp/src/CTS/pages/ManageDomains.vue
@@ -7,8 +7,11 @@ type DomainData = {
 }
 import type { Ref } from "vue"
 import { ref, inject } from "vue"
+import { useQuasar } from "quasar"
 import { useFetch } from "@/composables/ViperFetch"
 
+const $q = useQuasar()
+
 const domain = ref({
     domainId: 0,
     order: null,
@@ -38,60 +41,60 @@ async function save() {
 function clearDomain() {
     domain.value = { domainId: 0, order: null, name: "", description: "" }
 }
-async function deleteDomain() {
-    const { del } = useFetch()
-    const r = await del(baseUrl + "/" + domain.value.domainId)
-    if (r.success) {
-        clearDomain()
-        await getDomains()
-    }
+function deleteDomain() {
+    $q.dialog({
+        title: "Confirm Delete",
+        message: "Are you sure you want to delete this domain?",
+        cancel: true,
+        persistent: true,
+    }).onOk(async () => {
+        const { del } = useFetch()
+        const r = await del(baseUrl + "/" + domain.value.domainId)
+        if (r.success) {
+            clearDomain()
+            await getDomains()
+        }
+    })
 }
 
 getDomains()
 </script>
 
 <template>
-    <h2>Manage Domains</h2>
+    <h1>Manage Domains</h1>
     <q-form
         method="post"
         @submit="save"
     >
-        <q-label class="row items-center">
-            <span class="col col-md-2 col-lg-1">Domain:</span>
+        <div class="row q-gutter-sm q-mb-sm">
             <q-input
                 outlined
                 dense
-                type="text"
-                name="name"
+                label="Domain"
                 v-model="domain.name"
-                size="30"
                 maxlength="250"
-                class="col col-md-5 col-lg-3"
+                class="col-12 col-md-5 col-lg-3"
             />
-        </q-label>
-        <q-label class="row items-center">
-            <span class="col col-md-2 col-lg-1">Order:</span>
             <q-input
                 outlined
                 dense
+                label="Order"
                 type="number"
-                name="order"
                 v-model="domain.order"
                 step="1"
-                class="col col-1"
+                class="col-4 col-md-1"
             />
-        </q-label>
-        <q-label class="row items-start">
-            <span class="col col-md-2 col-lg-1 q-pt-sm">Description:</span>
+        </div>
+        <div class="row q-mb-sm">
             <q-input
                 outlined
                 dense
+                label="Description"
                 type="textarea"
-                name="description"
                 v-model="domain.description"
-                class="col col-md-5 col-lg-3"
-            ></q-input>
-        </q-label>
+                class="col-12 col-md-5 col-lg-3"
+            />
+        </div>
         <div class="row q-mt-sm">
             <q-btn
                 type="submit"
@@ -107,7 +110,7 @@ getDomains()
                 label="Delete"
                 no-caps
                 dense
-                color="red-7"
+                color="negative"
                 class="col col-4 col-lg-1 q-ml-md"
             ></q-btn>
             <q-btn
@@ -117,37 +120,37 @@ getDomains()
                 no-caps
                 dense
                 color="info"
+                text-color="dark"
                 class="col col-4 col-lg-1 q-ml-md"
             ></q-btn>
         </div>
     </q-form>
 
     <div class="row">
-        <q-list class="col col-12 col-md-10 col-lg-6">
-            <q-item-label
-                header
-                class="text-primary"
-                ><h3>Domains</h3></q-item-label
-            >
-            <q-item
-                v-for="d in domains"
-                :key="d.domainId"
-            >
-                <q-item-section
-                    top
-                    side
+        <div class="col col-12 col-md-10 col-lg-6">
+            <h3 class="text-primary q-px-md">Domains</h3>
+            <q-list>
+                <q-item
+                    v-for="d in domains"
+                    :key="d.domainId"
                 >
-                    <q-btn
-                        icon="edit"
-                        dense
-                        flat
-                        class="secondary"
-                        @click="domain = d"
-                    ></q-btn>
-                </q-item-section>
-                <q-item-section top>{{ d.order }}. {{ d.name }}</q-item-section>
-                <q-item-section>{{ d.description }}</q-item-section>
-            </q-item>
-        </q-list>
+                    <q-item-section
+                        top
+                        side
+                    >
+                        <q-btn
+                            icon="edit"
+                            dense
+                            flat
+                            class="secondary"
+                            :aria-label="`Edit domain: ${d.name}`"
+                            @click="domain = d"
+                        ></q-btn>
+                    </q-item-section>
+                    <q-item-section top>{{ d.order }}. {{ d.name }}</q-item-section>
+                    <q-item-section>{{ d.description }}</q-item-section>
+                </q-item>
+            </q-list>
+        </div>
     </div>
 </template>
diff --git a/VueApp/src/CTS/pages/ManageEpas.vue b/VueApp/src/CTS/pages/ManageEpas.vue
index e1950d875..702e8c10d 100644
--- a/VueApp/src/CTS/pages/ManageEpas.vue
+++ b/VueApp/src/CTS/pages/ManageEpas.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import type { Ref } from "vue"
 import { ref, inject } from "vue"
+import { useQuasar } from "quasar"
 import { useFetch } from "@/composables/ViperFetch"
 import type { Epa, Service } from "@/CTS/types"
 
+const $q = useQuasar()
+
 const showForm = ref(false)
 const epas = ref([]) as Ref<Epa[]>
 const services = ref([]) as Ref<Service[]>
@@ -58,12 +61,19 @@ async function submitEpa() {
         getEpas()
     }
 }
-async function deleteEpa() {
-    const { del } = useFetch()
-    const r = await del(epaUrl + "/" + epa.value.epaId)
-    if (r.success) {
-        getEpas()
-    }
+function deleteEpa() {
+    $q.dialog({
+        title: "Confirm Delete",
+        message: "Are you sure you want to delete this EPA?",
+        cancel: true,
+        persistent: true,
+    }).onOk(async () => {
+        const { del } = useFetch()
+        const r = await del(epaUrl + "/" + epa.value.epaId)
+        if (r.success) {
+            getEpas()
+        }
+    })
 }
 async function clearEpa() {
     epa.value = { epaId: null, order: null, name: "", description: "", active: false, services: [] }
@@ -75,6 +85,7 @@ getEpas()
 </script>
 
 <template>
+    <h1>Manage EPAs</h1>
     <q-form
         @submit="submitEpa"
         v-if="showForm"
@@ -151,7 +162,7 @@ getEpas()
                 no-caps
                 type="button"
                 label="Delete EPA"
-                color="red"
+                color="negative"
                 @click="deleteEpa()"
                 v-if="epa?.epaId"
                 class="q-mt-sm q-ml-lg col col-4 col-md-4 col-lg-1"
@@ -165,7 +176,7 @@ getEpas()
             no-caps
             size="md"
             label="Add EPA"
-            color="green"
+            color="positive"
             @click="showForm = true"
         />
     </div>
@@ -226,13 +237,14 @@ getEpas()
                                 size="md"
                                 icon="edit"
                                 color="primary"
+                                :aria-label="`Edit EPA: ${epaItem.name}`"
                                 @click="selectEpa(epaItem)"
                             />
                         </span>
                         <span class="col">
                             <q-icon
                                 :name="epaItem.active ? 'check' : 'close'"
-                                :color="epaItem.active ? 'green' : 'red'"
+                                :color="epaItem.active ? 'positive' : 'negative'"
                                 size="md"
                             />
                         </span>
diff --git a/VueApp/src/CTS/pages/ManageLevels.vue b/VueApp/src/CTS/pages/ManageLevels.vue
index d9fdbd383..dc79aac3f 100644
--- a/VueApp/src/CTS/pages/ManageLevels.vue
+++ b/VueApp/src/CTS/pages/ManageLevels.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import type { Ref } from "vue"
 import { ref, inject } from "vue"
+import { useQuasar } from "quasar"
 import { useFetch } from "@/composables/ViperFetch"
 
+const $q = useQuasar()
+
 type Level = {
     levelId: number
     levelName: string
@@ -68,12 +71,19 @@ async function submitLevel() {
     }
 }
 
-async function deleteLevel() {
-    const { del } = useFetch()
-    const r = await del(levelUrl + "/" + level.value.levelId)
-    if (r.success) {
-        loadLevels()
-    }
+function deleteLevel() {
+    $q.dialog({
+        title: "Confirm Delete",
+        message: "Are you sure you want to delete this level?",
+        cancel: true,
+        persistent: true,
+    }).onOk(async () => {
+        const { del } = useFetch()
+        const r = await del(levelUrl + "/" + level.value.levelId)
+        if (r.success) {
+            loadLevels()
+        }
+    })
 }
 
 function filterLevels() {
@@ -98,11 +108,16 @@ function editLevel(l: Level) {
     showForm.value = true
 }
 
+function clearLevel() {
+    level.value = structuredClone(emptyLevel) as Level
+    showForm.value = false
+}
+
 loadLevels()
 </script>
 
 <template>
-    <h2>Manage Levels</h2>
+    <h1>Manage Levels</h1>
     <q-form
         action=""
         @submit="submitLevel"
@@ -129,7 +144,7 @@ loadLevels()
                 @click="showForm = true"
             ></q-btn>
         </div>
-        <div v-if="Object.keys(level).length">
+        <div v-if="showForm">
             {{ level?.levelId ? "Update" : "Add" }} Level
             <div class="row">
                 <q-toggle
@@ -182,11 +197,22 @@ loadLevels()
                     class="q-mt-sm col col-4 col-md-1"
                 ></q-btn>
                 <q-btn
+                    v-if="level?.levelId"
+                    dense
+                    no-caps
+                    type="button"
+                    label="Cancel"
+                    color="secondary"
+                    class="q-mt-sm q-ml-lg col col-4 col-md-1"
+                    @click="clearLevel"
+                ></q-btn>
+                <q-btn
+                    v-if="level?.levelId"
                     dense
                     no-caps
                     type="button"
                     label="Delete Level"
-                    color="red"
+                    color="negative"
                     class="q-mt-sm q-ml-lg col col-4 col-md-1"
                     @click="deleteLevel"
                 ></q-btn>
@@ -213,9 +239,9 @@ loadLevels()
                     <q-btn
                         dense
                         no-caps
-                        size="md"
                         color="primary"
                         icon="edit"
+                        :aria-label="`Edit level: ${l.levelName}`"
                         @click="editLevel(l)"
                     ></q-btn>
                 </q-item-section>
@@ -225,7 +251,7 @@ loadLevels()
                 >
                     <q-icon
                         :name="l.active ? 'check' : 'close'"
-                        :color="l.active ? 'green' : 'red'"
+                        :color="l.active ? 'positive' : 'negative'"
                     ></q-icon>
                 </q-item-section>
                 <q-item-section
diff --git a/VueApp/src/CTS/pages/ManageMilestones.vue b/VueApp/src/CTS/pages/ManageMilestones.vue
index 606322d90..9e021c7bc 100644
--- a/VueApp/src/CTS/pages/ManageMilestones.vue
+++ b/VueApp/src/CTS/pages/ManageMilestones.vue
@@ -15,7 +15,7 @@ const milestoneLevels = ref([]) as Ref<MilestoneLevel[]>
 const loaded = ref(false)
 
 async function load() {
-    await Promise.resolve([
+    await Promise.all([
         get(apiUrl + "cts/levels?milestone=true").then((r) => (levels.value = r.result)),
         get(apiUrl + "cts/milestones").then((r) => (milestones.value = r.result)),
         get(apiUrl + "cts/competencies").then((r) => (competencies.value = r.result)),
@@ -74,6 +74,7 @@ async function createMilestone() {
                 clinical: false,
                 milestone: true,
                 name: "Milestone " + comp.number + " " + comp.name,
+                competencyCount: 0,
                 roles: [],
             }
             let r = await post(apiUrl + "cts/bundles/", bundle)
@@ -101,7 +102,7 @@ async function createMilestone() {
 load()
 </script>
 <template>
-    <h2>Edit Milestones</h2>
+    <h1>Edit Milestones</h1>
 
     <q-form @submit="createMilestone">
         <div class="row items-center">
@@ -125,7 +126,7 @@ load()
                     icon="add"
                     label="Add Milestone"
                     type="submit"
-                    color="green"
+                    color="positive"
                 ></q-btn>
             </div>
         </div>
diff --git a/VueApp/src/CTS/pages/ManageRoles.vue b/VueApp/src/CTS/pages/ManageRoles.vue
index 46f06f731..72935501a 100644
--- a/VueApp/src/CTS/pages/ManageRoles.vue
+++ b/VueApp/src/CTS/pages/ManageRoles.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { ref, inject } from "vue"
 import type { Ref } from "vue"
+import { useQuasar } from "quasar"
 import { useFetch } from "@/composables/ViperFetch"
+
+const $q = useQuasar()
 const { get, post, put, del } = useFetch()
 
 const apiUrl = inject("apiURL")
-const role = ref({}) as Ref<any>
+const role = ref({ roleId: 0, name: "" }) as Ref<any>
 const roles = ref([]) as Ref<any[]>
 
 async function load() {
@@ -22,21 +25,28 @@ async function save() {
     }
 }
 
-async function removeRole() {
-    let r = await del(apiUrl + "cts/roles/" + role.value.roleId)
-    if (r.success) {
-        clearRole()
-    }
+function removeRole() {
+    $q.dialog({
+        title: "Confirm Delete",
+        message: "Are you sure you want to delete this role?",
+        cancel: true,
+        persistent: true,
+    }).onOk(async () => {
+        let r = await del(apiUrl + "cts/roles/" + role.value.roleId)
+        if (r.success) {
+            clearRole()
+        }
+    })
 }
 
 function clearRole() {
-    role.value = {}
+    role.value = { roleId: 0, name: "" }
 }
 
 load()
 </script>
 <template>
-    <h2>Add/Edit Roles</h2>
+    <h1>Add/Edit Roles</h1>
     <q-form
         @submit="save()"
         class="q-mb-md"
@@ -62,7 +72,7 @@ load()
                 v-if="role?.roleId"
                 type="button"
                 @click="clearRole()"
-                color="primary"
+                color="secondary"
                 dense
                 class="col-5 col-sm-2 col-md-1 q-px-sm q-mr-md"
                 label="Cancel"
@@ -71,7 +81,7 @@ load()
                 v-if="role?.roleId"
                 type="button"
                 @click="removeRole()"
-                color="red-5"
+                color="negative"
                 dense
                 class="col-5 col-sm-2 col-md-1 q-px-sm q-mr-md"
                 label="Delete"
@@ -89,6 +99,7 @@ load()
             size="sm"
             icon="edit"
             color="primary"
+            :aria-label="`Edit role: ${r.name}`"
             @click="role = r"
             class="q-mt-xs q-mr-md"
         ></q-btn>
diff --git a/VueApp/src/CTS/pages/ManageSessionCompetencies.vue b/VueApp/src/CTS/pages/ManageSessionCompetencies.vue
index 0f691b956..d02f056d0 100644
--- a/VueApp/src/CTS/pages/ManageSessionCompetencies.vue
+++ b/VueApp/src/CTS/pages/ManageSessionCompetencies.vue
@@ -177,14 +177,27 @@ if (!courseId || !sessionId) {
 }
 </script>
 <template>
-    <h2>Competencies for {{ session.courseTitle }} {{ session.type }} {{ session.typeOrder }} {{ session.title }}</h2>
+    <h1>Competencies for {{ session.courseTitle }} {{ session.type }} {{ session.typeOrder }} {{ session.title }}</h1>
 
     <q-dialog v-model="showCompForm">
         <q-card
             style="width: 800px; max-width: 80vw"
             class="q-pa-md"
         >
-            <h3>{{ compAddUpdate?.sessionCompetencyId ? "Update" : "Add" }} Session Competency</h3>
+            <q-card-section class="row items-center q-pb-none">
+                <div class="text-h6">
+                    {{ compAddUpdate?.sessionCompetencyId ? "Update" : "Add" }} Session Competency
+                </div>
+                <q-space />
+                <q-btn
+                    icon="close"
+                    flat
+                    round
+                    dense
+                    aria-label="Close dialog"
+                    v-close-popup
+                />
+            </q-card-section>
             <q-form @submit="submitSessionComp">
                 <div class="row">
                     <div class="col-12">
@@ -276,7 +289,7 @@ if (!courseId || !sessionId) {
             <q-btn
                 dense
                 no-caps
-                color="green"
+                color="positive"
                 icon="add"
                 label="Add Competency"
                 class="q-px-md"
@@ -325,7 +338,7 @@ if (!courseId || !sessionId) {
                                 <td>
                                     <q-icon
                                         name="check"
-                                        color="green"
+                                        color="positive"
                                         v-if="lc.levels.findIndex((l: Level) => l.levelName == level) >= 0"
                                     ></q-icon>
                                 </td>
@@ -346,7 +359,7 @@ if (!courseId || !sessionId) {
                             <td class="text-center">
                                 <q-icon
                                     name="check"
-                                    color="green"
+                                    color="positive"
                                     v-if="c.levels.findIndex((l: Level) => l.levelName == level) >= 0"
                                 ></q-icon>
                             </td>
@@ -364,7 +377,7 @@ if (!courseId || !sessionId) {
                                 dense
                                 size="sm"
                                 icon="delete"
-                                color="red-5"
+                                color="negative"
                                 @click="delComp(c)"
                             ></q-btn>
                         </td>
diff --git a/VueApp/src/CTS/pages/MyAssessmentCharts.vue b/VueApp/src/CTS/pages/MyAssessmentCharts.vue
index 4ea69ba73..1a4007c75 100644
--- a/VueApp/src/CTS/pages/MyAssessmentCharts.vue
+++ b/VueApp/src/CTS/pages/MyAssessmentCharts.vue
@@ -108,7 +108,7 @@ ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend
 </script>
 <template>
     <div v-if="epaAssessments.length">
-        <h2>Assessments for {{ epaAssessments[0]?.studentName }}</h2>
+        <h1>Assessments for {{ epaAssessments[0]?.studentName }}</h1>
         <div class="row">
             <div class="col-12 col-lg-2"><strong>EPA</strong></div>
             <div class="col-12 col-lg-4"><strong>Level</strong></div>
diff --git a/VueApp/src/CTS/router/index.ts b/VueApp/src/CTS/router/index.ts
index 397dc7c80..f78847ea2 100644
--- a/VueApp/src/CTS/router/index.ts
+++ b/VueApp/src/CTS/router/index.ts
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from "vue-router"
 import { routes } from "./routes"
 import { useRequireLogin } from "@/composables/RequireLogin"
 import { checkHasOnePermission } from "@/composables/CheckPagePermission"
+import { useRouteFocus } from "@/composables/use-route-focus"
 
 const baseUrl = import.meta.env.VITE_VIPER_HOME
 const router = createRouter({
@@ -24,4 +25,6 @@ router.beforeEach(async (to) => {
     }
 })
 
+useRouteFocus(router)
+
 export { router }
diff --git a/VueApp/src/components/StatusBanner.vue b/VueApp/src/components/StatusBanner.vue
index a83128da4..ae5a7b361 100644
--- a/VueApp/src/components/StatusBanner.vue
+++ b/VueApp/src/components/StatusBanner.vue
@@ -4,6 +4,7 @@
         :class="bannerClass"
         :role="ariaRole"
         rounded
+        inline-actions
     >
         <template #avatar>
             <q-icon
@@ -35,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue"
+import { computed } from "vue"
 
 type BannerType = "success" | "error" | "warning" | "info"
 type LiveMode = "off" | "polite" | "assertive"
@@ -52,7 +53,7 @@ const {
     dismissible?: boolean
 }>()
 
-const visible = ref(true)
+const visible = defineModel<boolean>("visible", { default: true })
 
 const typeConfig: Record<BannerType, { icon: string; bg: string; iconCls: string }> = {
     success: { icon: "check_circle", bg: "status-banner-success", iconCls: "text-positive" },
diff --git a/VueApp/src/layouts/ViperLayoutSimple.vue b/VueApp/src/layouts/ViperLayoutSimple.vue
index 157f0baa8..ad98613ab 100644
--- a/VueApp/src/layouts/ViperLayoutSimple.vue
+++ b/VueApp/src/layouts/ViperLayoutSimple.vue
@@ -9,6 +9,8 @@ export type BreadCrumb = {
     name: string
 }
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps<{
     breadcrumbs?: BreadCrumb[]
 }>()
diff --git a/web/Areas/CTS/Controllers/CompetencyController.cs b/web/Areas/CTS/Controllers/CompetencyController.cs
index b5637ed25..8c729ab04 100644
--- a/web/Areas/CTS/Controllers/CompetencyController.cs
+++ b/web/Areas/CTS/Controllers/CompetencyController.cs
@@ -79,7 +79,7 @@ public async Task<ActionResult<List<CompetencyHierarchyDto>>> GetCompetencyHiera
                     var parent = allCompDtos.FirstOrDefault(c => c.CompetencyId == comp.ParentId);
                     if (parent != null)
                     {
-                        ((List<CompetencyHierarchyDto>)parent.Children).Add(comp);
+                        parent.Children.Add(comp);
                     }
                 }
             }
diff --git a/web/Areas/CTS/Models/CompetencyHierarchyDto.cs b/web/Areas/CTS/Models/CompetencyHierarchyDto.cs
index a5d85ae5e..2c91cf157 100644
--- a/web/Areas/CTS/Models/CompetencyHierarchyDto.cs
+++ b/web/Areas/CTS/Models/CompetencyHierarchyDto.cs
@@ -11,7 +11,7 @@ public class CompetencyHierarchyDto
         public bool CanLinkToStudent { get; set; }
         public string? DomainName { get; set; }
         public int? DomainOrder { get; set; }
-        public IEnumerable<CompetencyHierarchyDto> Children { get; set; } = new List<CompetencyHierarchyDto>();
+        public List<CompetencyHierarchyDto> Children { get; set; } = [];
         public string Type
         {
             get
diff --git a/web/Areas/CTS/Views/AssessmentCharts.cshtml b/web/Areas/CTS/Views/AssessmentCharts.cshtml
index 6085f801e..14892bff4 100644
--- a/web/Areas/CTS/Views/AssessmentCharts.cshtml
+++ b/web/Areas/CTS/Views/AssessmentCharts.cshtml
@@ -1,6 +1,9 @@
 @*
     For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
 *@
+@{
+    ViewData["Title"] = "Assessment Charts";
+}
 
 <div style="width:800px;">
     <canvas ref="canvasRef" id="chart" width="800" height="600"></canvas>
diff --git a/web/Areas/CTS/Views/Assessments.cshtml b/web/Areas/CTS/Views/Assessments.cshtml
index 154a93fb7..fa2383fa9 100644
--- a/web/Areas/CTS/Views/Assessments.cshtml
+++ b/web/Areas/CTS/Views/Assessments.cshtml
@@ -1,5 +1,8 @@
-
-<h2>View Assessments</h2>
+@{
+    ViewData["Title"] = "View Assessments";
+}
+
+<h1>View Assessments</h1>
 
 <q-form>
     <div class="row">
@@ -80,7 +83,7 @@
                         keys: "id",
                         urlBase: "",
                         columns: [
-                            { name: "action", label: "", field: "id", align: "left" },
+                            { name: "action", label: "Actions", field: "id", align: "left" },
                             { name: "studentName", label: "Student", field: "studentName", align: "left", sortable: true },
                             { name: "epaName", label: "EPA", field: "epaName", align: "left", sortable: true },
                             { name: "service", label: "Service", field: "serviceName", align: "left", sortable: true },
@@ -94,7 +97,7 @@
             methods: {
                 loadAssessments: async function() {
                     const y = Object.fromEntries(
-                      Object.entries(this.searchForm).filter(([key, value]) => value !== null)
+                      Object.entries(this.searchForm).filter(([_key, value]) => value !== null)
                     );
                     var u = null;
                     switch(this.assessmentType) {
@@ -107,7 +110,7 @@
                         default: break;
                     }
 
-                    if(u != null) {
+                    if(u !== null) {
                         u.search = new URLSearchParams(y)
                         this.assessmentsTable.urlBase = u
                         this.assessmentsTable.load()
diff --git a/web/Areas/CTS/Views/Epa.cshtml b/web/Areas/CTS/Views/Epa.cshtml
index c5911f474..a5040eb37 100644
--- a/web/Areas/CTS/Views/Epa.cshtml
+++ b/web/Areas/CTS/Views/Epa.cshtml
@@ -1,7 +1,9 @@
 @{
+    ViewData["Title"] = "EPA Assessment";
     IUserHelper UserHelper = new UserHelper();
     var siteRootUrl = Url.Content("~/");
 }
+<h1>EPA Assessment</h1>
 <div class="row epa justify-center items-start content-start">
     <div style="max-width: 1200px" class="col">
         @*
@@ -15,10 +17,10 @@
                     <template v-slot:option="scope">
                         <q-item v-bind="scope.itemProps">
                             <q-item-section side v-if="serviceThisWeek == scope.opt.value">
-                                <q-badge color="green">This Week</q-badge>
+                                <q-badge color="positive">This Week</q-badge>
                             </q-item-section>
                             <q-item-section side v-if="serviceLastWeek == scope.opt.value">
-                                <q-badge color="blue">Last Week</q-badge>
+                                <q-badge color="primary">Last Week</q-badge>
                             </q-item-section>
                             <q-item-section side v-if="servicesScheduled.indexOf(scope.opt.value) >= 0">
                                 <q-badge color="yellow">Scheduled</q-badge>
@@ -198,25 +200,26 @@
                     var sunday = new Date(today)
                     sunday.setDate(sunday.getDate() - sunday.getDay())
                     var schedThisWeek = scheduledServices.find(s => today >= new Date(s.dateStart) && today <= new Date(s.dateEnd))
-                    var schedLastWeek = scheduledServices.find(s => new Date(s.dateEnd).getTime() == sunday.getTime())
+                    var schedLastWeek = scheduledServices.find(s => new Date(s.dateEnd).getTime() === sunday.getTime())
                     this.serviceThisWeek = schedThisWeek ? schedThisWeek.serviceId : 0
-                    this.serviceLastWeek = schedLastWeek && schedLastWeek.serviceId != this.serviceThisWeek ? schedLastWeek.serviceId : 0
-                    this.servicesScheduled = scheduledServices.map(s => s.serviceID)
+                    this.serviceLastWeek = schedLastWeek && schedLastWeek.serviceId !== this.serviceThisWeek ? schedLastWeek.serviceId : 0
+                    this.servicesScheduled = scheduledServices.map(s => s.serviceId)
 
                     //auto select a service - this week, then last week
-                    if (this.serviceThisWeek > 0)
+                    if (this.serviceThisWeek > 0) {
                         this.service = this.serviceThisWeek
-                    else if (this.serviceLastWeek > 0)
+                    } else if (this.serviceLastWeek > 0) {
                         this.service = this.serviceLastWeek
+                    }
                 },
 
                 //load epas and auto select if there's only one
                 getEpas: async function () {
                     this.selectedEpa = ""
-                    if (this.service != '') {
+                    if (this.service > 0) {
                         await viperFetch(this, "epas?serviceId=" + this.service)
                             .then(data => this.epas = data.map(d => ({ label: d.name, value: d.epaId })))
-                        if (this.epas.length == 1) {
+                        if (this.epas.length === 1) {
                             this.selectedEpa = this.epas[0]
                         }
                     }
@@ -224,14 +227,14 @@
                 //students
                 getStudents: async function () {
                     //load all students and students on service, if necessary
-                    if (this.allStudents.length == 0) {
+                    if (this.allStudents.length === 0) {
                         await viperFetch(this, "@siteRootUrl" + "students/dvm")
                             .then(data => this.allStudents = data.map(s => ({
                                 label: s.lastName + ", " + s.firstName, mailId: s.mailId, value: s.personId, classLevel: s.classLevel
                             })))
                     }
 
-                    if (this.service && this.service != this.studentsLoadedForService) {
+                    if (this.service && this.service !== this.studentsLoadedForService) {
                         var d = new Date().toJSON().split("T")[0]
                         await viperFetch(this, "../api/cts/clinicalschedule/student?serviceId=" + this.service + "&startDate=" + d + "&endDate=" + d)
                             .then(data => this.studentsOnService = data.map(s => ({
@@ -245,7 +248,7 @@
                             this.students = this.studentsOnService
                             break;
                         case "V4":
-                            this.students = this.allStudents.filter(s => s.classLevel == 'V4')
+                            this.students = this.allStudents.filter(s => s.classLevel === 'V4')
                             break;
                         default:
                             this.students = this.allStudents
@@ -282,7 +285,7 @@
                         this.success = true
                     }
                 },
-                studentSearch: function (val, update, abort) {
+                studentSearch: function (val, update) {
                     if (val === '') {
                         update(() => this.getStudents())
                         return
@@ -298,8 +301,9 @@
                 this.getLevels()
 
                 var selectedService = getItemFromStorage("Cts_Epa_ServiceId")
-                if(selectedService != null)
+                if(selectedService !== null) {
                     this.service = selectedService
+                }
             },
             watch: {
                 //when service is updated, reload epa list and student list
@@ -312,14 +316,15 @@
                 },
                 //set student list when student type is selected
                 studentOptionsType: {
-                    handler(v) {
+                    handler() {
                         this.getStudents()
                     }
                 },
                 selectedStudent: {
                     handler(v) {
-                        if(v != null)
+                        if(v !== null) {
                             this.success = false
+                        }
                     }
                 }
             }
diff --git a/web/Areas/CTS/Views/EpaEdit.cshtml b/web/Areas/CTS/Views/EpaEdit.cshtml
index 791f002b7..159e37172 100644
--- a/web/Areas/CTS/Views/EpaEdit.cshtml
+++ b/web/Areas/CTS/Views/EpaEdit.cshtml
@@ -1,6 +1,8 @@
 @{
+    ViewData["Title"] = "Edit EPA";
     IUserHelper UserHelper = new UserHelper();
 }
+<h1>Edit EPA Assessment</h1>
 <div class="row epa justify-center items-start content-start">
     <div style="max-width: 1200px" class="col">
         <q-banner inline-actions rounded v-if="success" class="bg-green text-white q-mb-md">
diff --git a/web/Areas/CTS/Views/Index.cshtml b/web/Areas/CTS/Views/Index.cshtml
index 8f7a6b68c..4aecdad64 100644
--- a/web/Areas/CTS/Views/Index.cshtml
+++ b/web/Areas/CTS/Views/Index.cshtml
@@ -1,10 +1,11 @@
 @{
+    ViewData["Title"] = "CTS Home";
     var html = ViewData["html"] as string;
 }
 
-<h2>CTS Home</h2>
+<h1>CTS Home</h1>
 
 @if (html != null) { Html.Raw(html); }
-<script asp-asp-add-nonce="true">
+<script asp-add-nonce="true">
     
 </script>
\ No newline at end of file
diff --git a/web/Areas/CTS/Views/ManageDomains.cshtml b/web/Areas/CTS/Views/ManageDomains.cshtml
index 95291bb5b..d786504a0 100644
--- a/web/Areas/CTS/Views/ManageDomains.cshtml
+++ b/web/Areas/CTS/Views/ManageDomains.cshtml
@@ -1,6 +1,9 @@
 @using Viper.Models.CTS
+@{
+    ViewData["Title"] = "Manage Domains";
+}
 
-<h2>Manage Domains</h2>
+<h1>Manage Domains</h1>
 @{
 	var errors = ViewData["Errors"] as List<string>;
 	if(errors != null && errors.Count > 0)
@@ -19,31 +22,28 @@
 
 <q-form action="" method="post">
 	<input type="hidden" name="domainId" value="@(domain?.DomainId ?? 0)" />
-	<q-label class="row items-center">
-		<span class="col col-md-2 col-lg-1">Domain:</span>
-		<q-input outlined dense type="text" name="name" v-model="name" size="30" maxlength="250" class="col col-md-5 col-lg-3" />
-	</q-label>
-	<q-label class="row items-center">
-		<span class="col col-md-2 col-lg-1">Order:</span>
-		<q-input outlined dense type="number" name="order" v-model="order" step="1" class="col col-1" />
-	</q-label>
-	<q-label class="row items-start">
-		<span class="col col-md-2 col-lg-1 q-pt-sm">Description:</span>
-		<q-input outlined dense type="textarea" name="description" v-model="description" class="col col-md-5 col-lg-3"></q-input>
-	</q-label>
+	<div class="row items-center">
+		<q-input outlined dense type="text" name="name" v-model="name" label="Domain" size="30" maxlength="250" class="col col-md-5 col-lg-3 offset-md-2 offset-lg-1" />
+	</div>
+	<div class="row items-center">
+		<q-input outlined dense type="number" name="order" v-model="order" label="Order" step="1" class="col col-1 offset-md-2 offset-lg-1" />
+	</div>
+	<div class="row items-start">
+		<q-input outlined dense type="textarea" name="description" v-model="description" label="Description" class="col col-md-5 col-lg-3 offset-md-2 offset-lg-1"></q-input>
+	</div>
 	<div class="row q-mt-sm">
 		<q-btn type="submit" label="Submit" no-caps dense color="primary" class="col col-1 offset-md-2 offset-lg-1"></q-btn>
 	</div>
 </q-form>
 
 <div class="row">
+	<h3 class="text-primary">Domains</h3>
 	<q-list class="col col-12 col-md-10 col-lg-6">
-		<q-item-label header class="text-primary"><h3>Domains</h3></q-item-label>
 		@foreach(var d in domains ?? new List<Domain>())
 		{
 			<q-item>
 				<q-item-section top side>
-					<a href="?domainId=@d.DomainId">
+					<a href="?domainId=@d.DomainId" aria-label="Edit domain: @d.Name">
 						<q-icon name="edit" size="sm" class="text-secondary"></q-icon>
 					</a>
 				</q-item-section>
@@ -55,15 +55,15 @@
 </div>
 
 @section Scripts {
-	<script asp-add-nonce="true">
-		createVueApp({
-			data() {
-				return {
-					name: '@System.Web.HttpUtility.JavaScriptStringEncode(domain?.Name)',
-					order: '@System.Web.HttpUtility.JavaScriptStringEncode(domain?.Order.ToString())',
-					description: '@System.Web.HttpUtility.JavaScriptStringEncode(domain?.Description)'
-				}
-			}
-		})
-	</script>
+    <script asp-add-nonce="true">
+        createVueApp({
+            data() {
+                return {
+                    name: '@System.Web.HttpUtility.JavaScriptStringEncode(domain?.Name)',
+                    order: '@System.Web.HttpUtility.JavaScriptStringEncode(domain?.Order.ToString())',
+                    description: '@System.Web.HttpUtility.JavaScriptStringEncode(domain?.Description)'
+                }
+            }
+        })
+    </script>
 }
\ No newline at end of file
diff --git a/web/Areas/CTS/Views/ManageEpas.cshtml b/web/Areas/CTS/Views/ManageEpas.cshtml
index 8e8d4dc02..43f3ddb49 100644
--- a/web/Areas/CTS/Views/ManageEpas.cshtml
+++ b/web/Areas/CTS/Views/ManageEpas.cshtml
@@ -1,4 +1,7 @@
-
+@{
+    ViewData["Title"] = "Manage EPAs";
+}
+<h1>Manage EPAs</h1>
 <q-form @@submit="submitEpa()" v-if="showForm" class="q-mb-md">
     <h2>{{epa?.epaId ? 'Updating EPA' : 'Creating EPA'}}</h2>
     <div class="row">
@@ -33,7 +36,7 @@
                v-if="epa?.epaId"
                class="q-mt-sm q-ml-lg col col-4 col-md-4 col-lg-1"
 ></q-btn>
-        <q-btn dense no-caps type="button" label="Delete EPA" color="red" @@click="deleteEpa()"
+        <q-btn dense no-caps type="button" label="Delete EPA" color="negative" @@click="deleteEpa()"
                v-if="epa?.epaId"
                class="q-mt-sm q-ml-lg col col-4 col-md-4 col-lg-1"
 ></q-btn>
@@ -43,7 +46,7 @@
 
 <h3>
     Add New EPA
-    <q-btn no-caps size="md" label="Add EPA" color="green" @@click="this.showForm=true" class="q-ml-sm"></q-btn>
+    <q-btn no-caps size="md" label="Add EPA" color="positive" @@click="this.showForm=true" class="q-ml-sm"></q-btn>
 </h3>
 
 <q-list separator>
@@ -67,10 +70,10 @@
             <template v-slot:default>
                 <span class="row fit">
                     <span class="col">
-                        <q-btn dense no-caps size="md" icon="edit" color="primary" @@click="selectEpa(epa)"></q-btn>
+                        <q-btn dense no-caps size="md" icon="edit" color="primary" :aria-label="'Edit EPA: ' + epa.name" @@click="selectEpa(epa)"></q-btn>
                     </span>
                     <span class="col">
-                        <q-icon :name="epa.active ? 'check' : 'close'" :color="epa.active ? 'green' : 'red'" size="md"></q-icon>
+                        <q-icon :name="epa.active ? 'check' : 'close'" :color="epa.active ? 'positive' : 'negative'" size="md"></q-icon>
                     </span>
                     <span class="col">
                         {{epa.order}}
@@ -94,7 +97,6 @@
 
 @section Scripts {
     <script asp-add-nonce="true">
-        /* global createVueApp, viperFetch */
         createVueApp({
             data() {
                 return {
diff --git a/web/Areas/CTS/Views/ManageLevels.cshtml b/web/Areas/CTS/Views/ManageLevels.cshtml
index b7951834e..e34c45fcc 100644
--- a/web/Areas/CTS/Views/ManageLevels.cshtml
+++ b/web/Areas/CTS/Views/ManageLevels.cshtml
@@ -1,4 +1,7 @@
-<h2>Manage Levels</h2>
+@{
+    ViewData["Title"] = "Manage Levels";
+}
+<h1>Manage Levels</h1>
 <q-form action="" @@submit="submitLevel">
     <div class="row items-start">
         <q-btn-toggle name="type" v-model="type" :options="levelTypes" size="large" outlined no-caps push toggle-color="primary" class="q-mb-md"></q-btn-toggle>
@@ -21,7 +24,7 @@
         </div>
         <div class="row">
             <q-btn dense no-caps type="submit" :label="(level?.levelId ? 'Update' : 'Add') + ' Level'" color="primary" class="q-mt-sm col col-4 col-md-1"></q-btn>
-            <q-btn dense no-caps type="button" label="Delete Level" color="red" class="q-mt-sm q-ml-lg col col-4 col-md-1"></q-btn>
+            <q-btn dense no-caps type="button" label="Delete Level" color="negative" class="q-mt-sm q-ml-lg col col-4 col-md-1"></q-btn>
         </div>
     </div>
 
@@ -34,10 +37,10 @@
         </q-item-label>
         <q-item v-for="l in levels.filter(l => l.epa)">
             <q-item-section side top>
-                <q-btn dense no-caps size="md" color="primary" icon="edit" @@click="selectLevel(l)"></q-btn>
+                <q-btn dense no-caps size="md" color="primary" icon="edit" :aria-label="'Edit level: ' + l.levelName" @@click="selectLevel(l)"></q-btn>
             </q-item-section>
             <q-item-section side top>
-                <q-icon :name="l.active ? 'check' : 'close'" :color="l.active ? 'green' : 'red'"></q-icon>
+                <q-icon :name="l.active ? 'check' : 'close'" :color="l.active ? 'positive' : 'negative'"></q-icon>
             </q-item-section>
             <q-item-section side top>
                 {{l.order}}
@@ -90,8 +93,8 @@
                 },
                 addLevel: function() { 
                     this.level = {
-                        levelName: "", description: "", active: true, order: 0, epa: this.type == "EPA", dops: this.type == "DOPS",
-                        clinical: this.type == "Clinical", course: this.type == "Course", milestone: this.type == "milestone"
+                        levelName: "", description: "", active: true, order: 0, epa: this.type === "EPA", dops: this.type === "DOPS",
+                        clinical: this.type === "Clinical", course: this.type === "Course", milestone: this.type === "Milestone"
                     }
                 },
                 loadLevels: async function() {