diff --git a/.github/environments/values.dev.yaml b/.github/environments/values.dev.yaml
index 6c7f94eb..e99a1d8b 100644
--- a/.github/environments/values.dev.yaml
+++ b/.github/environments/values.dev.yaml
@@ -3,6 +3,7 @@ config:
   enabled: true
   configMap:
     FRONTEND_APIPATH: api/v1
+    # FRONTEND_CHES_BCC: ~
     FRONTEND_COMS_APIPATH: https://coms-dev.api.gov.bc.ca/api/v1
     FRONTEND_COMS_BUCKETID: 1f9e1451-c130-4804-aeb0-b78b5b109c47
     FRONTEND_OIDC_AUTHORITY: https://dev.loginproxy.gov.bc.ca/auth/realms/standard
diff --git a/.github/environments/values.prod.yaml b/.github/environments/values.prod.yaml
index e2452148..8d395a00 100644
--- a/.github/environments/values.prod.yaml
+++ b/.github/environments/values.prod.yaml
@@ -3,6 +3,7 @@ config:
   enabled: true
   configMap:
     FRONTEND_APIPATH: api/v1
+    FRONTEND_CHES_BCC: Housing.Authorizations@gov.bc.ca
     FRONTEND_COMS_APIPATH: https://coms.api.gov.bc.ca/api/v1
     FRONTEND_COMS_BUCKETID: 0089d041-5aab-485e-842d-8875475d0ed6
     FRONTEND_OIDC_AUTHORITY: https://loginproxy.gov.bc.ca/auth/realms/standard
diff --git a/.github/environments/values.test.yaml b/.github/environments/values.test.yaml
index 37ce8cfd..183af524 100644
--- a/.github/environments/values.test.yaml
+++ b/.github/environments/values.test.yaml
@@ -3,6 +3,7 @@ config:
   enabled: true
   configMap:
     FRONTEND_APIPATH: api/v1
+    # FRONTEND_CHES_BCC: ~
     FRONTEND_COMS_APIPATH: https://coms-test.api.gov.bc.ca/api/v1
     FRONTEND_COMS_BUCKETID: a9eabd1d-5f77-4c60-bf6b-83ffa0e21c59
     FRONTEND_OIDC_AUTHORITY: https://test.loginproxy.gov.bc.ca/auth/realms/standard
