diff --git a/app/src/controllers/document.ts b/app/src/controllers/document.ts
index 2062bc8f..a53ed34a 100644
--- a/app/src/controllers/document.ts
+++ b/app/src/controllers/document.ts
@@ -20,7 +20,7 @@ const controller = {
         req.body.mimeType,
         req.body.length
       );
-      res.status(200).json(response);
+      res.status(201).json(response);
     } catch (e: unknown) {
       next(e);
     }
diff --git a/app/src/controllers/note.ts b/app/src/controllers/note.ts
index 951619af..d58ec8ee 100644
--- a/app/src/controllers/note.ts
+++ b/app/src/controllers/note.ts
@@ -17,7 +17,7 @@ const controller = {
         ...body,
         createdBy: userId
       });
-      res.status(200).json(response);
+      res.status(201).json(response);
     } catch (e: unknown) {
       next(e);
     }
diff --git a/app/src/controllers/permit.ts b/app/src/controllers/permit.ts
index 27e2eabb..5d5ad836 100644
--- a/app/src/controllers/permit.ts
+++ b/app/src/controllers/permit.ts
@@ -11,7 +11,7 @@ const controller = {
     try {
       const userId = await userService.getCurrentUserId(getCurrentIdentity(req.currentUser, NIL), NIL);
       const response = await permitService.createPermit({ ...(req.body as Permit), updatedBy: userId });
-      res.status(200).json(response);
+      res.status(201).json(response);
     } catch (e: unknown) {
       next(e);
     }
diff --git a/app/src/controllers/submission.ts b/app/src/controllers/submission.ts
index 1eab45a9..397d63a8 100644
--- a/app/src/controllers/submission.ts
+++ b/app/src/controllers/submission.ts
@@ -9,28 +9,6 @@ import type { NextFunction, Request, Response } from '../interfaces/IExpress';
 import type { ChefsFormConfig, ChefsFormConfigData, Submission, ChefsSubmissionExport, Permit } from '../types';
 
 const controller = {
-  createEmptySubmission: async (req: Request, res: Response, next: NextFunction) => {
-    let testSubmissionId;
-    let submissionQuery;
-
-    // Testing for activityId collisions, which are truncated UUIDs
-    // If a collision is detected, generate new UUID and test again
-    do {
-      testSubmissionId = uuidv4();
-      submissionQuery = await submissionService.getSubmission(testSubmissionId.substring(0, 8).toUpperCase());
-    } while (submissionQuery);
-
-    try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const submitter = (req.currentUser?.tokenPayload as any)?.idir_username;
-      const result = await submissionService.createEmptySubmission(testSubmissionId, submitter);
-
-      res.status(201).json({ activityId: result.activity_id });
-    } catch (e: unknown) {
-      next(e);
-    }
-  },
-
   checkAndStoreNewSubmissions: async () => {
     const cfg = config.get('server.chefs.forms') as ChefsFormConfig;
 
@@ -175,6 +153,28 @@ const controller = {
     notStored.map((x) => x.permits?.map(async (y) => await permitService.createPermit(y)));
   },
 
+  createEmptySubmission: async (req: Request, res: Response, next: NextFunction) => {
+    let testSubmissionId;
+    let submissionQuery;
+
+    // Testing for activityId collisions, which are truncated UUIDs
+    // If a collision is detected, generate new UUID and test again
+    do {
+      testSubmissionId = uuidv4();
+      submissionQuery = await submissionService.getSubmission(testSubmissionId.substring(0, 8).toUpperCase());
+    } while (submissionQuery);
+
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const submitter = (req.currentUser?.tokenPayload as any)?.idir_username;
+      const result = await submissionService.createEmptySubmission(testSubmissionId, submitter);
+
+      res.status(201).json({ activityId: result.activity_id });
+    } catch (e: unknown) {
+      next(e);
+    }
+  },
+
   getStatistics: async (
     req: Request<never, { dateFrom: string; dateTo: string; monthYear: string; userId: string }>,
     res: Response,
diff --git a/app/src/services/note.ts b/app/src/services/note.ts
index 2e1b1427..ed62185c 100644
--- a/app/src/services/note.ts
+++ b/app/src/services/note.ts
@@ -24,6 +24,12 @@ const service = {
     return note.fromPrismaModel(response);
   },
 
+  /**
+   * @function deleteNote
+   * Soft deletes a note by marking is as deleted
+   * @param {string} noteId ID of the note to delete
+   * @returns {Promise<Note>} The result of running the update operation
+   */
   deleteNote: async (noteId: string) => {
     const result = await prisma.note.update({
       where: {
@@ -76,8 +82,15 @@ const service = {
     return response.map((x) => note.fromPrismaModel(x));
   },
 
+  /**
+   * @function updateNote
+   * Updates a note by marking the old note as deleted and creating a new one
+   * @param {Note} data New Note object
+   * @returns {Promise<Note>} The result of running the transaction
+   */
   updateNote: async (data: Note) => {
     return await prisma.$transaction(async (trx) => {
+      // Mark old note as deleted
       await trx.note.update({
         where: {
           note_id: data.noteId
@@ -87,16 +100,15 @@ const service = {
         }
       });
 
-      const newNote = {
-        ...data,
-        noteId: uuidv4()
-      };
-
-      const newCreatedNote = await trx.note.create({
-        data: note.toPrismaModel(newNote)
+      // Create new note
+      const response = await trx.note.create({
+        data: note.toPrismaModel({
+          ...data,
+          noteId: uuidv4()
+        })
       });
 
-      return note.fromPrismaModel(newCreatedNote);
+      return note.fromPrismaModel(response);
     });
   }
 };
diff --git a/app/tests/unit/controllers/document.spec.ts b/app/tests/unit/controllers/document.spec.ts
index 81e8188b..4277aace 100644
--- a/app/tests/unit/controllers/document.spec.ts
+++ b/app/tests/unit/controllers/document.spec.ts
@@ -29,7 +29,7 @@ describe('createDocument', () => {
   // Mock service calls
   const createSpy = jest.spyOn(documentService, 'createDocument');
 
-  it('should return 200 if all good', async () => {
+  it('should return 201 if all good', async () => {
     const req = {
       body: { documentId: 'abc123', activityId: '1', filename: 'testfile', mimeType: 'imgjpg', length: 1234567 },
       currentUser: CURRENT_USER
@@ -56,7 +56,7 @@ describe('createDocument', () => {
       req.body.mimeType,
       req.body.length
     );
-    expect(res.status).toHaveBeenCalledWith(200);
+    expect(res.status).toHaveBeenCalledWith(201);
     expect(res.json).toHaveBeenCalledWith(created);
   });
 
diff --git a/app/tests/unit/controllers/note.spec.ts b/app/tests/unit/controllers/note.spec.ts
index 415e0c25..d56876cd 100644
--- a/app/tests/unit/controllers/note.spec.ts
+++ b/app/tests/unit/controllers/note.spec.ts
@@ -34,7 +34,7 @@ describe('createNote', () => {
   const getCurrentIdentitySpy = jest.spyOn(utils, 'getCurrentIdentity');
   const getCurrentUserIdSpy = jest.spyOn(userService, 'getCurrentUserId');
 
-  it('should return 200 if all good', async () => {
+  it('should return 201 if all good', async () => {
     const req = {
       body: {
         noteId: '123-123',
@@ -75,7 +75,7 @@ describe('createNote', () => {
     expect(getCurrentUserIdSpy).toHaveBeenCalledWith(USR_IDENTITY, NIL);
     expect(createSpy).toHaveBeenCalledTimes(1);
     expect(createSpy).toHaveBeenCalledWith({ ...req.body, createdBy: USR_ID });
-    expect(res.status).toHaveBeenCalledWith(200);
+    expect(res.status).toHaveBeenCalledWith(201);
     expect(res.json).toHaveBeenCalledWith(created);
   });
 
diff --git a/app/tests/unit/controllers/permit.spec.ts b/app/tests/unit/controllers/permit.spec.ts
index 78f1733c..c1ed3e22 100644
--- a/app/tests/unit/controllers/permit.spec.ts
+++ b/app/tests/unit/controllers/permit.spec.ts
@@ -34,7 +34,7 @@ describe('createPermit', () => {
   const getCurrentIdentitySpy = jest.spyOn(utils, 'getCurrentIdentity');
   const getCurrentUserIdSpy = jest.spyOn(userService, 'getCurrentUserId');
 
-  it('should return 200 if all good', async () => {
+  it('should return 201 if all good', async () => {
     const now = new Date();
     const req = {
       body: {
@@ -81,7 +81,7 @@ describe('createPermit', () => {
     expect(getCurrentUserIdSpy).toHaveBeenCalledWith(USR_IDENTITY, NIL);
     expect(createSpy).toHaveBeenCalledTimes(1);
     expect(createSpy).toHaveBeenCalledWith({ ...req.body, updatedBy: USR_ID });
-    expect(res.status).toHaveBeenCalledWith(200);
+    expect(res.status).toHaveBeenCalledWith(201);
     expect(res.json).toHaveBeenCalledWith(created);
   });
 
diff --git a/frontend/src/components/file/DocumentCard.vue b/frontend/src/components/file/DocumentCard.vue
index fd2e6a64..7df2f754 100644
--- a/frontend/src/components/file/DocumentCard.vue
+++ b/frontend/src/components/file/DocumentCard.vue
@@ -4,6 +4,7 @@ import { ref } from 'vue';
 
 import { Button, Card, useConfirm, useToast } from '@/lib/primevue';
 import { documentService } from '@/services';
+import { useSubmissionStore } from '@/store';
 import { FILE_CATEGORIES } from '@/utils/constants';
 import { formatDateLong } from '@/utils/formatters';
 import { getFileCategory } from '@/utils/utils';
@@ -22,8 +23,8 @@ import type { Document } from '@/types';
 
 // Props
 type Props = {
-  document: Document;
   deleteButton?: boolean;
+  document: Document;
   selectable?: boolean;
   selected?: boolean;
 };
@@ -35,7 +36,10 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 // Emits
-const emit = defineEmits(['document:clicked', 'document:deleted']);
+const emit = defineEmits(['document:clicked']);
+
+// Store
+const submissionStore = useSubmissionStore();
 
 // State
 const isSelected: Ref<boolean> = ref(props.selected);
@@ -44,18 +48,18 @@ const isSelected: Ref<boolean> = ref(props.selected);
 const confirm = useConfirm();
 const toast = useToast();
 
-const confirmDelete = (documentId: string, filename: string) => {
-  if (documentId) {
+const confirmDelete = (document: Document) => {
+  if (document) {
     confirm.require({
-      message: `Please confirm that you want to delete ${filename}.`,
+      message: `Please confirm that you want to delete ${document.filename}.`,
       header: 'Delete document?',
       acceptLabel: 'Confirm',
       rejectLabel: 'Cancel',
       accept: () => {
         documentService
-          .deleteDocument(documentId)
+          .deleteDocument(document.documentId)
           .then(() => {
-            emit('document:deleted', documentId);
+            submissionStore.removeDocument(document);
             toast.success('Document deleted');
           })
           .catch((e: any) => toast.error('Failed to deleted document', e.message));
@@ -133,7 +137,7 @@ function onClick() {
         aria-label="Delete object"
         @click="
           (e) => {
-            confirmDelete(props.document.documentId, props.document.filename);
+            confirmDelete(props.document);
             e.stopPropagation();
           }
         "
diff --git a/frontend/src/components/file/FileUpload.vue b/frontend/src/components/file/FileUpload.vue
index 82371df3..e7c0d078 100644
--- a/frontend/src/components/file/FileUpload.vue
+++ b/frontend/src/components/file/FileUpload.vue
@@ -4,11 +4,10 @@ import { ref } from 'vue';
 
 import { FileUpload, useToast } from '@/lib/primevue';
 import { documentService } from '@/services';
-import { useConfigStore } from '@/store';
+import { useConfigStore, useSubmissionStore } from '@/store';
 
 import type { FileUploadUploaderEvent } from 'primevue/fileupload';
 import type { Ref } from 'vue';
-import type { Document } from '@/types';
 
 // Props
 type Props = {
@@ -17,10 +16,9 @@ type Props = {
 
 const props = withDefaults(defineProps<Props>(), {});
 
-const lastUploadedDocument = defineModel<Document>('lastUploadedDocument');
-
 // Store
 const { getConfig } = storeToRefs(useConfigStore());
+const submissionStore = useSubmissionStore();
 
 // State
 const fileInput: Ref<any> = ref(null);
@@ -28,24 +26,23 @@ const fileInput: Ref<any> = ref(null);
 // Actions
 const toast = useToast();
 
-const onFileUploadDragAndDrop = (event: FileUploadUploaderEvent) => {
-  onUpload(Array.isArray(event.files) ? event.files[0] : event.files);
-};
-
 const onFileUploadClick = () => {
   fileInput.value.click();
 };
 
+const onFileUploadDragAndDrop = (event: FileUploadUploaderEvent) => {
+  onUpload(Array.isArray(event.files) ? event.files[0] : event.files);
+};
+
 const onUpload = async (file: File) => {
   try {
     const response = (await documentService.createDocument(file, props.activityId, getConfig.value.coms.bucketId))
       ?.data;
 
     if (response) {
-      lastUploadedDocument.value = response;
+      submissionStore.addDocument(response);
+      toast.success('Document uploaded');
     }
-
-    toast.success('Document uploaded');
   } catch (e: any) {
     toast.error('Failed to upload document', e);
   }
diff --git a/frontend/src/components/note/NoteCard.vue b/frontend/src/components/note/NoteCard.vue
index f0466a0f..7bd583f6 100644
--- a/frontend/src/components/note/NoteCard.vue
+++ b/frontend/src/components/note/NoteCard.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 
-import { Button, Card, Divider, useToast } from '@/lib/primevue';
 import NoteModal from '@/components/note/NoteModal.vue';
-import { noteService, userService } from '@/services';
+import { Button, Card, Divider } from '@/lib/primevue';
+import { userService } from '@/services';
 import { formatDate, formatDateShort } from '@/utils/formatters';
 
 import type { Ref } from 'vue';
@@ -16,40 +16,11 @@ type Props = {
 
 const props = withDefaults(defineProps<Props>(), {});
 
-// Emits
-const emit = defineEmits(['note:delete', 'note:edit']);
-
 // State
-const userName: Ref<string> = ref('');
 const noteModalVisible: Ref<boolean> = ref(false);
-const editNoteData: Ref<Note | undefined> = ref(undefined);
+const userName: Ref<string> = ref('');
 
 // Actions
-const toast = useToast();
-
-const editNote = (note: Note) => {
-  editNoteData.value = note;
-  noteModalVisible.value = true;
-};
-
-const onNoteSubmit = async (data: Note) => {
-  editNoteData.value = undefined;
-
-  try {
-    const newNote = (await noteService.updateNote(data)).data;
-    emit('note:edit', newNote, data.noteId);
-    toast.success('Note saved');
-  } catch (e: any) {
-    toast.error('Failed to save note', e.message);
-  } finally {
-    noteModalVisible.value = false;
-  }
-};
-
-const onNoteDelete = (noteId: string) => {
-  emit('note:delete', noteId);
-};
-
 onMounted(() => {
   if (props.note.createdBy) {
     userService.searchUsers({ userId: [props.note.createdBy] }).then((res) => {
@@ -77,7 +48,7 @@ onMounted(() => {
         <Button
           class="p-button-outlined"
           aria-label="Edit"
-          @click="editNote(props.note)"
+          @click="noteModalVisible = true"
         >
           <font-awesome-icon
             class="pr-2"
@@ -132,11 +103,12 @@ onMounted(() => {
       </div>
     </template>
   </Card>
+
   <NoteModal
+    v-if="props.note && noteModalVisible"
     v-model:visible="noteModalVisible"
-    :note="editNoteData"
-    @note:delete="onNoteDelete"
-    @note:submit="onNoteSubmit"
+    :activity-id="props.note.activityId"
+    :note="props.note"
   />
 </template>
 
diff --git a/frontend/src/components/note/NoteModal.vue b/frontend/src/components/note/NoteModal.vue
index 5dcdb1dd..01ec21a9 100644
--- a/frontend/src/components/note/NoteModal.vue
+++ b/frontend/src/components/note/NoteModal.vue
@@ -1,43 +1,46 @@
 <script setup lang="ts">
 import { Form } from 'vee-validate';
+import { nextTick, ref, watch } from 'vue';
 import { mixed, object, string } from 'yup';
 
 import { Calendar, Dropdown, InputText, TextArea } from '@/components/form';
 import { Button, Dialog, useConfirm, useToast } from '@/lib/primevue';
 import { noteService } from '@/services';
+import { useSubmissionStore } from '@/store';
 import { BringForwardTypes, NoteTypes } from '@/utils/constants';
 import { BRING_FORWARD_TYPES, NOTE_TYPES } from '@/utils/enums';
 
-import type { Note } from '@/types';
-import { nextTick, ref, watch } from 'vue';
 import type { Ref } from 'vue';
+import type { Note } from '@/types';
 
 // Props
 type Props = {
+  activityId: string;
   note?: Note;
-  activityId?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
-  note: undefined,
-  activityId: undefined
+  note: undefined
 });
 
-// Emits
-const emit = defineEmits(['note:delete', 'note:submit']);
+// Store
+const submissionStore = useSubmissionStore();
 
 // State
-const visible = defineModel<boolean>('visible');
 const formRef: Ref<InstanceType<typeof Form> | null> = ref(null);
-const showBringForward: Ref<boolean> = ref(false);
+const showBringForward: Ref<boolean> = ref(props.note?.noteType === NOTE_TYPES.BRING_FORWARD);
+const visible = defineModel<boolean>('visible');
 
 // Default form values
 let initialFormValues: any = {
-  createdAt: new Date(),
-  bringForwardDate: null,
-  bringForwardState: null,
+  activityId: props.note?.activityId,
+  bringForwardDate: props.note?.bringForwardDate ? new Date(props.note.bringForwardDate) : null,
+  bringForwardState: props.note?.bringForwardState ?? null,
+  createdAt: props.note?.createdAt ? new Date(props.note.createdAt) : new Date(),
   note: props.note?.note,
-  noteType: NOTE_TYPES.GENERAL
+  noteId: props.note?.noteId,
+  noteType: props.note?.noteType ?? NOTE_TYPES.GENERAL,
+  title: props.note?.title
 };
 
 // Form validation schema
@@ -71,108 +74,71 @@ const formSchema = object({
 const confirm = useConfirm();
 const toast = useToast();
 
-// @ts-expect-error TS7031
-// resetForm is an automatic binding https://vee-validate.logaretm.com/v4/guide/components/handling-forms/
-async function onSubmit(data: any, { resetForm }) {
-  const parsedData = {
-    ...data,
-    createdAt: new Date(data.createdAt)
-  };
-
-  if (props.note) initialFormValues = parsedData;
-  else resetForm();
-
-  emit('note:submit', parsedData);
-}
-
-const onDelete = async () => {
-  if (props.note?.noteId) {
+function onDelete() {
+  if (props.note) {
     confirm.require({
       message: 'Please confirm that you want to delete the selected note.',
       header: 'Confirm delete',
       acceptLabel: 'Confirm',
       acceptClass: 'p-button-danger',
       rejectLabel: 'Cancel',
-      accept: async () => {
-        try {
-          if (props.note) {
-            await noteService.deleteNote(props.note?.noteId);
-            emit('note:delete', props.note.noteId);
-
+      accept: () => {
+        noteService
+          .deleteNote(props.note?.noteId as string)
+          .then(() => {
+            submissionStore.removeNote(props.note as Note);
             toast.success('Note deleted');
-          }
-        } catch (e) {
-          toast.error('Failed to delete note');
-        } finally {
-          visible.value = false;
-          formRef.value ? formRef.value.resetForm() : null;
-        }
+          })
+          .catch((e: any) => toast.error('Failed to delete note', e.message))
+          .finally(() => {
+            visible.value = false;
+            formRef.value?.resetForm();
+          });
       }
     });
   }
-};
-
-const setShowBringForwardState = () => {
-  formRef.value?.setFieldValue('bringForwardState', BRING_FORWARD_TYPES.UNRESOLVED);
-  showBringForward.value = true;
-};
-
-const setHideBringForwardState = () => {
-  showBringForward.value = false;
-  formRef.value?.setFieldValue('bringForwardDate', null);
-  formRef.value?.setFieldValue('bringForwardState', null);
-};
+}
 
-const handleBringForward = (e: { OriginalEvent: Event; value: string }) => {
+const onNoteTypeChange = (e: { OriginalEvent: Event; value: string }) => {
   if (e.value === NOTE_TYPES.BRING_FORWARD) {
-    setShowBringForwardState();
+    formRef.value?.setFieldValue('bringForwardState', BRING_FORWARD_TYPES.UNRESOLVED);
+    showBringForward.value = true;
   } else {
-    setHideBringForwardState();
+    formRef.value?.setFieldValue('bringForwardDate', null);
+    formRef.value?.setFieldValue('bringForwardState', null);
+    showBringForward.value = false;
   }
 };
 
-watch(visible, (newValue) => {
-  // nextTick triggers when modal becomes visible
-  nextTick().then(() => {
-    if (!newValue) {
-      setHideBringForwardState();
-      return;
-    }
-
-    // sets 'createdAt' to current time when modal is visible
-    if (formRef.value) {
-      formRef.value.setFieldValue('createdAt', new Date());
-
-      // set form values if editing existing note
-      if (props.note) {
-        formRef.value.setFieldValue('noteId', props.note.noteId);
-        formRef.value.setFieldValue('activityId', props.note.activityId);
-        formRef.value.setFieldValue('bringForwardState', props.note.bringForwardState);
-        formRef.value.setFieldValue('noteType', props.note.noteType);
-        if (props.note.noteType === NOTE_TYPES.BRING_FORWARD) {
-          setShowBringForwardState();
-          formRef.value.setFieldValue(
-            'bringForwardDate',
-            props.note.bringForwardDate ? new Date(props.note.bringForwardDate) : null
-          );
-        }
-        formRef.value.setFieldValue('note', props.note.note);
-        formRef.value.setFieldValue('title', props.note.title);
-      }
+// @ts-expect-error TS7031
+// resetForm is an automatic binding https://vee-validate.logaretm.com/v4/guide/components/handling-forms/
+async function onSubmit(data: any, { resetForm }) {
+  try {
+    if (!props.note) {
+      const result = (await noteService.createNote({ ...data, activityId: props.activityId })).data;
+      submissionStore.addNote(result, true);
+      resetForm();
+    } else {
+      const result = (await noteService.updateNote({ ...data, activityId: props.activityId })).data;
+      submissionStore.updateNote(props.note, result);
+      initialFormValues = data;
     }
-  });
-});
+    toast.success('Note saved');
+  } catch (e: any) {
+    toast.error('Failed to save note', e.message);
+  } finally {
+    visible.value = false;
+  }
+}
 </script>
 
 <template>
-  <!-- eslint-disable vue/no-v-model-argument -->
   <Dialog
     v-model:visible="visible"
     :draggable="false"
     :modal="true"
     class="app-info-dialog w-6"
   >
-    <!-- eslint-enable vue/no-v-model-argument -->
     <template #header>
       <font-awesome-icon
         icon="fa-solid fa-plus"
@@ -184,6 +150,7 @@ watch(visible, (newValue) => {
 
     <Form
       ref="formRef"
+      v-slot="{ handleReset }"
       :initial-values="initialFormValues"
       :validation-schema="formSchema"
       @submit="onSubmit"
@@ -193,7 +160,7 @@ watch(visible, (newValue) => {
           class="col-6"
           name="createdAt"
           label="Date"
-          :disabled="true"
+          :disabled="!props.note"
           :show-time="true"
         />
         <div class="col-6" />
@@ -202,7 +169,7 @@ watch(visible, (newValue) => {
           name="noteType"
           label="Note type"
           :options="NoteTypes"
-          @on-change="(e) => handleBringForward(e)"
+          @on-change="(e) => onNoteTypeChange(e)"
         />
         <Calendar
           v-if="showBringForward"
@@ -247,7 +214,13 @@ watch(visible, (newValue) => {
               class="p-button-outlined mr-2"
               label="Cancel"
               icon="pi pi-times"
-              @click="visible = false"
+              @click="
+                () => {
+                  handleReset();
+                  showBringForward = props.note?.noteType === NOTE_TYPES.BRING_FORWARD;
+                  visible = false;
+                }
+              "
             />
           </div>
           <div
diff --git a/frontend/src/components/permit/PermitCard.vue b/frontend/src/components/permit/PermitCard.vue
index c88bb73b..2c0b362e 100644
--- a/frontend/src/components/permit/PermitCard.vue
+++ b/frontend/src/components/permit/PermitCard.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { computed, ref, watchEffect } from 'vue';
 
 import PermitModal from '@/components/permit/PermitModal.vue';
-import { Button, Card, Divider, useConfirm, useToast } from '@/lib/primevue';
-import { permitService, userService } from '@/services';
+import { Button, Card, Divider } from '@/lib/primevue';
+import { userService } from '@/services';
+import { useSubmissionStore } from '@/store';
 import { formatDate } from '@/utils/formatters';
 
 import type { Ref } from 'vue';
@@ -12,49 +14,23 @@ import type { Permit, PermitType } from '@/types';
 // Props
 type Props = {
   permit: Permit;
-  permitTypes: Array<PermitType>;
 };
 
 const props = withDefaults(defineProps<Props>(), {});
 
-// Emits
-const emit = defineEmits(['permit:delete', 'permit:update']);
+// Store
+const { getPermitTypes } = storeToRefs(useSubmissionStore());
 
 // State
-const cardData: Ref<Permit> = ref(props.permit);
+const cardData = computed(() => props.permit);
+const cardUpdatedBy: Ref<string> = ref('');
+const permitModalVisible: Ref<boolean> = ref(false);
 const permitType: Ref<PermitType | undefined> = ref(
-  props.permitTypes.find((x) => x.permitTypeId === props.permit.permitTypeId) as PermitType
+  getPermitTypes.value.find((x) => x.permitTypeId === props.permit.permitTypeId)
 );
-const permitModalVisible: Ref<boolean> = ref(false);
-const cardUpdatedBy: Ref<string> = ref('');
 
 // Actions
-const confirm = useConfirm();
-const toast = useToast();
-
-const confirmDelete = (data: Permit) => {
-  if (data.permitId) {
-    confirm.require({
-      message: 'Please confirm that you want to delete the selected permit. This cannot be undone.',
-      header: 'Confirm delete',
-      acceptLabel: 'Confirm',
-      acceptClass: 'p-button-danger',
-      rejectLabel: 'Cancel',
-      accept: () => {
-        permitService
-          .deletePermit(data.permitId)
-          .then(() => {
-            emit('permit:delete', data);
-            toast.success('Permit deleted');
-          })
-          .catch((e: any) => toast.error('Failed to delete permit', e.message))
-          .finally(() => (permitModalVisible.value = false));
-      }
-    });
-  }
-};
-
-function populateUpdatedBy() {
+watchEffect(() => {
   if (cardData.value.updatedBy) {
     userService
       .searchUsers({ userId: [cardData.value.updatedBy] })
@@ -63,24 +39,10 @@ function populateUpdatedBy() {
       })
       .catch(() => {});
   }
-}
-
-async function onPermitSubmit(data: Permit) {
-  try {
-    const result = await permitService.updatePermit({ ...data, activityId: props.permit.activityId });
-    cardData.value = result.data;
-    emit('permit:update', result.data);
-    toast.success('Permit saved');
-  } catch (e: any) {
-    toast.error('Failed to update permit', e.message);
-  } finally {
-    populateUpdatedBy();
-    permitModalVisible.value = false;
-  }
-}
+});
 
-onMounted(() => {
-  populateUpdatedBy();
+watchEffect(() => {
+  permitType.value = getPermitTypes.value.find((x) => x.permitTypeId === props.permit.permitTypeId);
 });
 </script>
 
@@ -176,10 +138,8 @@ onMounted(() => {
 
   <PermitModal
     v-model:visible="permitModalVisible"
+    :activity-id="cardData.activityId"
     :permit="cardData"
-    :permit-types="permitTypes"
-    @permit:delete="confirmDelete"
-    @permit:submit="onPermitSubmit"
   />
 </template>
 
diff --git a/frontend/src/components/permit/PermitModal.vue b/frontend/src/components/permit/PermitModal.vue
index 480e14d7..06c8a730 100644
--- a/frontend/src/components/permit/PermitModal.vue
+++ b/frontend/src/components/permit/PermitModal.vue
@@ -1,35 +1,39 @@
 <script setup lang="ts">
+import { storeToRefs } from 'pinia';
 import { Form } from 'vee-validate';
 import { ref } from 'vue';
 import { object, string } from 'yup';
 
 import { Calendar, Dropdown, InputText } from '@/components/form';
-import { Button, Dialog } from '@/lib/primevue';
+import { Button, Dialog, useConfirm, useToast } from '@/lib/primevue';
+import { permitService } from '@/services';
+import { useSubmissionStore } from '@/store';
 import { PermitAuthorizationStatus, PermitNeeded, PermitStatus } from '@/utils/constants';
 import { PERMIT_STATUS } from '@/utils/enums';
 
+import type { DropdownChangeEvent } from 'primevue/dropdown';
 import type { Ref } from 'vue';
 import type { Permit, PermitForm, PermitType } from '@/types';
-import type { DropdownChangeEvent } from 'primevue/dropdown';
 
 // Props
 type Props = {
+  activityId: string;
   permit?: Permit;
-  permitTypes: Array<PermitType>;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   permit: undefined
 });
 
-// Emits
-const emit = defineEmits(['permit:delete', 'permit:submit']);
+// Store
+const submissionStore = useSubmissionStore();
+const { getPermitTypes } = storeToRefs(submissionStore);
 
 // State
-const visible = defineModel<boolean>('visible');
 const permitType: Ref<PermitType | undefined> = ref(
-  props.permitTypes.find((x) => x.permitTypeId === props.permit?.permitTypeId)
+  getPermitTypes.value.find((x) => x.permitTypeId === props.permit?.permitTypeId)
 );
+const visible = defineModel<boolean>('visible');
 
 // Default form values
 let initialFormValues: PermitForm = {
@@ -58,8 +62,29 @@ const formSchema = object({
 });
 
 // Actions
+const confirm = useConfirm();
+const toast = useToast();
+
 function onDelete() {
-  emit('permit:delete', props.permit);
+  if (props.permit) {
+    confirm.require({
+      message: 'Please confirm that you want to delete the selected permit. This cannot be undone.',
+      header: 'Confirm delete',
+      acceptLabel: 'Confirm',
+      acceptClass: 'p-button-danger',
+      rejectLabel: 'Cancel',
+      accept: () => {
+        permitService
+          .deletePermit(props.permit?.permitId as string)
+          .then(() => {
+            submissionStore.removePermit(props.permit as Permit);
+            toast.success('Permit deleted');
+          })
+          .catch((e: any) => toast.error('Failed to delete permit', e.message))
+          .finally(() => (visible.value = false));
+      }
+    });
+  }
 }
 
 function onPermitTypeChanged(e: DropdownChangeEvent, setValues: Function) {
@@ -73,7 +98,7 @@ function onPermitTypeChanged(e: DropdownChangeEvent, setValues: Function) {
 
 // @ts-expect-error TS7031
 // resetForm is an automatic binding https://vee-validate.logaretm.com/v4/guide/components/handling-forms/
-function onSubmit(data: PermitForm, { resetForm }) {
+async function onSubmit(data: PermitForm, { resetForm }) {
   if (props.permit) initialFormValues = { ...data };
   else resetForm();
 
@@ -89,7 +114,21 @@ function onSubmit(data: PermitForm, { resetForm }) {
     submittedDate: data.submittedDate?.toISOString(),
     adjudicationDate: data.adjudicationDate?.toISOString()
   } as Permit;
-  emit('permit:submit', permitData);
+
+  try {
+    if (!props.permit) {
+      const result = (await permitService.createPermit({ ...permitData, activityId: props.activityId })).data;
+      submissionStore.addPermit(result);
+    } else {
+      const result = (await permitService.updatePermit({ ...permitData, activityId: props.permit.activityId })).data;
+      submissionStore.updatePermit(result);
+    }
+    toast.success('Permit saved');
+  } catch (e: any) {
+    toast.error('Failed to save permit', e.message);
+  } finally {
+    visible.value = false;
+  }
 }
 </script>
 
@@ -127,9 +166,9 @@ function onSubmit(data: PermitForm, { resetForm }) {
           class="col-12"
           name="permitType"
           label="Permit"
-          :options="permitTypes"
+          :options="getPermitTypes"
           :option-label="(e) => `${e.businessDomain}: ${e.name}`"
-          :loading="permitTypes === undefined"
+          :loading="getPermitTypes === undefined"
           autofocus
           @on-change="(e: DropdownChangeEvent) => onPermitTypeChanged(e, setValues)"
         />
diff --git a/frontend/src/components/roadmap/Roadmap.vue b/frontend/src/components/roadmap/Roadmap.vue
index 20912f93..2f5b61d7 100644
--- a/frontend/src/components/roadmap/Roadmap.vue
+++ b/frontend/src/components/roadmap/Roadmap.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { storeToRefs } from 'pinia';
 import { Form } from 'vee-validate';
 import { ref, watchEffect } from 'vue';
 import { array, object, string } from 'yup';
@@ -7,27 +8,23 @@ import FileSelectModal from '@/components/file/FileSelectModal.vue';
 import { InputText, TextArea } from '@/components/form';
 import { Button, useConfirm, useToast } from '@/lib/primevue';
 import { roadmapService, userService } from '@/services';
-import { useConfigStore } from '@/store';
+import { useConfigStore, useSubmissionStore } from '@/store';
 import { PERMIT_NEEDED, PERMIT_STATUS } from '@/utils/enums';
 import { roadmapTemplate } from '@/utils/templates';
 
 import type { Ref } from 'vue';
-import type { Document, Permit, PermitType, Submission } from '@/types';
-import { storeToRefs } from 'pinia';
+import type { Document } from '@/types';
 
 // Props
 type Props = {
   activityId: string;
-  documents: Array<Document>;
-  permits: Array<Permit>;
-  permitTypes: Array<PermitType>;
-  submission: Submission;
 };
 
 const props = withDefaults(defineProps<Props>(), {});
 
 // Store
 const { getConfig } = storeToRefs(useConfigStore());
+const { getDocuments, getPermits, getPermitTypes, getSubmission } = storeToRefs(useSubmissionStore());
 
 // State
 const fileSelectModalVisible: Ref<boolean> = ref(false);
@@ -78,16 +75,16 @@ const confirmSubmit = (data: any) => {
   });
 };
 
-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)
+function getPermitTypeNamesByStatus(status: string) {
+  return getPermits.value
+    .map((p) => getPermitTypes.value.find((pt) => pt.permitTypeId === p.permitTypeId && p.status === status)?.name)
     .filter((pt) => !!pt)
     .map((name) => name as string);
 }
 
-function getPermitTypeNamesByNeeded(permits: Array<Permit>, permitTypes: Array<PermitType>, needed: string) {
-  return permits
-    .map((p) => permitTypes.find((pt) => pt.permitTypeId === p.permitTypeId && p.needed === needed)?.name)
+function getPermitTypeNamesByNeeded(needed: string) {
+  return getPermits.value
+    .map((p) => getPermitTypes.value.find((pt) => pt.permitTypeId === p.permitTypeId && p.needed === needed)?.name)
     .filter((pt) => !!pt)
     .map((name) => name as string);
 }
@@ -101,6 +98,11 @@ function onFileSelect(data: Array<Document>) {
 }
 
 watchEffect(async () => {
+  // Dumb, but need to do something with the ref for it to be watched properly
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  const permits = getPermits.value.concat();
+  const submission = getSubmission.value;
+
   // Get navigator details
   const configBCC = getConfig.value.ches?.bcc;
   let bcc = configBCC;
@@ -109,8 +111,8 @@ watchEffect(async () => {
     fullName: 'Permit Connect Navigator Service'
   };
 
-  if (props.submission.assignedUserId) {
-    const assignee = (await userService.searchUsers({ userId: [props.submission.assignedUserId] })).data[0];
+  if (submission?.assignedUserId) {
+    const assignee = (await userService.searchUsers({ userId: [submission.assignedUserId] })).data[0];
 
     if (assignee) {
       navigator = assignee;
@@ -120,19 +122,18 @@ watchEffect(async () => {
   }
 
   // Permits
-  const permitStateNew = getPermitTypeNamesByStatus(props.permits, props.permitTypes, PERMIT_STATUS.NEW).filter(
-    (value) => getPermitTypeNamesByNeeded(props.permits, props.permitTypes, PERMIT_NEEDED.YES).includes(value)
+  const permitStateNew = getPermitTypeNamesByStatus(PERMIT_STATUS.NEW).filter((value) =>
+    getPermitTypeNamesByNeeded(PERMIT_NEEDED.YES).includes(value)
   );
-  const permitPossiblyNeeded = getPermitTypeNamesByStatus(props.permits, props.permitTypes, PERMIT_STATUS.NEW).filter(
-    (value) =>
-      getPermitTypeNamesByNeeded(props.permits, props.permitTypes, PERMIT_NEEDED.UNDER_INVESTIGATION).includes(value)
+  const permitPossiblyNeeded = getPermitTypeNamesByStatus(PERMIT_STATUS.NEW).filter((value) =>
+    getPermitTypeNamesByNeeded(PERMIT_NEEDED.UNDER_INVESTIGATION).includes(value)
   );
-  const permitStateApplied = getPermitTypeNamesByStatus(props.permits, props.permitTypes, PERMIT_STATUS.APPLIED);
-  const permitStateCompleted = getPermitTypeNamesByStatus(props.permits, props.permitTypes, PERMIT_STATUS.COMPLETED);
+  const permitStateApplied = getPermitTypeNamesByStatus(PERMIT_STATUS.APPLIED);
+  const permitStateCompleted = getPermitTypeNamesByStatus(PERMIT_STATUS.COMPLETED);
 
   const body = roadmapTemplate({
-    '{{ contactName }}': props.submission.contactName ?? '',
-    '{{ locationAddress }}': props.submission.streetAddress ?? '',
+    '{{ contactName }}': submission?.contactName ?? '',
+    '{{ locationAddress }}': submission?.streetAddress ?? '',
     '{{ permitStateNew }}': permitStateNew,
     '{{ permitPossiblyNeeded }}': permitPossiblyNeeded,
     '{{ permitStateApplied }}': permitStateApplied,
@@ -143,7 +144,7 @@ watchEffect(async () => {
   // Initial form values
   initialFormValues.value = {
     from: navigator.email,
-    to: props.submission.contactEmail,
+    to: submission?.contactEmail,
     cc: undefined,
     bcc: bcc,
     subject: "Here is your housing project's Permit Roadmap", // eslint-disable-line quotes
@@ -151,6 +152,9 @@ watchEffect(async () => {
     body: body
   };
 
+  formRef.value?.setFieldValue('from', navigator.email);
+  formRef.value?.setFieldValue('to', submission?.contactEmail);
+  formRef.value?.setFieldValue('bcc', bcc);
   formRef.value?.setFieldValue('body', body);
 });
 </script>
@@ -234,7 +238,7 @@ watchEffect(async () => {
 
   <FileSelectModal
     v-model:visible="fileSelectModalVisible"
-    :documents="documents"
+    :documents="getDocuments"
     :selected-documents="selectedFiles.slice()"
     @file-select:submit="onFileSelect"
   />
diff --git a/frontend/src/components/submission/SubmissionBringForwardCalendar.vue b/frontend/src/components/submission/SubmissionBringForwardCalendar.vue
index aab0ea5e..adba3d43 100644
--- a/frontend/src/components/submission/SubmissionBringForwardCalendar.vue
+++ b/frontend/src/components/submission/SubmissionBringForwardCalendar.vue
@@ -4,11 +4,11 @@ import { ref, watchEffect } from 'vue';
 
 import { Column, DataTable, InputSwitch } from '@/lib/primevue';
 import { useAuthStore } from '@/store';
+import { RouteNames } from '@/utils/constants';
+import { formatDate } from '@/utils/formatters';
 
 import type { Ref } from 'vue';
 import type { BringForward } from '@/types';
-import { formatDate } from '@/utils/formatters';
-import { RouteNames } from '@/utils/constants';
 
 // Props
 type Props = {
@@ -23,12 +23,12 @@ const props = withDefaults(defineProps<Props>(), {
 const { getProfile } = storeToRefs(useAuthStore());
 
 // State
-const bfs: Ref<Array<BringForward>> = ref(props.bringForward);
+const bringForwards: Ref<Array<BringForward>> = ref(props.bringForward);
 const filterToUser: Ref<boolean> = ref(false);
 
 // Actions
 watchEffect(() => {
-  bfs.value = props.bringForward;
+  bringForwards.value = props.bringForward;
 });
 </script>
 
@@ -45,7 +45,7 @@ watchEffect(() => {
       <DataTable
         class="p-datatable-sm text-left w-full"
         :value="
-          bfs.filter((x) => {
+          bringForwards.filter((x) => {
             return filterToUser ? x.createdByFullName === getProfile?.name : x;
           })
         "
diff --git a/frontend/src/components/submission/SubmissionForm.vue b/frontend/src/components/submission/SubmissionForm.vue
index edd36aa2..c83f2f6c 100644
--- a/frontend/src/components/submission/SubmissionForm.vue
+++ b/frontend/src/components/submission/SubmissionForm.vue
@@ -13,8 +13,9 @@ import {
   InputText,
   TextArea
 } from '@/components/form';
-import { Button } from '@/lib/primevue';
-import { userService } from '@/services';
+import { Button, useToast } from '@/lib/primevue';
+import { submissionService, userService } from '@/services';
+import { useSubmissionStore } from '@/store';
 import {
   ApplicationStatusList,
   ContactPreferenceList,
@@ -32,18 +33,20 @@ import type { Submission, User } from '@/types';
 
 // Props
 type Props = {
-  editable: boolean;
+  editable?: boolean;
   submission: Submission;
 };
 
-const props = withDefaults(defineProps<Props>(), {});
+const props = withDefaults(defineProps<Props>(), {
+  editable: true
+});
 
-// Emits
-const emit = defineEmits(['submit', 'cancel']);
+// Store
+const submissionStore = useSubmissionStore();
 
 // State
 const assigneeOptions: Ref<Array<User>> = ref([]);
-
+const editable: Ref<boolean> = ref(props.editable);
 const initialFormValues: Ref<any | undefined> = ref(undefined);
 
 // Form validation schema
@@ -102,6 +105,8 @@ const formSchema = object({
 });
 
 // Actions
+const toast = useToast();
+
 const getAssigneeOptionLabel = (e: User) => {
   return `${e.fullName} [${e.email}]`;
 };
@@ -118,11 +123,9 @@ const onAssigneeInput = async (e: IInputEvent) => {
   }
 };
 
-const onCancel = () => {
-  emit('cancel');
-};
+const onSubmit = async (values: any) => {
+  editable.value = false;
 
-const onSubmit = (values: any) => {
   // Ensure child values are reset if parent not set
   if (!values.addedToATS) {
     values.atsClientNumber = undefined;
@@ -135,16 +138,29 @@ const onSubmit = (values: any) => {
     values.financiallySupportedHousingCoop = false;
   }
 
-  const submissionData = {
+  const submissionDataTransform = {
     ...values,
     assignedUserId: values.user?.userId ?? undefined,
     ...values.submissionTypes
   };
 
-  delete submissionData.submissionTypes;
-  delete submissionData.user;
+  delete submissionDataTransform.submissionTypes;
+  delete submissionDataTransform.user;
 
-  emit('submit', submissionData);
+  try {
+    const submissionData = {
+      ...submissionDataTransform
+    };
+    await submissionService.updateSubmission(submissionData.submissionId, submissionData);
+
+    submissionStore.setSubmission(submissionData);
+
+    toast.success('Form saved');
+  } catch (e: any) {
+    toast.error('Failed to save submission', e.message);
+  } finally {
+    editable.value = true;
+  }
 };
 
 onBeforeMount(async () => {
@@ -188,7 +204,7 @@ onBeforeMount(async () => {
         class="col-4"
         name="projectName"
         label="Project Name"
-        :disabled="!props.editable"
+        :disabled="!editable"
       />
       <Calendar
         class="col-4"
@@ -200,51 +216,51 @@ onBeforeMount(async () => {
         class="col-3"
         name="contactName"
         label="Contact"
-        :disabled="!props.editable"
+        :disabled="!editable"
       />
       <InputMask
         class="col-3"
         name="contactPhoneNumber"
         mask="(999) 999-9999"
         label="Contact phone"
-        :disabled="!props.editable"
+        :disabled="!editable"
       />
       <InputText
         class="col-3"
         name="contactEmail"
         label="Contact email"
-        :disabled="!props.editable"
+        :disabled="!editable"
       />
       <Dropdown
         class="col-3"
         name="contactPreference"
         label="Preferred contact method"
-        :disabled="!props.editable"
+        :disabled="!editable"
         :options="ContactPreferenceList"
       />
       <InputText
         class="col-6"
         name="contactApplicantRelationship"
         label="Relationship to activity"
-        :disabled="!props.editable"
+        :disabled="!editable"
       />
       <InputText
         class="col-6"
         name="companyNameRegistered"
         label="Company"
-        :disabled="!props.editable"
+        :disabled="!editable"
       />
       <TextArea
         class="col-12"
         name="projectDescription"
         label="Activity information"
-        :disabled="!props.editable"
+        :disabled="!editable"
       />
       <InputText
         class="col-4"
         name="locationPIDs"
         label="Location PID(s)"
-        :disabled="!props.editable"
+        :disabled="!editable"
         autofocus
       />
       <InputNumber
@@ -252,39 +268,39 @@ onBeforeMount(async () => {
         name="latitude"
         label="Location latitude"
         help-text="Optionally provide a number between 48 and 60"
-        :disabled="!props.editable"
+        :disabled="!editable"
       />
       <InputNumber
         class="col-4"
         name="longitude"
         label="Location longitude"
         help-text="Optionally provide a number between -114 and -139"
-        :disabled="!props.editable"
+        :disabled="!editable"
       />
       <InputText
         class="col-4"
         name="streetAddress"
         label="Location address"
-        :disabled="!props.editable"
+        :disabled="!editable"
       />
       <InputText
         class="col-4"
         name="singleFamilyUnits"
         label="Units"
-        :disabled="!props.editable"
+        :disabled="!editable"
       />
       <Dropdown
         class="col-4"
         name="isRentalUnit"
         label="Rental units"
-        :disabled="!props.editable"
+        :disabled="!editable"
         :options="RentalStatusList"
       />
       <Dropdown
         class="col-2"
         name="queuePriority"
         label="Priority"
-        :disabled="!props.editable"
+        :disabled="!editable"
         :options="QueuePriority"
       />
       <div class="col" />
@@ -292,20 +308,20 @@ onBeforeMount(async () => {
         class="col-12"
         name="astNotes"
         label="AST notes"
-        :disabled="!props.editable"
+        :disabled="!editable"
       />
       <div class="col-6 p-0">
         <Checkbox
           class="col-12"
           name="astUpdated"
           label="Automated Status Tool (AST)"
-          :disabled="!props.editable"
+          :disabled="!editable"
         />
         <Checkbox
           class="col-12"
           name="addedToATS"
           label="Authorized Tracking System (ATS) updated"
-          :disabled="!props.editable"
+          :disabled="!editable"
           :bold="true"
         />
         <div
@@ -324,7 +340,7 @@ onBeforeMount(async () => {
             <InputText
               class="col-4 align-items-center"
               name="atsClientNumber"
-              :disabled="!props.editable"
+              :disabled="!editable"
             />
           </div>
         </div>
@@ -332,32 +348,32 @@ onBeforeMount(async () => {
           class="col-12"
           name="ltsaCompleted"
           label="Land Title Survey Authority (LTSA) completed"
-          :disabled="!props.editable"
+          :disabled="!editable"
         />
         <Checkbox
           class="col-12"
           name="bcOnlineCompleted"
           label="BC Online completed"
-          :disabled="!props.editable"
+          :disabled="!editable"
         />
         <Checkbox
           class="col-12"
           name="naturalDisaster"
           label="Location affected by natural disaster"
-          :disabled="!props.editable"
+          :disabled="!editable"
         />
         <Checkbox
           class="col-12"
           name="financiallySupported"
           label="Financially supported"
-          :disabled="!props.editable"
+          :disabled="!editable"
         />
         <Checkbox
           v-if="values.financiallySupported"
           class="pl-4 col-12"
           name="financiallySupportedBC"
           label="BC Housing"
-          :disabled="!props.editable"
+          :disabled="!editable"
           :bold="false"
         />
         <Checkbox
@@ -365,7 +381,7 @@ onBeforeMount(async () => {
           class="pl-4 col-12"
           name="financiallySupportedIndigenous"
           label="Indigenous Housing Provider"
-          :disabled="!props.editable"
+          :disabled="!editable"
           :bold="false"
         />
         <Checkbox
@@ -373,7 +389,7 @@ onBeforeMount(async () => {
           class="pl-4 col-12"
           name="financiallySupportedNonProfit"
           label="Non-profit housing society"
-          :disabled="!props.editable"
+          :disabled="!editable"
           :bold="false"
         />
         <Checkbox
@@ -381,14 +397,14 @@ onBeforeMount(async () => {
           class="pl-4 col-12"
           name="financiallySupportedHousingCoop"
           label="Housing co-operative"
-          :disabled="!props.editable"
+          :disabled="!editable"
           :bold="false"
         />
         <Checkbox
           class="col-12"
           name="aaiUpdated"
           label="Authorization and Approvals Insight (AAI) updated"
-          :disabled="!props.editable"
+          :disabled="!editable"
         />
       </div>
       <div class="col-6 p-0">
@@ -397,35 +413,35 @@ onBeforeMount(async () => {
           class="col-12"
           name="submissionTypes.guidance"
           label="Guidance"
-          :disabled="!props.editable"
+          :disabled="!editable"
           :invalid="props.editable && !!errors.submissionTypes"
         />
         <Checkbox
           class="col-12"
           name="submissionTypes.inquiry"
           label="General Enquiry"
-          :disabled="!props.editable"
+          :disabled="!editable"
           :invalid="props.editable && !!errors.submissionTypes"
         />
         <Checkbox
           class="col-12"
           name="submissionTypes.statusRequest"
           label="Status Request"
-          :disabled="!props.editable"
+          :disabled="!editable"
           :invalid="props.editable && !!errors.submissionTypes"
         />
         <Checkbox
           class="col-12"
           name="submissionTypes.emergencyAssist"
           label="Escalation Request"
-          :disabled="!props.editable"
+          :disabled="!editable"
           :invalid="props.editable && !!errors.submissionTypes"
         />
         <Checkbox
           class="col-12"
           name="submissionTypes.inapplicable"
           label="Inapplicable"
-          :disabled="!props.editable"
+          :disabled="!editable"
           :invalid="props.editable && !!errors.submissionTypes"
         />
         <div
@@ -439,14 +455,14 @@ onBeforeMount(async () => {
         class="col-4"
         name="waitingOn"
         label="Waiting on"
-        :disabled="!props.editable"
+        :disabled="!editable"
       />
       <div class="col-8" />
       <EditableDropdown
         class="col-4"
         name="user"
         label="Assigned to"
-        :disabled="!props.editable"
+        :disabled="!editable"
         :options="assigneeOptions"
         :get-option-label="getAssigneeOptionLabel"
         @on-input="onAssigneeInput"
@@ -455,14 +471,14 @@ onBeforeMount(async () => {
         class="col-4"
         name="intakeStatus"
         label="Intake state"
-        :disabled="!props.editable"
+        :disabled="!editable"
         :options="IntakeStatusList"
       />
       <Dropdown
         class="col-4"
         name="applicationStatus"
         label="Activity state"
-        :disabled="!props.editable"
+        :disabled="!editable"
         :options="ApplicationStatusList"
       />
       <div
@@ -473,18 +489,17 @@ onBeforeMount(async () => {
           label="Save"
           type="submit"
           icon="pi pi-check"
-          :disabled="!props.editable"
+          :disabled="!editable"
         />
         <Button
           label="Cancel"
           outlined
           class="ml-2"
           icon="pi pi-times"
-          :disabled="!props.editable"
+          :disabled="!editable"
           @click="
             () => {
               handleReset();
-              onCancel();
             }
           "
         />
diff --git a/frontend/src/components/submission/SubmissionList.vue b/frontend/src/components/submission/SubmissionList.vue
index 8050d0f8..73829c46 100644
--- a/frontend/src/components/submission/SubmissionList.vue
+++ b/frontend/src/components/submission/SubmissionList.vue
@@ -3,7 +3,18 @@ import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { Spinner } from '@/components/layout';
-import { Button, Checkbox, Column, DataTable, FilterMatchMode, InputText, useConfirm, useToast } from '@/lib/primevue';
+import {
+  Button,
+  Checkbox,
+  Column,
+  DataTable,
+  FilterMatchMode,
+  IconField,
+  InputIcon,
+  InputText,
+  useConfirm,
+  useToast
+} from '@/lib/primevue';
 import { submissionService } from '@/services';
 import { RouteNames } from '@/utils/constants';
 import { formatDate } from '@/utils/formatters';
@@ -33,24 +44,24 @@ const latLongFormat = (lat: number | null, long: number | null): string => {
   return `${lat}, ${long}`;
 };
 
-const handleCreateNewActivity = () => {
+function handleCreateNewActivity() {
   confirmDialog.require({
     header: 'Confirm create submission',
-    message: 'Please confirm that you want to create a new submission',
+    message: 'Please confirm that you want to create a new submission.',
     accept: async () => {
       try {
-        const res = await submissionService.createSubmission();
-        if (res?.data?.activityId) {
-          router.push({ name: RouteNames.SUBMISSION, query: { activityId: res.data.activityId } });
+        const response = (await submissionService.createSubmission()).data;
+        if (response?.activityId) {
+          router.push({ name: RouteNames.SUBMISSION, query: { activityId: response.activityId } });
         }
-      } catch (e) {
-        toast.error('Unable to create new submission');
+      } catch (e: any) {
+        toast.error('Failed to create new submission', e.message);
       }
     },
     acceptLabel: 'Confirm',
     rejectLabel: 'Cancel'
   });
-};
+}
 
 // Datatable filter(s)
 const filters = ref({
@@ -88,18 +99,18 @@ const filters = ref({
     <template #header>
       <div class="flex justify-content-between">
         <Button
-          label="Create new activity"
+          label="Create submission"
           type="submit"
           icon="pi pi-plus"
           @click="handleCreateNewActivity"
         />
-        <span class="p-input-icon-left ml-4">
-          <i class="pi pi-search" />
+        <IconField icon-position="left">
+          <InputIcon class="pi pi-search" />
           <InputText
             v-model="filters['global'].value"
             placeholder="Search all"
           />
-        </span>
+        </IconField>
       </div>
     </template>
     <Column
diff --git a/frontend/src/components/submission/SubmissionStatistics.vue b/frontend/src/components/submission/SubmissionStatistics.vue
index 3f0fdc2d..7c99e630 100644
--- a/frontend/src/components/submission/SubmissionStatistics.vue
+++ b/frontend/src/components/submission/SubmissionStatistics.vue
@@ -27,8 +27,8 @@ type Props = {
 const props = withDefaults(defineProps<Props>(), {});
 
 // State
-const statistics: Ref<Statistics | undefined> = ref(props.initialStatistics);
 const assigneeOptions: Ref<Array<User>> = ref([]);
+const statistics: Ref<Statistics | undefined> = ref(props.initialStatistics);
 const statisticFilters: Ref<StatisticFilters> = ref({});
 
 // Actions
diff --git a/frontend/src/lib/primevue/index.ts b/frontend/src/lib/primevue/index.ts
index 19d30937..8d02aee3 100644
--- a/frontend/src/lib/primevue/index.ts
+++ b/frontend/src/lib/primevue/index.ts
@@ -13,6 +13,8 @@ export { default as Dialog } from 'primevue/dialog';
 export { default as Divider } from 'primevue/divider';
 export { default as Dropdown } from 'primevue/dropdown';
 export { default as FileUpload } from 'primevue/fileupload';
+export { default as IconField } from 'primevue/iconfield';
+export { default as InputIcon } from 'primevue/inputicon';
 export { default as InputMask } from 'primevue/inputmask';
 export { default as InputNumber } from 'primevue/inputnumber';
 export { default as InputSwitch } from 'primevue/inputswitch';
diff --git a/frontend/src/store/index.ts b/frontend/src/store/index.ts
index 414fd236..0a483a2f 100644
--- a/frontend/src/store/index.ts
+++ b/frontend/src/store/index.ts
@@ -1,3 +1,4 @@
 export { default as useAppStore } from './appStore';
 export { default as useAuthStore } from './authStore';
 export { default as useConfigStore } from './configStore';
+export { default as useSubmissionStore } from './submissionStore';
diff --git a/frontend/src/store/submissionStore.ts b/frontend/src/store/submissionStore.ts
new file mode 100644
index 00000000..e6cc33dd
--- /dev/null
+++ b/frontend/src/store/submissionStore.ts
@@ -0,0 +1,114 @@
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+
+import type { Ref } from 'vue';
+import type { Document, Note, Permit, PermitType, Submission } from '@/types';
+
+export type SubmissionStoreState = {
+  documents: Ref<Array<Document>>;
+  notes: Ref<Array<Note>>;
+  permits: Ref<Array<Permit>>;
+  permitTypes: Ref<Array<PermitType>>;
+  submission: Ref<Submission | undefined>;
+};
+
+export const useSubmissionStore = defineStore('submission', () => {
+  // State
+  const state: SubmissionStoreState = {
+    documents: ref([]),
+    notes: ref([]),
+    permits: ref([]),
+    permitTypes: ref([]),
+    submission: ref(undefined)
+  };
+
+  // Getters
+  const getters = {
+    getDocuments: computed(() => state.documents.value),
+    getNotes: computed(() => state.notes.value),
+    getPermits: computed(() => state.permits.value),
+    getPermitTypes: computed(() => state.permitTypes.value),
+    getSubmission: computed(() => state.submission.value)
+  };
+
+  // Actions
+  function addDocument(data: Document) {
+    state.documents.value.push(data);
+  }
+
+  function removeDocument(data: Document) {
+    state.documents.value = state.documents.value.filter((x) => x.documentId !== data.documentId);
+  }
+
+  function setDocuments(data: Array<Document>) {
+    state.documents.value = data;
+  }
+
+  function addNote(data: Note, prepend: boolean = false) {
+    if (prepend) state.notes.value.unshift(data);
+    else state.notes.value.push(data);
+  }
+
+  function removeNote(data: Note) {
+    state.notes.value = state.notes.value.filter((x) => x.noteId !== data.noteId);
+  }
+
+  function setNotes(data: Array<Note>) {
+    state.notes.value = data;
+  }
+
+  function updateNote(oldData: Note, newData: Note) {
+    const idx = state.notes.value.findIndex((x: Note) => x.noteId === oldData.noteId);
+    if (idx >= 0) state.notes.value[idx] = newData;
+  }
+
+  function addPermit(data: Permit) {
+    state.permits.value.push(data);
+  }
+
+  function removePermit(data: Permit) {
+    state.permits.value = state.permits.value.filter((x) => x.permitId !== data.permitId);
+  }
+
+  function setPermits(data: Array<Permit>) {
+    state.permits.value = data;
+  }
+
+  function updatePermit(data: Permit) {
+    const idx = state.permits.value.findIndex((x: Permit) => x.permitId === data.permitId);
+    if (idx >= 0) state.permits.value[idx] = data;
+  }
+
+  function setPermitTypes(data: Array<PermitType>) {
+    state.permitTypes.value = data;
+  }
+
+  function setSubmission(data: Submission | undefined) {
+    state.submission.value = data;
+  }
+
+  return {
+    // State
+    ...state,
+
+    // Getters
+    ...getters,
+
+    // Actions
+    addDocument,
+    removeDocument,
+    setDocuments,
+    addNote,
+    removeNote,
+    setNotes,
+    updateNote,
+    addPermit,
+    removePermit,
+    setPermits,
+    updatePermit,
+    setPermitTypes,
+    setSubmission
+  };
+});
+
+export default useSubmissionStore;
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
index ba8f1305..3162a143 100644
--- a/frontend/src/utils/constants.ts
+++ b/frontend/src/utils/constants.ts
@@ -97,7 +97,7 @@ export const RentalStatusList = [RENTAL_STATUS_LIST.UNSURE, RENTAL_STATUS_LIST.N
 /**
  * Note form constants
  */
-export const NoteTypes = [NOTE_TYPES.GENERAL, NOTE_TYPES.BRING_FORWARD, NOTE_TYPES.ENQUIRY];
+export const NoteTypes = [NOTE_TYPES.GENERAL, NOTE_TYPES.BRING_FORWARD, NOTE_TYPES.ENQUIRY, NOTE_TYPES.ROADMAP];
 
 export const BringForwardTypes = [BRING_FORWARD_TYPES.UNRESOLVED, BRING_FORWARD_TYPES.RESOLVED];
 
diff --git a/frontend/src/utils/enums.ts b/frontend/src/utils/enums.ts
index b6c03d43..52e9de05 100644
--- a/frontend/src/utils/enums.ts
+++ b/frontend/src/utils/enums.ts
@@ -52,7 +52,8 @@ export const enum RENTAL_STATUS_LIST {
 export const enum NOTE_TYPES {
   GENERAL = 'General',
   BRING_FORWARD = 'Bring forward',
-  ENQUIRY = 'Enquiry'
+  ENQUIRY = 'Enquiry',
+  ROADMAP = 'Roadmap'
 }
 
 export const enum BRING_FORWARD_TYPES {
diff --git a/frontend/src/views/SubmissionView.vue b/frontend/src/views/SubmissionView.vue
index 9ab4fec4..1a5500e8 100644
--- a/frontend/src/views/SubmissionView.vue
+++ b/frontend/src/views/SubmissionView.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { storeToRefs } from 'pinia';
 import { onMounted, ref } from 'vue';
 
 import DocumentCard from '@/components/file/DocumentCard.vue';
@@ -9,12 +10,12 @@ import PermitCard from '@/components/permit/PermitCard.vue';
 import PermitModal from '@/components/permit/PermitModal.vue';
 import Roadmap from '@/components/roadmap/Roadmap.vue';
 import SubmissionForm from '@/components/submission/SubmissionForm.vue';
-import { Button, TabPanel, TabView, useToast } from '@/lib/primevue';
+import { Button, TabPanel, TabView } from '@/lib/primevue';
 import { submissionService, documentService, noteService, permitService } from '@/services';
+import { useSubmissionStore } from '@/store';
 import { RouteNames } from '@/utils/constants';
 
 import type { Ref } from 'vue';
-import type { Document, Note, Permit, PermitType, Submission } from '@/types';
 
 // Props
 type Props = {
@@ -26,72 +27,19 @@ const props = withDefaults(defineProps<Props>(), {
   initialTab: '0'
 });
 
+// Store
+const submissionStore = useSubmissionStore();
+const { getDocuments, getNotes, getPermits, getPermitTypes, getSubmission } = storeToRefs(submissionStore);
+
 // State
 const activeTab: Ref<number> = ref(Number(props.initialTab));
-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([]);
 const permitModalVisible: Ref<boolean> = ref(false);
-const permitTypes: Ref<Array<PermitType>> = ref([]);
-const submission: Ref<Submission | undefined> = ref(undefined);
 
 // Actions
-const toast = useToast();
-
-const onNoteDelete = (noteId: string) => {
-  notes.value = notes.value.filter((x: Note) => x.noteId !== noteId);
-};
-
-const onPermitDelete = (data: Permit) =>
-  (permits.value = permits.value.filter((x: Permit) => x.permitId !== data.permitId));
-
-async function onPermitSubmit(data: Permit) {
-  try {
-    const result = (await permitService.createPermit({ ...data, activityId: props.activityId })).data;
-    permits.value.push(result);
-    toast.success('Permit saved');
-  } catch (e: any) {
-    toast.error('Failed to save permit', e.message);
-  } finally {
-    permitModalVisible.value = false;
-  }
-}
-
-const onPermitUpdate = (data: Permit) => {
-  let idx = permits.value.findIndex((x: Permit) => x.permitId === data.permitId);
-  if (idx >= 0) permits.value[idx] = data;
-};
-
-const onNoteEdit = (data: any, oldNoteId: string) => {
-  notes.value = notes.value.filter((x: Note) => x.noteId !== oldNoteId);
-  notes.value.unshift(data);
-};
-
-async function onNoteSubmit(data: any) {
-  try {
-    const result = (await noteService.createNote({ ...data, activityId: props.activityId })).data;
-    notes.value.unshift(result);
-    toast.success('Note saved');
-  } catch (e: any) {
-    toast.error('Failed to save note', e.message);
-  } finally {
-    noteModalVisible.value = false;
-  }
-}
-
-async function onSubmissionSubmit(data: Submission) {
-  editable.value = false;
-  await submissionService.updateSubmission(data.submissionId, {
-    ...data
-  });
-  toast.success('Form saved');
-}
-
 onMounted(async () => {
-  [submission.value, documents.value, notes.value, permits.value, permitTypes.value] = (
+  const [submission, documents, notes, permits, permitTypes] = (
     await Promise.all([
       submissionService.getSubmission(props.activityId),
       documentService.listDocuments(props.activityId),
@@ -101,6 +49,12 @@ onMounted(async () => {
     ])
   ).map((r) => r.data);
 
+  submissionStore.setSubmission(submission);
+  submissionStore.setDocuments(documents);
+  submissionStore.setNotes(notes);
+  submissionStore.setPermits(permits);
+  submissionStore.setPermitTypes(permitTypes);
+
   loading.value = false;
 });
 </script>
@@ -116,49 +70,32 @@ onMounted(async () => {
   <h1>
     Activity submission:
     <span
-      v-if="submission?.activityId"
+      v-if="getSubmission?.activityId"
       class="mr-1"
     >
-      {{ submission.activityId }}
+      {{ getSubmission.activityId }}
     </span>
-    <span v-if="submission?.projectName">
+    <span v-if="getSubmission?.projectName">
       -
-      <span class="ml-1">{{ submission.projectName }}</span>
+      <span class="ml-1">{{ getSubmission.projectName }}</span>
     </span>
   </h1>
 
   <TabView v-model:activeIndex="activeTab">
     <TabPanel header="Info">
-      <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 v-if="getSubmission">
+        <SubmissionForm :submission="getSubmission" />
       </span>
     </TabPanel>
     <TabPanel header="Files">
       <div class="grid nested-grid">
         <div class="col-2">
-          <FileUpload
-            :activity-id="props.activityId"
-            @update:last-uploaded-document="(e: Document) => documents.push(e)"
-          />
+          <FileUpload :activity-id="props.activityId" />
         </div>
         <div class="col-10">
           <div class="grid">
             <div
-              v-for="(document, index) in documents"
+              v-for="(document, index) in getDocuments"
               :key="document.documentId"
               :index="index"
               class="col-12 md:col-6 lg:col-4 xl:col-3"
@@ -167,9 +104,6 @@ onMounted(async () => {
                 :document="document"
                 class="hover-hand hover-shadow"
                 @click="documentService.downloadDocument(document.documentId)"
-                @document:deleted="
-                  (documentId) => (documents = documents.filter((x: Document) => x.documentId !== documentId))
-                "
               />
             </div>
           </div>
@@ -177,10 +111,10 @@ onMounted(async () => {
       </div>
     </TabPanel>
     <TabPanel header="Permits">
-      <span v-if="permitTypes.length">
+      <span v-if="getPermitTypes.length">
         <div class="flex align-items-center pb-2">
           <div class="flex-grow-1">
-            <p class="font-bold">Applicable permits ({{ permits.length }})</p>
+            <p class="font-bold">Applicable permits ({{ getPermits.length }})</p>
           </div>
           <Button
             aria-label="Add permit"
@@ -194,30 +128,24 @@ onMounted(async () => {
           </Button>
         </div>
         <div
-          v-for="(permit, index) in permits"
+          v-for="(permit, index) in getPermits"
           :key="permit.permitId"
           :index="index"
           class="col-12"
         >
-          <PermitCard
-            :permit="permit"
-            :permit-types="permitTypes"
-            @permit:delete="onPermitDelete"
-            @permit:update="onPermitUpdate"
-          />
+          <PermitCard :permit="permit" />
         </div>
 
         <PermitModal
           v-model:visible="permitModalVisible"
-          :permit-types="permitTypes"
-          @permit:submit="onPermitSubmit"
+          :activity-id="props.activityId"
         />
       </span>
     </TabPanel>
     <TabPanel header="Notes">
       <div class="flex align-items-center pb-2">
         <div class="flex-grow-1">
-          <p class="font-bold">Notes ({{ notes.length }})</p>
+          <p class="font-bold">Notes ({{ getNotes.length }})</p>
         </div>
         <Button
           aria-label="Add note"
@@ -231,31 +159,24 @@ onMounted(async () => {
         </Button>
       </div>
       <div
-        v-for="(note, index) in notes"
+        v-for="(note, index) in getNotes"
         :key="note.noteId"
         :index="index"
         class="col-12"
       >
-        <NoteCard
-          :note="note"
-          @note:edit="onNoteEdit"
-          @note:delete="onNoteDelete"
-        />
+        <NoteCard :note="note" />
       </div>
 
       <NoteModal
+        v-if="noteModalVisible"
         v-model:visible="noteModalVisible"
-        @note:submit="onNoteSubmit"
+        :activity-id="props.activityId"
       />
     </TabPanel>
     <TabPanel header="Roadmap">
       <Roadmap
         v-if="!loading"
-        :activity-id="activityId"
-        :documents="documents"
-        :permits="permits"
-        :permit-types="permitTypes"
-        :submission="submission as Submission"
+        :activity-id="props.activityId"
       />
     </TabPanel>
   </TabView>
diff --git a/frontend/src/views/SubmissionsView.vue b/frontend/src/views/SubmissionsView.vue
index 734633ed..2f29bb91 100644
--- a/frontend/src/views/SubmissionsView.vue
+++ b/frontend/src/views/SubmissionsView.vue
@@ -22,9 +22,9 @@ const { getProfile } = storeToRefs(useAuthStore());
 
 // State
 const accordionIndex: Ref<number | null> = ref(null);
-const loading: Ref<boolean> = ref(true);
 const bringForward: Ref<Array<BringForward>> = ref([]);
 const myBringForward: Ref<Array<BringForward>> = ref([]);
+const loading: Ref<boolean> = ref(true);
 const submissions: Ref<Array<Submission>> = ref([]);
 const statistics: Ref<Statistics | undefined> = ref(undefined);
 
diff --git a/frontend/tests/unit/components/note/NoteModal.spec.ts b/frontend/tests/unit/components/note/NoteModal.spec.ts
index 64bd515d..27cdcc17 100644
--- a/frontend/tests/unit/components/note/NoteModal.spec.ts
+++ b/frontend/tests/unit/components/note/NoteModal.spec.ts
@@ -1,12 +1,12 @@
 import { createTestingPinia } from '@pinia/testing';
-import { mount } from '@vue/test-utils';
+import PrimeVue from 'primevue/config';
+import ConfirmationService from 'primevue/confirmationservice';
+import ToastService from 'primevue/toastservice';
+import { shallowMount } from '@vue/test-utils';
 
 import NoteModal from '@/components/note/NoteModal.vue';
 import { StorageKey } from '@/utils/constants';
 import { NOTE_TYPES } from '@/utils/enums';
-import PrimeVue from 'primevue/config';
-import ConfirmationService from 'primevue/confirmationservice';
-import ToastService from 'primevue/toastservice';
 
 import type { Note } from '@/types';
 
@@ -31,10 +31,10 @@ const testNote: Note = {
   isDeleted: false
 };
 
-const wrapperSettings = (visibleProp: boolean = true) => ({
+const wrapperSettings = () => ({
   props: {
-    note: testNote,
-    visible: visibleProp
+    activityId: '123',
+    note: testNote
   },
   global: {
     plugins: [
@@ -80,18 +80,9 @@ afterEach(() => {
 });
 
 // Currently, modal functionality hidden behind Primevue component Dialog
-describe('noteModal test', () => {
-  it('sets dialog component prop "visible" to true', async () => {
-    const noteWrapper = mount(NoteModal, wrapperSettings(true));
-
-    const dialogComponent = noteWrapper.getComponent({ name: 'Dialog' });
-    expect(dialogComponent.props('visible')).toBe(true);
-  });
-
-  it('sets dialog component prop "visible" to false', async () => {
-    const noteWrapper = mount(NoteModal, wrapperSettings(false));
-
-    const dialogComponent = noteWrapper.getComponent({ name: 'Dialog' });
-    expect(dialogComponent.props('visible')).toBe(false);
+describe('NoteModal', () => {
+  it('renders', () => {
+    const wrapper = shallowMount(NoteModal, wrapperSettings());
+    expect(wrapper).toBeTruthy();
   });
 });