diff --git a/app/src/db/migrations/20240327000000_001-bring-forward.ts b/app/src/db/migrations/20240327000000_001-bring-forward.ts
new file mode 100644
index 00000000..047d994c
--- /dev/null
+++ b/app/src/db/migrations/20240327000000_001-bring-forward.ts
@@ -0,0 +1,31 @@
+import type { Knex } from 'knex';
+
+export async function up(knex: Knex): Promise<void> {
+  return Promise.resolve()
+    .then(() =>
+      knex.schema.alterTable('submission', function (table) {
+        table.dropColumn('bring_forward_date');
+      })
+    )
+    .then(() =>
+      knex.schema.alterTable('note', function (table) {
+        table.timestamp('bring_forward_date', { useTz: true });
+        table.text('bring_forward_state').nullable();
+      })
+    );
+}
+
+export async function down(knex: Knex): Promise<void> {
+  return Promise.resolve()
+    .then(() =>
+      knex.schema.alterTable('submission', function (table) {
+        table.timestamp('bring_forward_date', { useTz: true });
+      })
+    )
+    .then(() =>
+      knex.schema.alterTable('note', function (table) {
+        table.dropColumn('bring_forward_date');
+        table.dropColumn('bring_forward_state');
+      })
+    );
+}
diff --git a/app/src/db/models/note.ts b/app/src/db/models/note.ts
index 55111bf8..7d0c2dd6 100644
--- a/app/src/db/models/note.ts
+++ b/app/src/db/models/note.ts
@@ -14,6 +14,8 @@ export default {
     return {
       note_id: input.noteId,
       activity_id: input.activityId,
+      bring_forward_date: input.bringForwardDate ? new Date(input.bringForwardDate) : null,
+      bring_forward_state: input.bringForwardState,
       note: input.note,
       note_type: input.noteType,
       title: input.title,
@@ -30,6 +32,8 @@ export default {
     return {
       noteId: input.note_id,
       activityId: input.activity_id,
+      bringForwardDate: input.bring_forward_date?.toISOString() ?? null,
+      bringForwardState: input.bring_forward_state ?? null,
       note: input.note || '',
       noteType: input.note_type || '',
       title: input.title || '',
diff --git a/app/src/db/models/submission.ts b/app/src/db/models/submission.ts
index 47294f45..ffda2b07 100644
--- a/app/src/db/models/submission.ts
+++ b/app/src/db/models/submission.ts
@@ -48,7 +48,6 @@ export default {
       financially_supported_housing_coop: input.financiallySupportedHousingCoop,
       aai_updated: input.aaiUpdated,
       waiting_on: input.waitingOn,
-      bring_forward_date: input.bringForwardDate ? new Date(input.bringForwardDate) : null,
       intake_status: input.intakeStatus,
       application_status: input.applicationStatus,
       guidance: input.guidance,
@@ -94,7 +93,6 @@ export default {
       financiallySupportedHousingCoop: input.financially_supported_housing_coop,
       aaiUpdated: input.aai_updated,
       waitingOn: input.waiting_on,
-      bringForwardDate: input.bring_forward_date?.toISOString() ?? null,
       intakeStatus: input.intake_status,
       applicationStatus: input.application_status,
       guidance: input.guidance,
diff --git a/app/src/db/prisma/schema.prisma b/app/src/db/prisma/schema.prisma
index ba3cc922..8a5f4ffe 100644
--- a/app/src/db/prisma/schema.prisma
+++ b/app/src/db/prisma/schema.prisma
@@ -70,16 +70,18 @@ model initiative {
 }
 
 model note {
-  note_id     String    @id @db.Uuid
-  activity_id String
-  note        String    @default("")
-  note_type   String    @default("")
-  title       String    @default("")
-  created_by  String?   @default("00000000-0000-0000-0000-000000000000")
-  created_at  DateTime? @default(now()) @db.Timestamptz(6)
-  updated_by  String?
-  updated_at  DateTime? @db.Timestamptz(6)
-  activity    activity  @relation(fields: [activity_id], references: [activity_id], onDelete: Cascade, map: "note_activity_id_foreign")
+  note_id             String    @id @db.Uuid
+  activity_id         String
+  note                String    @default("")
+  note_type           String    @default("")
+  title               String    @default("")
+  created_by          String?   @default("00000000-0000-0000-0000-000000000000")
+  created_at          DateTime? @default(now()) @db.Timestamptz(6)
+  updated_by          String?
+  updated_at          DateTime? @db.Timestamptz(6)
+  bring_forward_date  DateTime? @db.Timestamptz(6)
+  bring_forward_state String?
+  activity            activity  @relation(fields: [activity_id], references: [activity_id], onDelete: Cascade, map: "note_activity_id_foreign")
 }
 
 model permit {
@@ -156,7 +158,6 @@ model submission {
   financially_supported_housing_coop Boolean   @default(false)
   aai_updated                        Boolean   @default(false)
   waiting_on                         String?
-  bring_forward_date                 DateTime? @db.Timestamptz(6)
   intake_status                      String?
   application_status                 String?
   guidance                           Boolean   @default(false)
diff --git a/app/src/types/Note.ts b/app/src/types/Note.ts
index 183c0c89..53192d4b 100644
--- a/app/src/types/Note.ts
+++ b/app/src/types/Note.ts
@@ -3,6 +3,8 @@ import { IStamps } from '../interfaces/IStamps';
 export type Note = {
   noteId: string; // Primary Key
   activityId: string;
+  bringForwardDate: string | null;
+  bringForwardState: string | null;
   note: string;
   noteType: string;
   title: string;
diff --git a/app/src/types/Submission.ts b/app/src/types/Submission.ts
index f7c1bd90..24195012 100644
--- a/app/src/types/Submission.ts
+++ b/app/src/types/Submission.ts
@@ -34,7 +34,6 @@ export type Submission = {
   financiallySupportedHousingCoop: boolean;
   aaiUpdated: boolean;
   waitingOn: string | null;
-  bringForwardDate: string | null;
   intakeStatus: string | null;
   applicationStatus: string | null;
   guidance: boolean;
diff --git a/app/src/validators/note.ts b/app/src/validators/note.ts
index 31dee803..53ac3d1c 100644
--- a/app/src/validators/note.ts
+++ b/app/src/validators/note.ts
@@ -8,6 +8,8 @@ const schema = {
     body: Joi.object({
       createdAt: Joi.date().required(),
       activityId: activityId,
+      bringForwardDate: Joi.date().iso().allow(null),
+      bringForwardState: Joi.string().min(1).allow(null),
       note: Joi.string(),
       noteType: Joi.string().max(255).required(),
       title: Joi.string().max(255)
diff --git a/app/tests/unit/controllers/note.spec.ts b/app/tests/unit/controllers/note.spec.ts
index 9c50a0d6..90be9e9f 100644
--- a/app/tests/unit/controllers/note.spec.ts
+++ b/app/tests/unit/controllers/note.spec.ts
@@ -39,6 +39,8 @@ describe('createNote', () => {
       body: {
         noteId: '123-123',
         activityId: '123',
+        bringForwardDate: null,
+        bringForwardState: null,
         note: 'Some not text',
         noteType: 'GENERAL',
         title: 'Note title'
@@ -52,6 +54,8 @@ describe('createNote', () => {
     const created = {
       noteId: '123-123',
       activityId: '123',
+      bringForwardDate: null,
+      bringForwardState: null,
       note: 'Some not text',
       noteType: 'GENERAL',
       title: 'Note title'
@@ -79,6 +83,8 @@ describe('createNote', () => {
       body: {
         noteId: '123-123',
         activityId: '123',
+        bringForwardDate: null,
+        bringForwardState: null,
         note: 'Some not text',
         noteType: 'GENERAL',
         title: 'Note title'
@@ -120,6 +126,8 @@ describe('listNotes', () => {
       {
         noteId: '123-123',
         activityId: '123',
+        bringForwardDate: null,
+        bringForwardState: null,
         note: 'Some not text',
         noteType: 'GENERAL',
         title: 'Note title'
diff --git a/frontend/src/components/note/NoteCard.vue b/frontend/src/components/note/NoteCard.vue
index 819cb1d4..b04847a8 100644
--- a/frontend/src/components/note/NoteCard.vue
+++ b/frontend/src/components/note/NoteCard.vue
@@ -3,7 +3,7 @@ import { onMounted, ref } from 'vue';
 
 import { Card, Divider } from '@/lib/primevue';
 import { userService } from '@/services';
-import { formatDateShort } from '@/utils/formatters';
+import { formatDate, formatDateShort } from '@/utils/formatters';
 
 import type { Ref } from 'vue';
 import type { Note } from '@/types';
@@ -30,13 +30,21 @@ onMounted(() => {
 <template>
   <Card>
     <template #title>
-      <h3 class="mt-1 mb-1">{{ props.note.title }}</h3>
+      <h3 class="mt-1 mb-1">
+        {{ props.note.title }}
+        <span
+          v-if="props.note.bringForwardState"
+          data-test="bf-title"
+        >
+          {{ `(${props.note.bringForwardState})` }}
+        </span>
+      </h3>
       <Divider type="solid" />
     </template>
     <template #content>
       <div class="grid nested-grid">
         <!-- Left column -->
-        <div class="col-12 md:col-6 lg:col-4">
+        <div class="col-12 md:col-6 lg:col-3">
           <div class="grid">
             <p class="col-12">
               <span class="key font-bold">Date:</span>
@@ -45,7 +53,7 @@ onMounted(() => {
           </div>
         </div>
         <!-- Middle column -->
-        <div class="col-12 md:col-6 lg:col-4">
+        <div class="col-12 md:col-6 lg:col-3">
           <div class="grid">
             <p class="col-12">
               <span class="key font-bold">Author:</span>
@@ -54,7 +62,7 @@ onMounted(() => {
           </div>
         </div>
         <!-- Right column -->
-        <div class="col-12 md:col-6 lg:col-4">
+        <div class="col-12 md:col-6 lg:col-3">
           <div class="grid">
             <p class="col-12">
               <span class="key font-bold">Note type:</span>
@@ -62,6 +70,17 @@ onMounted(() => {
             </p>
           </div>
         </div>
+        <div
+          v-if="props.note.bringForwardDate"
+          class="col-12 md:col-6 lg:col-3"
+        >
+          <div class="grid">
+            <p class="col-12">
+              <span class="key font-bold">Bring forward date:</span>
+              {{ props.note.bringForwardDate ? formatDate(props.note.bringForwardDate) : '' }}
+            </p>
+          </div>
+        </div>
         <p class="col-12 mt-0 mb-0 note-content">{{ props.note.note }}</p>
       </div>
     </template>
diff --git a/frontend/src/components/note/NoteModal.vue b/frontend/src/components/note/NoteModal.vue
index ffa200e4..4aa59804 100644
--- a/frontend/src/components/note/NoteModal.vue
+++ b/frontend/src/components/note/NoteModal.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { Form } from 'vee-validate';
-import { object, string } from 'yup';
+import { mixed, object, string } from 'yup';
 
 import { Calendar, Dropdown, InputText, TextArea } from '@/components/form';
 import { Button, Dialog } from '@/lib/primevue';
-import { NoteTypes } from '@/utils/constants';
-import { NOTE_TYPES } from '@/utils/enums';
+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';
@@ -26,21 +26,55 @@ const emit = defineEmits(['note:submit']);
 // State
 const visible = defineModel<boolean>('visible');
 const formRef: Ref<InstanceType<typeof Form> | null> = ref(null);
+const showBringForward: Ref<boolean> = ref(false);
 
 // Default form values
 let initialFormValues: any = {
   createdAt: new Date(),
+  bringForwardDate: null,
+  bringForwardState: null,
   note: props.note?.note,
   noteType: NOTE_TYPES.GENERAL
 };
 
 // Form validation schema
 const formSchema = object({
+  bringForwardDate: mixed()
+    .nullable()
+    .when('noteType', {
+      is: (noteType: string) => noteType === NOTE_TYPES.BRING_FORWARD,
+      then: (schema) =>
+        schema.test(
+          'bring forward required',
+          'Bring forward date is a required field',
+          (value) => value instanceof Date
+        ),
+      otherwise: (schema) => schema.nullable()
+    })
+    .label('Bring forward date'),
+  bringForwardState: mixed()
+    .when('noteType', {
+      is: (noteType: string) => noteType === NOTE_TYPES.BRING_FORWARD,
+      then: () => string().oneOf(BringForwardTypes),
+      otherwise: () => mixed().nullable()
+    })
+    .label('Bring forward state'),
   note: string().required().label('Note'),
   noteType: string().oneOf(NoteTypes).label('Note type'),
   title: string().required().max(255, 'Title too long').label('Title')
 });
 
+const handleBringForward = (e: { OriginalEvent: Event; value: string }) => {
+  if (e.value === NOTE_TYPES.BRING_FORWARD) {
+    formRef.value?.setFieldValue('bringForwardState', BRING_FORWARD_TYPES.UNRESOLVED);
+    showBringForward.value = true;
+  } else {
+    showBringForward.value = false;
+    formRef.value?.setFieldValue('bringForwardDate', null);
+    formRef.value?.setFieldValue('bringForwardState', null);
+  }
+};
+
 // Actions
 // @ts-expect-error TS7031
 // resetForm is an automatic binding https://vee-validate.logaretm.com/v4/guide/components/handling-forms/
@@ -61,6 +95,8 @@ watch(visible, (newValue) => {
   nextTick().then(() => {
     if (newValue && formRef.value) {
       formRef.value.setFieldValue('createdAt', new Date());
+    } else {
+      showBringForward.value = false;
     }
   });
 });
@@ -104,14 +140,34 @@ watch(visible, (newValue) => {
           name="noteType"
           label="Note type"
           :options="NoteTypes"
+          @on-change="(e) => handleBringForward(e)"
+        />
+        <Calendar
+          v-if="showBringForward"
+          class="col-6"
+          name="bringForwardDate"
+          label="Bring forward date"
+        />
+        <div
+          v-else
+          class="col-6"
         />
-        <div class="col-6" />
         <InputText
           class="col-6"
           name="title"
           label="Title"
         />
-        <div class="col-6" />
+        <Dropdown
+          v-if="showBringForward"
+          class="col-6"
+          name="bringForwardState"
+          label="Bring forward state"
+          :options="BringForwardTypes"
+        />
+        <div
+          v-else
+          class="col-6"
+        />
         <TextArea
           class="col-12"
           name="note"
diff --git a/frontend/src/components/submission/SubmissionForm.vue b/frontend/src/components/submission/SubmissionForm.vue
index 8cf09a1b..7a05001d 100644
--- a/frontend/src/components/submission/SubmissionForm.vue
+++ b/frontend/src/components/submission/SubmissionForm.vue
@@ -146,7 +146,6 @@ onBeforeMount(async () => {
   initialFormValues.value = {
     ...props.submission,
     applicationStatus: props.submission.applicationStatus,
-    bringForwardDate: props.submission.bringForwardDate ? new Date(props.submission.bringForwardDate) : undefined,
     submittedAt: new Date(props.submission.submittedAt),
     submittedBy: formatJwtUsername(props.submission.submittedBy),
     submissionTypes: {
@@ -408,12 +407,6 @@ onBeforeMount(async () => {
         label="Waiting on"
         :disabled="!props.editable"
       />
-      <Calendar
-        class="col-6"
-        name="bringForwardDate"
-        label="Bring forward date"
-        :disabled="!props.editable"
-      />
       <EditableDropdown
         class="col-4"
         name="user"
diff --git a/frontend/src/types/Note.ts b/frontend/src/types/Note.ts
index 845e1c1d..ebd1e8d3 100644
--- a/frontend/src/types/Note.ts
+++ b/frontend/src/types/Note.ts
@@ -3,6 +3,8 @@ import type { IStamps } from '@/interfaces';
 export type Note = {
   noteId: string; // Primary Key
   activityId: string;
+  bringForwardDate?: string;
+  bringForwardState?: string;
   note: string;
   noteType: string;
   title: string;
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
index 61f7ed5f..bd5e149e 100644
--- a/frontend/src/utils/constants.ts
+++ b/frontend/src/utils/constants.ts
@@ -3,6 +3,7 @@ import { NIL } from 'uuid';
 import {
   ACCESS_ROLES,
   APPLICATION_STATUS_LIST,
+  BRING_FORWARD_TYPES,
   INTAKE_STATUS_LIST,
   NOTE_TYPES,
   PERMIT_STATUS,
@@ -86,6 +87,8 @@ export const IntakeStatusList = [
  */
 export const NoteTypes = [NOTE_TYPES.GENERAL, NOTE_TYPES.BRING_FORWARD];
 
+export const BringForwardTypes = [BRING_FORWARD_TYPES.UNRESOLVED, BRING_FORWARD_TYPES.RESOLVED];
+
 export const QueuePriority = [0, 1, 2, 3, 4, 5];
 
 /**
diff --git a/frontend/src/utils/enums.ts b/frontend/src/utils/enums.ts
index 59e2ac47..42d441f7 100644
--- a/frontend/src/utils/enums.ts
+++ b/frontend/src/utils/enums.ts
@@ -39,7 +39,12 @@ export const enum INTAKE_STATUS_LIST {
  */
 export const enum NOTE_TYPES {
   GENERAL = 'General',
-  BRING_FORWARD = 'Bring Forward'
+  BRING_FORWARD = 'Bring forward'
+}
+
+export const enum BRING_FORWARD_TYPES {
+  UNRESOLVED = 'Unresolved',
+  RESOLVED = 'Resolved'
 }
 
 /**
diff --git a/frontend/tests/unit/components/note/NoteCard.spec.ts b/frontend/tests/unit/components/note/NoteCard.spec.ts
index 080bdbfd..5d0f3800 100644
--- a/frontend/tests/unit/components/note/NoteCard.spec.ts
+++ b/frontend/tests/unit/components/note/NoteCard.spec.ts
@@ -4,10 +4,12 @@ import { mount } from '@vue/test-utils';
 import NoteCard from '@/components/note/NoteCard.vue';
 import { userService } from '@/services';
 import { StorageKey } from '@/utils/constants';
-import { formatDateShort } from '@/utils/formatters';
+import { BRING_FORWARD_TYPES, NOTE_TYPES } from '@/utils/enums';
+import { formatDate, formatDateShort } from '@/utils/formatters';
 import PrimeVue from 'primevue/config';
 
 import type { AxiosResponse } from 'axios';
+import type { Note } from '@/types';
 
 const useUserService = vi.spyOn(userService, 'searchUsers');
 
@@ -28,12 +30,42 @@ const emptyTestPinia = () =>
   });
 
 const currentDate = new Date().toISOString();
+const tomorrowDate = new Date(new Date().setDate(new Date().getDate() + 1)).toISOString();
+const yesterdayDate = new Date(new Date().setDate(new Date().getDate() - 1)).toISOString();
 
-const testNote = {
+const testNote: Note = {
   noteId: 'noteUUID',
   activityId: 'activityUUID',
   note: 'note contents text',
-  noteType: 'Note Type',
+  noteType: NOTE_TYPES.GENERAL,
+  title: 'note contents title',
+  createdBy: 'testCreatedBy',
+  createdAt: currentDate,
+  updatedBy: 'testUpdatedAt',
+  updatedAt: currentDate
+};
+
+const testNoteUnresolved: Note = {
+  noteId: 'noteUUID',
+  activityId: 'activityUUID',
+  bringForwardDate: tomorrowDate,
+  bringForwardState: BRING_FORWARD_TYPES.UNRESOLVED,
+  note: 'note contents text',
+  noteType: NOTE_TYPES.BRING_FORWARD,
+  title: 'note contents title',
+  createdBy: 'testCreatedBy',
+  createdAt: currentDate,
+  updatedBy: 'testUpdatedAt',
+  updatedAt: currentDate
+};
+
+const testNoteResolved: Note = {
+  noteId: 'noteUUID',
+  activityId: 'activityUUID',
+  bringForwardDate: yesterdayDate,
+  bringForwardState: BRING_FORWARD_TYPES.RESOLVED,
+  note: 'note contents text',
+  noteType: NOTE_TYPES.BRING_FORWARD,
   title: 'note contents title',
   createdBy: 'testCreatedBy',
   createdAt: currentDate,
@@ -46,7 +78,17 @@ const wrapperSettings = (testNoteProp = testNote) => ({
     note: testNoteProp
   },
   global: {
-    plugins: [emptyTestPinia(), PrimeVue],
+    plugins: [
+      () =>
+        createTestingPinia({
+          initialState: {
+            auth: {
+              user: {}
+            }
+          }
+        }),
+      PrimeVue
+    ],
     stubs: ['font-awesome-icon']
   }
 });
@@ -100,12 +142,41 @@ describe('noteCard test', () => {
     expect(wrapper.get('h3').text()).toBe(testNote.title);
   });
 
-  it('displays p tags', async () => {
+  it('displays p tags for general notes', async () => {
     const wrapper = mount(NoteCard, wrapperSettings());
     const pTag = wrapper.findAll('p');
+
+    expect(wrapper.find('[data-test="bf-title"]').exists()).toBe(false);
+    expect(pTag.length).toBe(4);
     expect(pTag[0].text()).toBe(`Date: ${formatDateShort(currentDate)}`);
     expect(pTag[1].text()).toBe('Author:');
     expect(pTag[2].text()).toBe(`Note type: ${testNote.noteType}`);
     expect(pTag[3].text()).toBe(testNote.note);
   });
+
+  it('displays p tags for unresolved notes', async () => {
+    const wrapper = mount(NoteCard, wrapperSettings(testNoteUnresolved));
+    const pTag = wrapper.findAll('p');
+
+    expect(wrapper.find('[data-test="bf-title"]').text()).toBe(`(${testNoteUnresolved.bringForwardState})`);
+    expect(pTag.length).toBe(5);
+    expect(pTag[0].text()).toBe(`Date: ${formatDateShort(currentDate)}`);
+    expect(pTag[1].text()).toBe('Author:');
+    expect(pTag[2].text()).toBe(`Note type: ${testNoteUnresolved.noteType}`);
+    expect(pTag[3].text()).toBe(`Bring forward date: ${formatDate(tomorrowDate)}`);
+    expect(pTag[4].text()).toBe(testNoteUnresolved.note);
+  });
+
+  it('displays p tags for resolved notes', async () => {
+    const wrapper = mount(NoteCard, wrapperSettings(testNoteResolved));
+    const pTag = wrapper.findAll('p');
+
+    expect(wrapper.find('[data-test="bf-title"]').text()).toBe(`(${testNoteResolved.bringForwardState})`);
+    expect(pTag.length).toBe(5);
+    expect(pTag[0].text()).toBe(`Date: ${formatDateShort(currentDate)}`);
+    expect(pTag[1].text()).toBe('Author:');
+    expect(pTag[2].text()).toBe(`Note type: ${testNoteResolved.noteType}`);
+    expect(pTag[3].text()).toBe(`Bring forward date: ${formatDate(yesterdayDate)}`);
+    expect(pTag[4].text()).toBe(testNoteResolved.note);
+  });
 });
diff --git a/frontend/tests/unit/components/note/NoteModal.spec.ts b/frontend/tests/unit/components/note/NoteModal.spec.ts
new file mode 100644
index 00000000..bc922d69
--- /dev/null
+++ b/frontend/tests/unit/components/note/NoteModal.spec.ts
@@ -0,0 +1,92 @@
+import { createTestingPinia } from '@pinia/testing';
+import { mount } 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 type { Note } from '@/types';
+
+vi.mock('vue-router', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn()
+  })
+}));
+const currentDate = new Date().toISOString();
+
+const testNote: Note = {
+  noteId: 'noteUUID',
+  activityId: 'activityUUID',
+  note: 'note contents text',
+  noteType: NOTE_TYPES.GENERAL,
+  title: 'note contents title',
+  createdBy: 'testCreatedBy',
+  createdAt: currentDate,
+  updatedBy: 'testUpdatedAt',
+  updatedAt: currentDate
+};
+
+const wrapperSettings = (visibleProp: boolean = true) => ({
+  props: {
+    note: testNote,
+    visible: visibleProp
+  },
+  global: {
+    plugins: [
+      () =>
+        createTestingPinia({
+          initialState: {
+            auth: {
+              user: {}
+            }
+          }
+        }),
+      PrimeVue
+    ],
+    stubs: {
+      Dialog: {
+        name: 'Dialog',
+        template: '<div class="dialog-stub">test</div>',
+        props: ['visible']
+      },
+      'font-awesome-icon': true
+    }
+  }
+});
+
+beforeEach(() => {
+  sessionStorage.setItem(
+    StorageKey.CONFIG,
+    JSON.stringify({
+      oidc: {
+        authority: 'abc',
+        clientId: '123'
+      }
+    })
+  );
+
+  vi.clearAllMocks();
+});
+
+afterEach(() => {
+  sessionStorage.clear();
+});
+
+// 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);
+  });
+});