diff --git a/app/config/custom-environment-variables.json b/app/config/custom-environment-variables.json
index f69b0f7a..4e5dd9e0 100644
--- a/app/config/custom-environment-variables.json
+++ b/app/config/custom-environment-variables.json
@@ -1,6 +1,9 @@
 {
   "frontend": {
     "apiPath": "FRONTEND_APIPATH",
+    "ches": {
+      "bcc": "FRONTEND_CHES_BCC"
+    },
     "coms": {
       "apiPath": "FRONTEND_COMS_APIPATH",
       "bucketId": "FRONTEND_COMS_BUCKETID"
diff --git a/app/src/controllers/roadmap.ts b/app/src/controllers/roadmap.ts
index 624d1240..c3555b71 100644
--- a/app/src/controllers/roadmap.ts
+++ b/app/src/controllers/roadmap.ts
@@ -1,21 +1,20 @@
-import type { NextFunction, Request, Response } from '../interfaces/IExpress';
 import { emailService } from '../services';
 
+import type { NextFunction, Request, Response } from '../interfaces/IExpress';
 import type { Email } from '../types';
 
 const controller = {
   /**
-   * @function update
-   * update roadmap
+   * @function send
+   * Send an email with the roadmap data
    */
-  update: async (req: Request, res: Response, next: NextFunction) => {
+  send: async (
+    req: Request<never, never, { activityId: string; emailData: Email }>,
+    res: Response,
+    next: NextFunction
+  ) => {
     try {
-      // do other stuff related to roadmap items
-      // eg: update note where id = req.body.activityId;
-
-      const body = req.body as { activityId: string; emailData: Email };
-      // send email
-      const { data, status } = await emailService.email(body.emailData);
+      const { data, status } = await emailService.email(req.body.emailData);
       res.status(status).json(data);
     } catch (e: unknown) {
       next(e);
diff --git a/app/src/routes/v1/roadmap.ts b/app/src/routes/v1/roadmap.ts
index ac073578..4522b09d 100644
--- a/app/src/routes/v1/roadmap.ts
+++ b/app/src/routes/v1/roadmap.ts
@@ -8,9 +8,9 @@ import type { NextFunction, Request, Response } from '../../interfaces/IExpress'
 const router = express.Router();
 router.use(requireSomeAuth);
 
-// update roadmap
-router.put('/', roadmapValidator.update, (req: Request, res: Response, next: NextFunction): void => {
-  roadmapController.update(req, res, next);
+// Send an email with the roadmap data
+router.put('/', roadmapValidator.send, (req: Request, res: Response, next: NextFunction): void => {
+  roadmapController.send(req, res, next);
 });
 
 export default router;
diff --git a/app/src/services/email.ts b/app/src/services/email.ts
index 43168d18..1e09dfa0 100644
--- a/app/src/services/email.ts
+++ b/app/src/services/email.ts
@@ -32,12 +32,12 @@ async function getToken() {
  * @returns {AxiosInstance} An axios instance
  */
 function chesAxios(): AxiosInstance {
-  // create axios instance
+  // Create axios instance
   const chesAxios = axios.create({
     baseURL: config.get('server.ches.apiPath'),
     timeout: 10000
   });
-  // add bearer token
+  // Add bearer token
   chesAxios.interceptors.request.use(async (config) => {
     const token = await getToken();
     const auth = token ? `Bearer ${token}` : '';
@@ -50,7 +50,7 @@ function chesAxios(): AxiosInstance {
 const service = {
   /**
    * @function email
-   * sends an email with CHES service
+   * Sends an email with CHES service
    * @param emailData
    * @returns Axios response status and data
    */
@@ -67,7 +67,7 @@ const service = {
 
   /**
    * @function health
-   * checks CHES service health
+   * Checks CHES service health
    * @returns Axios response status and data
    */
   health: async () => {
diff --git a/app/src/validators/roadmap.ts b/app/src/validators/roadmap.ts
index 451be01c..967bda6e 100644
--- a/app/src/validators/roadmap.ts
+++ b/app/src/validators/roadmap.ts
@@ -4,7 +4,7 @@
 import { validate } from '../middleware/validation';
 
 const schema = {
-  update: {
+  send: {
     // params: Joi.object({
     //   activityId: activityId
     // })
@@ -13,5 +13,5 @@ const schema = {
 };
 
 export default {
-  update: validate(schema.update)
+  send: validate(schema.send)
 };
diff --git a/charts/pcns/templates/secret.yaml b/charts/pcns/templates/secret.yaml
index 5e3c1db7..51f63360 100644
--- a/charts/pcns/templates/secret.yaml
+++ b/charts/pcns/templates/secret.yaml
@@ -15,10 +15,10 @@
 {{- $f1Secret := (lookup "v1" "Secret" .Release.Namespace $f1SecretName ) }}
 {{- $f2SecretName := printf "%s-%s" (include "pcns.configname" .) "form2" }}
 {{- $f2Secret := (lookup "v1" "Secret" .Release.Namespace $f2SecretName ) }}
-{{- $oSecretName := printf "%s-%s" (include "pcns.configname" .) "oidc" }}
-{{- $oSecret := (lookup "v1" "Secret" .Release.Namespace $oSecretName ) }}
 {{- $chesSecretName := printf "%s-%s" "ches-service-account" }}
 {{- $chesSecret := (lookup "v1" "Secret" .Release.Namespace $chesSecretName ) }}
+{{- $oSecretName := printf "%s-%s" (include "pcns.configname" .) "oidc" }}
+{{- $oSecret := (lookup "v1" "Secret" .Release.Namespace $oSecretName ) }}
 
 {{- if and (not $dbSecret) (not .Values.patroni.enabled) }}
 ---
diff --git a/charts/pcns/values.yaml b/charts/pcns/values.yaml
index 29ebbeb3..e693f262 100644
--- a/charts/pcns/values.yaml
+++ b/charts/pcns/values.yaml
@@ -132,6 +132,7 @@ config:
   # to string value "true".
   configMap:
     FRONTEND_APIPATH: api/v1
+    FRONTEND_CHES_BCC: ~
     FRONTEND_COMS_APIPATH: ~
     FRONTEND_COMS_BUCKETID: ~
     FRONTEND_OIDC_AUTHORITY: ~
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 9a090168..fcc16b50 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -5,6 +5,7 @@ import { RouterView } from 'vue-router';
 import { AppLayout, Navbar, ProgressLoader } from '@/components/layout';
 import { ConfirmDialog, Message, Toast, useToast } from '@/lib/primevue';
 import { useAppStore, useAuthStore, useConfigStore } from '@/store';
+import { ToastTimeout } from './utils/constants';
 
 import type { Ref } from 'vue';
 
@@ -25,7 +26,7 @@ onBeforeMount(async () => {
 // Top level error handler
 onErrorCaptured((e: Error) => {
   const toast = useToast();
-  toast.error('Error', e.message);
+  toast.error('Error', e.message, { life: ToastTimeout.STICKY });
 });
 </script>
 
diff --git a/frontend/src/components/form/TextArea.vue b/frontend/src/components/form/TextArea.vue
index 4095db5b..27a465c6 100644
--- a/frontend/src/components/form/TextArea.vue
+++ b/frontend/src/components/form/TextArea.vue
@@ -12,6 +12,7 @@ type Props = {
   placeholder?: string;
   disabled?: boolean;
   bold?: boolean;
+  rows?: number;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,7 +21,8 @@ const props = withDefaults(defineProps<Props>(), {
   label: '',
   placeholder: '',
   disabled: false,
-  bold: true
+  bold: true,
+  rows: 5
 });
 
 const { errorMessage, value } = useField<string>(toRef(props, 'name'));
@@ -42,7 +44,7 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
       class="w-full"
       :class="{ 'p-invalid': errorMessage }"
       :disabled="disabled"
-      :rows="5"
+      :rows="rows"
     />
     <small :id="`${name}-help`">{{ helpText }}</small>
     <div>
diff --git a/frontend/src/components/roadmap/Roadmap.vue b/frontend/src/components/roadmap/Roadmap.vue
new file mode 100644
index 00000000..a910e229
--- /dev/null
+++ b/frontend/src/components/roadmap/Roadmap.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { Form } from 'vee-validate';
+import { onMounted, ref } from 'vue';
+import { array, object, string } from 'yup';
+
+import { InputText, TextArea } from '@/components/form';
+import { Button, useConfirm, useToast } from '@/lib/primevue';
+import { roadmapService, userService } from '@/services';
+import { useConfigStore } from '@/store';
+import { PERMIT_STATUS } from '@/utils/enums';
+import { roadmapTemplate } from '@/utils/templates';
+
+import type { Ref } from 'vue';
+import type { Permit, PermitType, Submission } from '@/types';
+import { storeToRefs } from 'pinia';
+
+// Props
+type Props = {
+  activityId: string;
+  permits: Array<Permit>;
+  permitTypes: Array<PermitType>;
+  submission: Submission;
+};
+
+const props = withDefaults(defineProps<Props>(), {});
+
+// Store
+const { getConfig } = storeToRefs(useConfigStore());
+
+// State
+const initialFormValues: Ref<any> = ref();
+
+// Form schema
+const emailValidator = array()
+  .transform(function (value, originalValue) {
+    if (this.isType(value) && value !== null) {
+      return value;
+    }
+    return originalValue ? originalValue.split(/[\s,]+/) : [];
+  })
+  .of(string().email(({ value }) => `${value} is not a valid email`));
+
+const formSchema = object({
+  to: emailValidator,
+  cc: emailValidator,
+  bcc: emailValidator,
+  subject: string().required(),
+  body: string().required()
+});
+
+// Actions
+const confirm = useConfirm();
+const toast = useToast();
+
+const confirmSubmit = (data: any) => {
+  confirm.require({
+    message: 'Please confirm that you want to send this roadmap. This cannot be undone.',
+    header: 'Confirm sending this Roadmap',
+    acceptLabel: 'Send',
+    rejectLabel: 'Cancel',
+    accept: async () => {
+      try {
+        await roadmapService.send(props.activityId, data);
+        toast.success('Roadmap sent');
+      } catch (e: any) {
+        toast.error('Failed to send roadmap', e.message);
+      }
+    }
+  });
+};
+
+function getPermitTypeNamesByStatus(permits: Array<Permit>, permitTypes: Array<PermitType>, status: string) {
+  return permits
+    .map((p) => permitTypes.find((pt) => pt.permitTypeId === p.permitTypeId && p.status === status)?.name)
+    .filter((pt) => !!pt)
+    .map((name) => name as string);
+}
+
+onMounted(async () => {
+  const assignee = (await userService.searchUsers({ userId: [props.submission.assignedUserId] })).data[0];
+  const configBCC = getConfig.value.ches?.bcc;
+  const bcc = assignee.email + (configBCC ? `, ${configBCC}` : '');
+
+  // Initial form values
+  initialFormValues.value = {
+    from: assignee.email,
+    to: props.submission.contactEmail,
+    cc: undefined,
+    bcc: bcc,
+    subject: "Here is your housing project's Permit Roadmap", // eslint-disable-line quotes
+    bodyType: 'text',
+    body: roadmapTemplate({
+      '{{ contactName }}': props.submission.contactName ?? '',
+      '{{ locationAddress }}': props.submission.streetAddress ?? '',
+      '{{ permitStateNew }}': getPermitTypeNamesByStatus(props.permits, props.permitTypes, PERMIT_STATUS.NEW),
+      '{{ permitStateApplied }}': getPermitTypeNamesByStatus(props.permits, props.permitTypes, PERMIT_STATUS.APPLIED),
+      '{{ permitStateCompleted }}': getPermitTypeNamesByStatus(
+        props.permits,
+        props.permitTypes,
+        PERMIT_STATUS.COMPLETED
+      ),
+      '{{ navigatorName }}': `${assignee.firstName} ${assignee.lastName}`
+    })
+  };
+});
+</script>
+
+<template>
+  <Form
+    v-if="initialFormValues"
+    :initial-values="initialFormValues"
+    :validation-schema="formSchema"
+    @submit="confirmSubmit"
+  >
+    <div class="formgrid grid">
+      <InputText
+        class="col-12 lg:col-6"
+        name="to"
+        label="To"
+      />
+      <div class="col" />
+      <InputText
+        class="col-12 lg:col-6"
+        name="cc"
+        label="CC"
+      />
+      <div class="col" />
+      <InputText
+        class="col-12 lg:col-6"
+        name="bcc"
+        label="BCC"
+      />
+      <div class="col" />
+      <InputText
+        class="col-12 lg:col-6"
+        name="subject"
+        label="Subject"
+      />
+      <div class="col" />
+      <TextArea
+        class="col-12"
+        name="body"
+        label="Note"
+        :rows="10"
+      />
+      <div class="col-12"><label class="font-bold">Add attachments</label></div>
+      <div class="col-12 pt-2">
+        <Button>
+          <font-awesome-icon
+            icon="fa-solid fa-plus"
+            class="mr-1"
+          />
+          Choose
+        </Button>
+      </div>
+      <div class="col-12 pt-5">
+        <Button
+          label="Send"
+          type="submit"
+          icon="pi pi-envelope"
+        />
+      </div>
+    </div>
+  </Form>
+</template>
diff --git a/frontend/src/components/roadmap/UpdateRoadmap.vue b/frontend/src/components/roadmap/UpdateRoadmap.vue
deleted file mode 100644
index 3d644add..00000000
--- a/frontend/src/components/roadmap/UpdateRoadmap.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import { storeToRefs } from 'pinia';
-
-import { Form } from 'vee-validate';
-import { object, string } from 'yup';
-import { Button } from '@/lib/primevue';
-import { InputText, TextArea } from '@/components/form';
-
-import { roadmapTemplate } from '@/utils/templates';
-import { getPermitTypesByStatus } from '@/utils/utils';
-
-import { permitService, roadmapService, submissionService, userService } from '@/services';
-import { useAuthStore } from '@/store';
-import type { Permit, PermitType, Submission, User } from '@/types';
-
-// Props
-type Props = {
-  activityId: string;
-  submission: Submission;
-  permits: Array<Permit> | [];
-  permitTypes: Array<PermitType>;
-};
-
-const props = withDefaults(defineProps<Props>(), {});
-
-// store
-// TODO: remove
-const { getProfile } = storeToRefs(useAuthStore());
-
-// local state
-const navigator: Ref<User | undefined> = ref(undefined);
-const confirmation = ref('');
-
-// message schema
-const messageSchema = object({
-  toEmail: string().required().email(),
-  ccEmail: string().email(),
-  bccEmail: string().email(),
-  subject: string().required(),
-  messageBody: string().required()
-});
-
-// initial values
-let messageValues = {
-  // assigned to
-  fromEmail: 'a@a.com',
-  // props.submission.contactEmail
-  toEmail: ['a@a.com', 'a@a.com'],
-  ccEmail: ['a@a.com'],
-  // 'Housing.Authorizations@gov.bc.ca, <navigator>@gov.bc.ca'
-  bccEmail: ['a@a.com'],
-  subject: "Here is your housing project's Permit Roadmap",
-  bodyType: 'text',
-  messageBody: roadmapTemplate({
-    '{{ contactName }}': props.submission.contactName ?? '',
-    '{{ locationAddress }}': props.submission.streetAddress ?? '',
-    '{{ permitStateNew }}': getPermitTypesByStatus(props.permits, props.permitTypes, 'New'),
-    '{{ permitStateApplied }}': getPermitTypesByStatus(props.permits, props.permitTypes, 'Applied'),
-    '{{ permitStateCompleted }}': getPermitTypesByStatus(props.permits, props.permitTypes, 'Completed'),
-    '{{ navigatorName }}': navigator.value?.fullName
-  })
-  // delayTS: this.form.datetime !== null ? new Date(this.form.datetime).getTime() : 0,
-  // attachments: this.form.attachments,
-  // priority: this.form.priority,
-  // tag: this.form.tag,
-};
-
-async function onSubmit(formValues: any) {
-  try {
-    confirmation.value = (await roadmapService.update(props.activityId, formValues)).data;
-    // TODO: emit success event, parent to show toasts
-  } catch (e: any) {
-    // TODO: emit fail event, parent to show toasts
-    console.log('fail!');
-    console.log(e);
-  }
-}
-
-onMounted(async () => {
-  userService.searchUsers({ userId: [props.submission.assignedUserId] }).then((res) => {
-    navigator.value = res?.data[0];
-  });
-});
-</script>
-
-<template>
-  <Form
-    :initial-values="messageValues"
-    :validation-schema="messageSchema"
-    @submit="onSubmit"
-  >
-    <div class="formgrid grid">
-      <InputText
-        class="col-6"
-        name="toEmail"
-        label="To"
-      />
-      <div class="col-6" />
-      <InputText
-        class="col-6"
-        name="ccEmail"
-        label="CC"
-      />
-      <div class="col-6" />
-      <InputText
-        class="col-6"
-        name="bccEmail"
-        label="BCC"
-      />
-      <div class="col-6" />
-      <InputText
-        class="col-6"
-        name="subject"
-        label="Subject"
-      />
-      <div class="col-6" />
-      <TextArea
-        class="col-12"
-        name="messageBody"
-        label="Note"
-      />
-      <!-- TODO: figure out how to match the styling with the TextArea labels -->
-      <!--        (right now it's black instead of bcgov blue)                -->
-      <div class="col-12"><span class="key font-bold">Add attachments</span></div>
-      <div class="col-12 flex pt-2">
-        <Button>
-          <font-awesome-icon
-            icon="fa-solid fa-plus"
-            class="mr-1"
-          />
-          Choose
-        </Button>
-      </div>
-      <div class="field col-12 flex pt-5">
-        <div class="flex-auto">
-          <Button
-            class="mr-2"
-            label="Send"
-            type="submit"
-            icon="pi pi-envelope"
-          />
-        </div>
-      </div>
-    </div>
-  </Form>
-  <pre>{{ confirmation }}</pre>
-</template>
diff --git a/frontend/src/services/roadmapService.ts b/frontend/src/services/roadmapService.ts
index fc445250..aeeaf020 100644
--- a/frontend/src/services/roadmapService.ts
+++ b/frontend/src/services/roadmapService.ts
@@ -1,13 +1,24 @@
 import { appAxios } from './interceptors';
 
+import { parseCSV } from '@/utils/utils';
+
 export default {
   /**
-   * @function update
-   *
-   * updates roadmap for an activity
+   * @function send
+   * Send an email with the roadmap data
    * @returns {Promise} An axios response
    */
-  update(activityId: string, emailData: any) {
+  send(activityId: string, emailData: any) {
+    if (emailData.to && !Array.isArray(emailData.to)) {
+      emailData.to = parseCSV(emailData.to);
+    }
+    if (emailData.cc && !Array.isArray(emailData.cc)) {
+      emailData.cc = parseCSV(emailData.cc);
+    }
+    if (emailData.bcc && !Array.isArray(emailData.bcc)) {
+      emailData.bcc = parseCSV(emailData.bcc);
+    }
+
     return appAxios().put('roadmap', { activityId, emailData });
   }
 };
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 298e0d29..2d0a430a 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -1,10 +1,10 @@
-export type { Submission } from './Submission';
 export type { Document } from './Document';
 export type { IdentityProvider } from './IdentityProvider';
+export type { Note } from './Note';
 export type { Permit } from './Permit';
 export type { PermitForm } from './PermitForm';
 export type { PermitType } from './PermitType';
 export type { Statistics } from './Statistics';
+export type { Submission } from './Submission';
 export type { User } from './User';
 export type { UserSearchParameters } from './UserSearchParameters';
-export type { Note } from './Note';
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
index 61f7ed5f..4eed8fb3 100644
--- a/frontend/src/utils/constants.ts
+++ b/frontend/src/utils/constants.ts
@@ -51,6 +51,7 @@ export const StorageKey = Object.freeze({
 export const ToastTimeout = Object.freeze({
   ERROR: 5000,
   INFO: 3000,
+  STICKY: 0,
   SUCCESS: 3000,
   WARNING: 5000
 });
diff --git a/frontend/src/utils/templates.ts b/frontend/src/utils/templates.ts
index 611eb432..52a85420 100644
--- a/frontend/src/utils/templates.ts
+++ b/frontend/src/utils/templates.ts
@@ -1,21 +1,26 @@
-export const roadmapTemplate = (replaceConfig: { [key: string]: string | string[] }) => {
+export const roadmapTemplate = (replaceConfig: { [key: string]: string | string[] | undefined }) => {
   // Using template literal, baseTemplate's whitespace matters
   {/* prettier-ignore */}
   const baseTemplate = `Dear {{ contactName }},
+
 Here is your Permit Roadmap for {{ locationAddress }},
+
 You need to apply for the following permit(s):
 {{ permitStateNew }}
+
 Based on the information provided, you have already applied for the following permit(s):
 {{ permitStateApplied }}
+
 Based on the information provided, you have completed the process for the following permit(s):
 {{ permitStateCompleted }}
+
 Regards,
 {{ navigatorName }}`;
 
   return replacePlaceholders(baseTemplate, replaceConfig);
 };
 
-const replacePlaceholders = (baseText: string, replacementConfig: { [key: string]: string | string[] }) => {
+const replacePlaceholders = (baseText: string, replacementConfig: { [key: string]: string | string[] | undefined }) => {
   if (!baseText || !Object.keys(replacementConfig)) return baseText;
 
   let newText = baseText;
diff --git a/frontend/src/utils/utils.ts b/frontend/src/utils/utils.ts
index 5bba9283..d72a9e3d 100644
--- a/frontend/src/utils/utils.ts
+++ b/frontend/src/utils/utils.ts
@@ -57,25 +57,6 @@ export function getFileCategory(mimeType: string): string {
   }
 }
 
-/**
- * gets the name of the permit type for each of the given permits
- * with the given status
- * @param permits
- * @param permitTypes
- * @param status
- * @returns array of permit type names eg: ['Fishing', 'Drilling', 'Parking']
- */
-export function getPermitTypesByStatus(permits: Array<Permit>, permitTypes: Array<PermitType>, status: string) {
-  return permits
-    .map(
-      (p) =>
-        permitTypes.find((pt) => {
-          return pt.permitTypeId === p.permitTypeId && p.status === status;
-        })?.name
-    )
-    .filter((p) => p !== undefined && p !== '');
-}
-
 /**
  * @function isDebugMode
  * Checks if the app is currently running in debug mode
@@ -120,6 +101,16 @@ export function joinPath(...items: Array<string>): string {
   } else return '';
 }
 
+/**
+ * @function parseCSV
+ * Converts a comma separated value string into an array of string values
+ * @param {string} value The CSV string to parse
+ * @returns {string[]} An array of string values, or `value` if it is not a string
+ */
+export function parseCSV(value: string): Array<string> {
+  return value.split(',').map((s) => s.trim());
+}
+
 /**
  * @function partition
  * Partitions an array into two array sets depending on conditional
diff --git a/frontend/src/views/SubmissionView.vue b/frontend/src/views/SubmissionView.vue
index 9cdf94c1..9a7ab300 100644
--- a/frontend/src/views/SubmissionView.vue
+++ b/frontend/src/views/SubmissionView.vue
@@ -7,7 +7,7 @@ import NoteCard from '@/components/note/NoteCard.vue';
 import NoteModal from '@/components/note/NoteModal.vue';
 import PermitCard from '@/components/permit/PermitCard.vue';
 import PermitModal from '@/components/permit/PermitModal.vue';
-import UpdateRoadmap from '@/components/roadmap/UpdateRoadmap.vue';
+import Roadmap from '@/components/roadmap/Roadmap.vue';
 import SubmissionForm from '@/components/submission/SubmissionForm.vue';
 import { Button, TabPanel, TabView, useToast } from '@/lib/primevue';
 import { submissionService, documentService, noteService, permitService } from '@/services';
@@ -26,6 +26,7 @@ const props = withDefaults(defineProps<Props>(), {});
 // State
 const documents: Ref<Array<Document>> = ref([]);
 const editable: Ref<boolean> = ref(false);
+const loading: Ref<boolean> = ref(true);
 const notes: Ref<Array<Note>> = ref([]);
 const noteModalVisible: Ref<boolean> = ref(false);
 const permits: Ref<Array<Permit>> = ref([]);
@@ -72,11 +73,17 @@ async function onSubmissionSubmit(data: Submission) {
 }
 
 onMounted(async () => {
-  submission.value = (await submissionService.getSubmission(props.activityId)).data;
-  documents.value = (await documentService.listDocuments(props.activityId)).data;
-  notes.value = (await noteService.listNotes(props.activityId)).data;
-  permits.value = (await permitService.listPermits(props.activityId)).data;
-  permitTypes.value = (await permitService.getPermitTypes()).data;
+  [submission.value, documents.value, notes.value, permits.value, permitTypes.value] = (
+    await Promise.all([
+      submissionService.getSubmission(props.activityId),
+      documentService.listDocuments(props.activityId),
+      noteService.listNotes(props.activityId),
+      permitService.listPermits(props.activityId),
+      permitService.getPermitTypes()
+    ])
+  ).map((r) => r.data);
+
+  loading.value = false;
 });
 </script>
 
@@ -104,22 +111,23 @@ onMounted(async () => {
 
   <TabView>
     <TabPanel header="Info">
-      <Button
-        v-if="!editable"
-        class="mb-3"
-        :disabled="editable"
-        @click="editable = true"
-      >
-        Edit
-      </Button>
-
-      <SubmissionForm
-        v-if="submission"
-        :editable="editable"
-        :submission="submission"
-        @cancel="editable = false"
-        @submit="onSubmissionSubmit"
-      />
+      <span v-if="!loading">
+        <Button
+          v-if="!editable"
+          class="mb-3"
+          :disabled="editable"
+          @click="editable = true"
+        >
+          Edit
+        </Button>
+
+        <SubmissionForm
+          :editable="editable"
+          :submission="submission as Submission"
+          @cancel="editable = false"
+          @submit="onSubmissionSubmit"
+        />
+      </span>
     </TabPanel>
     <TabPanel header="Files">
       <div class="grid nested-grid">
@@ -221,13 +229,13 @@ onMounted(async () => {
         @note:submit="onNoteSubmit"
       />
     </TabPanel>
-    <TabPanel header="Road Map">
-      <UpdateRoadmap
-        v-if="submission"
+    <TabPanel header="Roadmap">
+      <Roadmap
+        v-if="!loading"
         :activity-id="activityId"
         :permits="permits"
-        :permitTypes="permitTypes"
-        :submission="submission"
+        :permit-types="permitTypes"
+        :submission="submission as Submission"
       />
     </TabPanel>
   </TabView>