diff --git a/backend/src/util/mapping/Mappings.js b/backend/src/util/mapping/Mappings.js
index 25e7a41f..f61d08b6 100644
--- a/backend/src/util/mapping/Mappings.js
+++ b/backend/src/util/mapping/Mappings.js
@@ -107,6 +107,7 @@ const ServiceExpansionDetailsMappings = [
   { back: 'ccof_paymentfrequencydetails', front: 'frequency' },
   { back: 'ccof_dateofchange', front: 'date' },
   { back: 'ccof_amountofexpense', front: 'expense' },
+  { back: 'ccof_rfipfiserviceexpansiondetailid', front: 'id' },
 ];
 
 const DCSWageIncreaseMappings = [
@@ -117,6 +118,7 @@ const DCSWageIncreaseMappings = [
   { back: 'ccof_wageafterincrease', front: 'wageAfterIncrease' },
   { back: 'ccof_averagehoursperweek', front: 'averageHours' },
   { back: 'ccof_wageincreasedate', front: 'wageDate' },
+  { back: 'ccof_rfi_pfi_dcs_wi_detailid', front: 'id' },
 ];
 
 const ExpenseInformationMappings = [
@@ -124,6 +126,7 @@ const ExpenseInformationMappings = [
   { back: 'ccof_dateofexpense', front: 'date' },
   { back: 'ccof_paymentfrequencydetails', front: 'frequency' },
   { back: 'ccof_expenseamountt', front: 'expense' },
+  { back: 'ccof_rfipfiexpenseinfoid', front: 'id' },
 ];
 
 const OtherFundingProgramMappings = [
@@ -132,6 +135,7 @@ const OtherFundingProgramMappings = [
   { back: 'ccof_statusofapplication', front: 'status' },
   { back: 'ccof_amountreceived', front: 'amount' },
   { back: 'ccof_expense', front: 'expenses' },
+  { back: 'ccof_rfi_pfi_other_fundingid', front: 'id' },
 ];
 
 const IndigenousExpenseMappings = [
@@ -139,6 +143,7 @@ const IndigenousExpenseMappings = [
   { back: 'ccof_date', front: 'date' },
   { back: 'ccof_paymentfrequency', front: 'frequency' },
   { back: 'ccof_amount', front: 'expense' },
+  { back: 'ccof_rfipfiserviceexpansionindigenouscommunityid', front: 'id' },
 ];
 
 const NMFApplicationMappings = [
diff --git a/frontend/public/styles/common.css b/frontend/public/styles/common.css
index 2b935bbd..13794bd9 100644
--- a/frontend/public/styles/common.css
+++ b/frontend/public/styles/common.css
@@ -113,10 +113,22 @@ input[type="number"] {
   color: #ff5252;
 }
 
-.add-file-button {
+.font-large {
+  font-size: 18px;
+}
+
+.font-regular {
   font-size: 16px;
 }
 
+.font-small {
+  font-size: 14px;
+}
+
+.font-xsmall {
+  font-size: 12px;
+}
+
 .border-right {
   border-right: 0.5px solid lightgray;
 }
@@ -133,10 +145,9 @@ input[type="number"] {
 }
 
 .span-label {
-  color: grey;
+  color: #636262;
   font-style: normal;
   font-family: "BCSans", Verdana, Arial, sans-serif;
-  font-size: 14px;
 }
 
 div.text-h4,
diff --git a/frontend/src/components/RFI/RFIDocumentUpload.vue b/frontend/src/components/RFI/RFIDocumentUpload.vue
index 2c7e23e0..55e09045 100644
--- a/frontend/src/components/RFI/RFIDocumentUpload.vue
+++ b/frontend/src/components/RFI/RFIDocumentUpload.vue
@@ -26,14 +26,7 @@
         >
           <template #top>
             <v-col flex>
-              <AppButton
-                v-if="!isLocked"
-                id="add-new-file"
-                :primary="false"
-                size="large"
-                class="add-file-button mb-2"
-                @click="addNew"
-              >
+              <AppButton v-if="!isLocked" id="add-new-file" :primary="false" size="large" class="mb-2" @click="addNew">
                 Add File
               </AppButton>
             </v-col>
diff --git a/frontend/src/components/RFI/RFILanding.vue b/frontend/src/components/RFI/RFILanding.vue
index a1cc69fe..91704596 100644
--- a/frontend/src/components/RFI/RFILanding.vue
+++ b/frontend/src/components/RFI/RFILanding.vue
@@ -46,34 +46,41 @@
           </p>
           <div class="px-md-14 px-7 text--primary">
             <br />
-            <ul>
-              <li>are outside of the organization’s control and/or outside of the scope of regular cost increases;</li>
-              <li>address an immediate health or safety concern or are needed for the facility to operate; and</li>
-              <li>occur within six months of the requested fee increase.</li>
+            <ul class="ml-6">
+              <li>Are outside of the organization's control and/or outside of the scope of regular cost increases;</li>
+              <li>Address an immediate health or safety concern or are needed for the facility to operate; and</li>
+              <li>Occur within six months of the requested fee increase.</li>
             </ul>
             <br />
+
+            <label for="exceptionalCircumstances" class="span-label font-large"
+              >Is your fee increase due to an exceptional circumstance?</label
+            >
             <v-radio-group
+              id="exceptionalCircumstances"
               v-model="model.exceptionalCircumstances"
               class="radio-label"
               :disabled="isReadOnly"
               required
               :rules="rules.required"
               inline
-              label="Is your fee increase due to an exceptional circumstance?"
             >
               <v-radio label="Yes" :value="1" />
               <v-radio label="No" :value="0" />
             </v-radio-group>
             <br />
             <div v-if="model?.exceptionalCircumstances == 1">
+              <label for="circumstanceOccurWithin6Month" class="span-label font-large"
+                >Does the exceptional circumstance occur within 6 months of the fee increase?</label
+              >
               <v-radio-group
+                id="circumstanceOccurWithin6Month"
                 v-model.number="model.circumstanceOccurWithin6Month"
                 class="radio-label"
                 :disabled="isReadOnly"
                 required
                 :rules="rules.required"
                 inline
-                label="Does the exceptional circumstance occur within 6 months of the fee increase?"
               >
                 <v-radio label="Yes" :value="1" />
                 <v-radio label="No" :value="0" />
@@ -87,20 +94,18 @@
             <div class="pa-2 pa-md-4 ma-0">
               <p class="text-h5 text--primary px-5 py-0 my-0">Expense Information</p>
             </div>
-            <v-banner class="ma-4" color="blue-lighten-4" elevation="5">
-              <v-icon size="large" color="blue-darken-4" class="mr-5"> mdi-information </v-icon>
-              <strong
-                >Note: See the <a :href="fundingUrl" target="_blank">Funding Guidelines</a> for the list of eligible
-                expenses</strong
+            <v-row class="justify-left mx-4">
+              <AppAlertBanner type="info" class="ma-2 mb-4 w-100">
+                <strong
+                  >Note: See the <a :href="fundingUrl" target="_blank">Funding Guidelines</a> for the list of eligible
+                  expenses</strong
+                ></AppAlertBanner
               >
-            </v-banner>
+            </v-row>
+
             <div class="px-md-12 px-7">
               <v-row class="hidden-sm-and-down">
-                <v-col class="col-md-1 col-12 mx-0">
-                  <!--here for spacing-->
-                </v-col>
-
-                <v-col class="col-md-3 col-12">
+                <v-col class="col-md-3 col-12 ml-md-6">
                   <h3 class="text-center">Expense Description</h3>
                 </v-col>
 
@@ -117,8 +122,8 @@
                 </v-col>
               </v-row>
 
-              <v-row v-for="(expense, index) in model.expenseList" :key="index">
-                <v-col class="col-md-1 col-12 mx-0">
+              <v-row v-for="(expense, index) in model.expenseList" :key="expense.id">
+                <v-col cols="auto">
                   <v-icon
                     :disabled="isReadOnly"
                     size="large"
@@ -175,9 +180,6 @@
                     @update:model-value="convertBlankNumberToNull(expense, 'expense')"
                   />
                 </v-col>
-
-                <span class="text-white"> . </span>
-                <v-divider />
               </v-row>
               <!-- end v for-->
 
@@ -219,7 +221,12 @@
               <p class="text-h5 text--primary px-5 py-0 my-0">Other Sources of Ministry Funding</p>
             </div>
             <br />
+
             <div class="px-md-12 px-7">
+              <label for="q3" class="span-label font-large"
+                >Have you applied for any other sources of Ministry Funding (e.g. BC Maintenance Fund, Start-Up Grants)
+                for any of the expenses you listed?</label
+              >
               <v-radio-group
                 v-model="model.q3"
                 class="radio-label"
@@ -227,8 +234,6 @@
                 required
                 :rules="rules.required"
                 inline
-                label="Have you applied for any other sources of Ministry Funding (e.g. BC Maintenance Fund, Start-Up Grants)
-              for any of the expenses you listed?"
               >
                 <v-radio label="Yes" :value="1" />
                 <v-radio label="No" :value="0" />
@@ -236,11 +241,7 @@
 
               <div v-if="model.q3 === 1">
                 <v-row class="hidden-sm-and-down">
-                  <v-col class="col-md-1 col-12 mx-0">
-                    <!--here for spacing-->
-                  </v-col>
-
-                  <v-col class="col-md-3 col-12">
+                  <v-col class="col-md-3 col-12 ml-md-10">
                     <h3 class="text-center">Funding Program</h3>
                   </v-col>
 
@@ -261,8 +262,8 @@
                   </v-col>
                 </v-row>
 
-                <v-row v-for="(fundInfo, index) in model.fundingList" :key="index">
-                  <v-col class="col-md-1 col-12 mx-0">
+                <v-row v-for="(fundInfo, index) in model.fundingList" :key="fundInfo.id">
+                  <v-col cols="auto">
                     <v-icon
                       :disabled="isReadOnly"
                       size="large"
@@ -335,9 +336,6 @@
                       @update:model-value="convertBlankNumberToNull(fundInfo, 'expenses')"
                     />
                   </v-col>
-
-                  <span class="text-white"> . </span>
-                  <v-divider />
                 </v-row>
                 <!-- end v for-->
 
@@ -379,16 +377,18 @@
             <p class="text-h5 text--primary px-5 py-0 my-0">Direct Care staff Wages Increases</p>
           </div>
 
-          <v-banner two-line class="ma-4" color="blue-lighten-4" elevation="5">
-            <v-icon size="large" color="blue-darken-4" class="mr-5"> mdi-information </v-icon>
-            <strong
-              >Note: if your facility has ECE employees eligible for ECE Wage Enhancement (ECE-WE), you must apply for
-              ECE-WE before being approved for a fee increase under this policy.</strong
+          <v-row class="justify-left mx-4">
+            <AppAlertBanner type="info" class="ma-2 mb-4 w-100">
+              <strong
+                >Note: If your facility has ECE employees eligible for ECE Wage Enhancement (ECE-WE), you must apply for
+                ECE-WE before being approved for a fee increase under this policy.</strong
+              ></AppAlertBanner
             >
-          </v-banner>
+          </v-row>
+
           <br />
 
-          <p class="text-h6 text--primary px-5 py-0 my-0">
+          <p class="text-h6 text--primary px-10 py-0 my-0">
             This exception applies to wage increases for Direct Care staff employed at the facility on a full-time,
             part-time or casual basis. Direct Care staff are staff who spend at least 50% of their working time directly
             responsible for and engaged in the care and supervision of children at the Facility.
@@ -397,14 +397,17 @@
           <br />
           <div class="px-md-12 px-7">
             <br />
+            <label for="feeIncreaseDueToWage" class="span-label font-large"
+              >Is your fee increase due to a wage increase for Direct Care staff?</label
+            >
             <v-radio-group
+              id="feeIncreaseDueToWage"
               v-model="model.feeIncreaseDueToWage"
               class="radio-label"
               :disabled="isReadOnly"
               :rules="rules.required"
               required
               inline
-              label="Is your fee increase due to a wage increase for Direct Care staff?"
             >
               <v-radio label="Yes" :value="1" />
               <v-radio label="No" :value="0" />
@@ -413,14 +416,18 @@
             <div v-if="model?.feeIncreaseDueToWage == 1">
               <div v-if="languageYearLabel == programYearTypes.HISTORICAL">
                 <br />
+                <label for="increaseInWriting" class="span-label font-large"
+                  >Was the wage increase committed to (in writing) before the January 2022 release of the Funding
+                  Guidelines?</label
+                >
                 <v-radio-group
+                  id="increaseInWriting"
                   v-model="model.increaseInWriting"
                   class="radio-label"
                   :disabled="isReadOnly"
                   :rules="rules.required"
                   required
                   inline
-                  label="Was the wage increase committed to (in writing) before the January 2022 release of the Funding Guidelines?"
                 >
                   <v-radio label="Yes" :value="1" />
                   <v-radio label="No" :value="0" />
@@ -428,14 +435,19 @@
               </div>
               <br />
 
+              <label for="isBargainingAgreement" class="span-label font-large"
+                >Is the wage increase part of a collective bargaining agreement for Direct Care staff at the
+                facility?</label
+              >
+
               <v-radio-group
+                id="isBargainingAgreement"
                 v-model="model.isBargainingAgreement"
                 class="radio-label"
                 :disabled="isReadOnly"
                 :rules="rules.required"
                 required
                 inline
-                label="Is the wage increase part of a collective bargaining agreement for Direct Care staff at the facility?"
               >
                 <v-radio label="Yes" :value="1" />
                 <v-radio label="No" :value="0" />
@@ -443,14 +455,18 @@
 
               <br />
 
+              <label for="lossOfCareStaff" class="span-label font-large"
+                >Has the facility been unable to hire and/or retain Direct Care staff due to wages?</label
+              >
+
               <v-radio-group
+                id="lossOfCareStaff"
                 v-model="model.lossOfCareStaff"
                 class="radio-label"
                 :disabled="isReadOnly"
                 :rules="rules.required"
                 required
                 inline
-                label="Has the facility been unable to hire and/or retain Direct Care staff due to wages?"
               >
                 <v-radio label="Yes" :value="1" />
                 <v-radio label="No" :value="0" />
@@ -458,14 +474,18 @@
 
               <br />
 
+              <label for="lossOfCareStaff" class="span-label font-large"
+                >Is this creating challenges in maintaining the staff-to-child ratios required under the facility
+                licence?</label
+              >
               <v-radio-group
+                id="healthAndSafetyConcerns"
                 v-model="model.healthAndSafetyConcerns"
                 class="radio-label"
                 :disabled="isReadOnly"
                 :rules="rules.required"
                 required
                 inline
-                label="Is this creating challenges in maintaining the staff-to-child ratios required under the facility licence?"
               >
                 <v-radio label="Yes" :value="1" />
                 <v-radio label="No" :value="0" />
@@ -481,40 +501,37 @@
             </div>
             <br />
 
-            <v-banner two-line class="ma-4" color="blue-lighten-4" elevation="5">
-              <v-icon size="large" color="blue-darken-4" class="mr-5"> mdi-information </v-icon>
-              <strong
-                >Note: If two or more staff have the same information for every column, they can be included in one row.
-              </strong>
-            </v-banner>
+            <v-row class="justify-left mx-4"
+              ><AppAlertBanner type="info" class="ma-2 mb-4 w-100">
+                <strong
+                  >Note: If two or more staff have the same information for every column, they can be included in one
+                  row.</strong
+                ></AppAlertBanner
+              ></v-row
+            >
 
             <div class="px-md-12 px-10">
-              <v-row class="hidden-sm-and-down">
-                <v-col class="col-md-1 col-12">
-                  <!-- <h3> Number of staff receiving wage increase</h3>
-                  here for spacing! -->
-                </v-col>
-
-                <v-col class="col-md-2 col-12">
+              <v-row class="hidden-sm-and-down mb-md-6">
+                <v-col class="col-md-2 col-12 ml-md-8">
                   <h3 class="text-center">Number of staff receiving wage increase</h3>
                 </v-col>
 
                 <v-col class="col-md-2 col-12">
                   <h3 class="text-center">Direct Care staff role</h3>
                   <br />
-                  <p class="text-center">(e.g. Responsible Adult, ECE, ECEA, etc)</p>
+                  <p class="text-center font-small">(e.g. Responsible Adult, ECE, ECEA, etc)</p>
                 </v-col>
 
                 <v-col class="col-md-2 col-12">
                   <h3 class="text-center">Wage before increase</h3>
                   <br />
-                  <p class="text-center">(not including ECE-WE)</p>
+                  <p class="text-center font-small">(not including ECE-WE)</p>
                 </v-col>
 
                 <v-col class="col-md-2 col-12">
                   <h3 class="text-center">Wage after increase</h3>
                   <br />
-                  <p class="text-center">(not including ECE-WE)</p>
+                  <p class="text-center font-small">(not including ECE-WE)</p>
                 </v-col>
 
                 <v-col class="col-md-2 col-12">
@@ -525,11 +542,9 @@
                   <h3 class="text-center">Date</h3>
                 </v-col>
               </v-row>
-              <span class="text-white"> . </span>
-              <v-divider />
 
-              <v-row v-for="(obj, index) in model.wageList" :key="index">
-                <v-col class="col-md-1 col-12 mx-0">
+              <v-row v-for="(obj, index) in model.wageList" :key="obj.id" class="mt-md-10">
+                <v-col cols="auto">
                   <v-icon
                     :disabled="isReadOnly"
                     size="large"
@@ -611,7 +626,7 @@
                   />
                 </v-col>
 
-                <v-col class="col-md-1 col-12">
+                <v-col cols="auto">
                   <AppDateInput
                     v-model="obj.wageDate"
                     :rules="rules.required"
@@ -621,9 +636,6 @@
                     clearable
                   />
                 </v-col>
-
-                <span class="text-white"> . </span>
-                <v-divider />
               </v-row>
               <!-- end v for-->
 
@@ -750,15 +762,17 @@
 
           <div class="px-md-12 px-7">
             <br />
+            <label for="feeIncreaseExtendedHours" class="span-label font-large"
+              >Is your fee increase due to expenses related to expanding or extending the hours of child care service
+              available for all enrolled children?</label
+            >
             <v-radio-group
               v-model="model.feeIncreaseExtendedHours"
               class="radio-label"
               :disabled="isReadOnly"
-              :rules="rules.required"
               required
               inline
-              label="Is your fee increase due to expenses related to expanding or extending the hours of child care service available for all
-              enrolled children?"
+              id="feeIncreaseExtendedHours"
             >
               <v-radio label="Yes" :value="1" />
               <v-radio label="No" :value="0" />
@@ -777,30 +791,29 @@
               <v-row class="hidden-sm-and-down">
                 <div class="mt-md-6 mx-md-6"></div>
                 <v-col class="col-md-2 col-12">
-                  <h3 class>Facility's previous hours of operation</h3>
+                  <h3>Facility's previous hours of operation</h3>
                   <br />
                   <p>(e.g. 9:00 am - 4:00 pm)</p>
                 </v-col>
                 <v-col class="col-md-2 col-12">
-                  <h3 class>Facility's new hours of operation</h3>
+                  <h3>Facility's new hours of operation</h3>
                   <br />
                   <p>(e.g. 6:00 am - 5:00 pm)</p>
                 </v-col>
                 <v-col class="col-md-2 col-12">
-                  <h3 class>Date of Change</h3>
+                  <h3 class="text-center">Date of Change</h3>
                 </v-col>
                 <v-col class="col-md-2 col-12">
-                  <h3 class>Amount of Expense</h3>
+                  <h3 class="text-center">Amount of Expense</h3>
                 </v-col>
                 <v-col class="col-md-2 col-12">
-                  <h3 class>Payment frequency</h3>
+                  <h3 class="text-center">Payment frequency</h3>
                 </v-col>
               </v-row>
-              <span class="text-white"> . </span>
-              <v-divider />
 
-              <v-row v-for="(obj, index) in model.expansionList" :key="index">
+              <v-row v-for="(obj, index) in model.expansionList" :key="obj.id">
                 <v-icon
+                  cols="auto"
                   :disabled="isReadOnly"
                   size="large"
                   color="blue-darken-4"
@@ -842,7 +855,7 @@
                   />
                 </v-col>
 
-                <v-col class="col-md-2 col-xl-1 col-12">
+                <v-col class="cols-md-auto col-lg-2 col-xl-1 col-12">
                   <AppDateInput
                     v-model="obj.date"
                     :disabled="isReadOnly"
@@ -876,8 +889,6 @@
                     :rules="rules.required"
                   />
                 </v-col>
-
-                <v-divider></v-divider>
               </v-row>
               <!-- end v for-->
 
@@ -954,11 +965,15 @@
 
           <div class="px-md-12 px-7">
             <br />
+            <label for="IndigenousConnection" class="span-label font-large"
+              >Is your fee increase due to an increased connection to Indigenous community, culture, or language for all
+              enrolled children in a Facility owned, managed, or governed by at least 51% Indigenous peoples?</label
+            >
             <v-radio-group
+              id="IndigenousConnection"
               v-model="model.IndigenousConnection"
               class="radio-label"
               :disabled="isReadOnly"
-              label="Is your fee increase due to an increased connection to Indigenous community, culture, or language for all enrolled children in a Facility owned, managed, or governed by at least 51% Indigenous peoples?"
               required
               :rules="rules.required"
               inline
@@ -973,15 +988,16 @@
                 >Funding Guidelines</a
               >, this may include:
             </p>
-            <ul>
+
+            <ul class="ml-10">
               <li>
-                participation of an Elder, culture/language teacher, and/or family members in the child care program;
+                Participation of an Elder, culture/language teacher, and/or family members in the child care program;
               </li>
-              <li>children’s participation in community, language, and/or cultural events or activities; or</li>
-              <li>language or culture resources for use in the child care program.</li>
+              <li>Children's participation in community, language, and/or cultural events or activities; or</li>
+              <li>Language or culture resources for use in the child care program.</li>
             </ul>
-            <br />
           </div>
+          <br />
         </div>
 
         <div v-if="model.IndigenousConnection == 1">
@@ -993,11 +1009,7 @@
 
             <div class="px-md-12 px-7">
               <v-row class="hidden-sm-and-down">
-                <v-col class="col-md-1 col-12 mx-0">
-                  <!--here for spacing-->
-                </v-col>
-
-                <v-col class="col-md-3 col-12">
+                <v-col class="col-md-3 col-12 ml-md-6">
                   <h3 class="text-center">Expense Description</h3>
                 </v-col>
 
@@ -1013,8 +1025,8 @@
                   <h3 class="text-center">Expense amount</h3>
                 </v-col>
               </v-row>
-              <v-row v-for="(indigExpense, index) in model.indigenousExpenseList" :key="index">
-                <v-col class="col-md-1 col-12 mx-0">
+              <v-row v-for="(indigExpense, index) in model.indigenousExpenseList" :key="indigExpense.id">
+                <v-col cols="auto">
                   <v-icon
                     :disabled="isReadOnly"
                     size="large"
@@ -1071,9 +1083,6 @@
                     @update:model-value="convertBlankNumberToNull(indigExpense, 'expense')"
                   />
                 </v-col>
-
-                <span class="text-white"> . </span>
-                <v-divider />
               </v-row>
               <!-- end v for-->
 
@@ -1141,23 +1150,26 @@
           <div class="px-md-12 px-7">
             <br />
             <p>Fee increases may be considered under this exception if:</p>
-            <ul>
+            <ul class="ml-md-8">
               <li>
-                the facility has historically provided care to underserved populations - including Indigenous or
+                The facility has historically provided care to underserved populations - including Indigenous or
                 low-income families - at significantly below the regional median fees for their area or at no fee;
               </li>
-              <li>the fee increase will contribute to the operational sustainability of the organization; and</li>
-              <li>the fee increase will not greatly increase the out-of-pocket cost of care for families.</li>
+              <li>The fee increase will contribute to the operational sustainability of the organization; and</li>
+              <li>The fee increase will not greatly increase the out-of-pocket cost of care for families.</li>
             </ul>
             <br />
+            <label for="underservedPop" class="span-label font-large"
+              >Does this Facility meet all the above criteria?</label
+            >
             <v-radio-group
+              id="underservedPop"
               v-model="model.underservedPop"
               class="radio-label"
               :disabled="isReadOnly"
               required
               :rules="rules.required"
               inline
-              label="Does this Facility meet all the above criteria?"
             >
               <v-radio label="Yes" :value="1" />
               <v-radio label="No" :value="0" />
@@ -1243,6 +1255,7 @@
 <script>
 import { isEqual } from 'lodash';
 import { mapActions, mapState } from 'pinia';
+import { uuid } from 'vue-uuid';
 
 import { useRfiAppStore } from '@/store/rfiApp.js';
 import { useAppStore } from '@/store/app.js';
@@ -1264,6 +1277,8 @@ import globalMixin from '@/mixins/globalMixin.js';
 import { deepCloneObject } from '@/utils/common.js';
 import rules from '@/utils/rules.js';
 
+import AppAlertBanner from '@/components/guiComponents/AppAlertBanner.vue';
+
 import { PROGRAM_YEAR_LANGUAGE_TYPES } from '@/utils/constants.js';
 
 let model = {
@@ -1276,7 +1291,7 @@ let model = {
 
 export default {
   name: 'CcfriRequestMoreInfo',
-  components: { FacilityHeader, RFIDocumentUpload, NavButton, AppTimeInput, AppDateInput },
+  components: { FacilityHeader, RFIDocumentUpload, NavButton, AppTimeInput, AppDateInput, AppAlertBanner },
   mixins: [alertMixin, globalMixin],
   async beforeRouteLeave(_to, _from, next) {
     const rfiAppStore = useRfiAppStore();
@@ -1506,7 +1521,8 @@ export default {
       this.processing = false;
     },
     addObjToList(obj, list) {
-      list.push(Object.assign({}, obj));
+      const newObj = { ...obj, id: uuid.v1() };
+      list.push(newObj);
     },
     removeObjFromList(index, list) {
       if (index == -1) {
diff --git a/frontend/src/components/SupportingDocumentUpload.vue b/frontend/src/components/SupportingDocumentUpload.vue
index 7d96a844..5e1d2f52 100644
--- a/frontend/src/components/SupportingDocumentUpload.vue
+++ b/frontend/src/components/SupportingDocumentUpload.vue
@@ -29,14 +29,7 @@
         >
           <template #top>
             <v-col flex>
-              <AppButton
-                v-if="!isLocked"
-                id="add-new-file"
-                :primary="false"
-                size="large"
-                class="add-file-button mb-2"
-                @click="addNew"
-              >
+              <AppButton v-if="!isLocked" id="add-new-file" :primary="false" size="large" class="mb-2" @click="addNew">
                 Add File
               </AppButton>
             </v-col>
diff --git a/frontend/src/components/ccfriApplication/group/AddNewFees.vue b/frontend/src/components/ccfriApplication/group/AddNewFees.vue
index f0a4aa0d..fc671db2 100644
--- a/frontend/src/components/ccfriApplication/group/AddNewFees.vue
+++ b/frontend/src/components/ccfriApplication/group/AddNewFees.vue
@@ -362,7 +362,7 @@
                 </v-col>
 
                 <v-col cols="12" md="2" class="mt-n1">
-                  <span class="span-label">Did parents pay for this closure?</span>
+                  <span class="span-label font-small">Did parents pay for this closure?</span>
                   <v-radio-group
                     v-model="obj.feesPaidWhileClosed"
                     :disabled="isReadOnly"
diff --git a/frontend/src/components/ccfriApplication/group/ExistingFacilityFees.vue b/frontend/src/components/ccfriApplication/group/ExistingFacilityFees.vue
index 57e62670..34fb04b6 100644
--- a/frontend/src/components/ccfriApplication/group/ExistingFacilityFees.vue
+++ b/frontend/src/components/ccfriApplication/group/ExistingFacilityFees.vue
@@ -9,7 +9,7 @@
     <div class="row pt-4 justify-center">
       <span class="text-h5">Child Care Fee Reduction Initiative (CCFRI)</span>
     </div>
-    <v-form ref="isValidForm" v-model="isValidForm" model-value="false">
+    <v-form ref="isValidForm" v-model="isValidForm">
       <v-skeleton-loader v-if="loading" max-height="475px" :loading="loading" type="image, image, image" />
       <br />
       <v-skeleton-loader v-if="loading" max-height="475px" :loading="loading" type="image" class="pb-6">
@@ -71,10 +71,8 @@
         </v-card-text>
       </v-card>
 
-      <div v-if="loading" :loading="loading" />
-      <div v-else-if="feeList.length == 0" />
       <v-card
-        v-else
+        v-if="!loading && feeList.length > 0"
         elevation="6"
         class="pa-4 mx-auto my-10 rounded-lg col-12"
         min-height="230"
@@ -87,7 +85,7 @@
         <v-card-text>
           <p class="text-h6 text--primary">Are these fees listed above correct for this facility?</p>
           <br />
-          <v-radio-group v-model="model.q1" :rules="rules" inline>
+          <v-radio-group v-model="model.q1" :rules="rules.required" inline>
             <v-radio label="Yes" value="Yes" />
             <v-radio label="No" value="No" />
           </v-radio-group>
@@ -96,8 +94,7 @@
 
       <NavButton
         :is-next-displayed="true"
-        :is-next-disabled="!isFormValidAndLoaded()"
-        :is-processing="processing"
+        :is-next-disabled="!isFormValidAndLoaded"
         @previous="previous"
         @next="next"
         @validate-form="validateForm"
@@ -108,31 +105,29 @@
 
 <script>
 import { mapState, mapActions } from 'pinia';
-import { useAppStore } from '../../../store/app.js';
-import { useApplicationStore } from '../../../store/application.js';
-import { useNavBarStore } from '../../../store/navBar.js';
-import { useCcfriAppStore } from '../../../store/ccfriApp.js';
+import { useAppStore } from '@/store/app.js';
+import { useApplicationStore } from '@/store/application.js';
+import { useNavBarStore } from '@/store/navBar.js';
+import { useCcfriAppStore } from '@/store/ccfriApp.js';
 
-import { PATHS, pcfUrlGuid } from '../../../utils/constants.js';
-import { deepCloneObject } from '../../../utils/common.js';
-import alertMixin from '../../../mixins/alertMixin.js';
-import NavButton from '../../../components/util/NavButton.vue';
-import ApiService from '../../../common/apiService.js';
-import FacilityHeader from '../../guiComponents/FacilityHeader.vue';
+import { PATHS, pcfUrlGuid, CCFRI_FEE_CORRECT_TYPES, ApiRoutes } from '@/utils/constants.js';
+import { deepCloneObject } from '@/utils/common.js';
+import alertMixin from '@/mixins/alertMixin.js';
+import NavButton from '@/components/util/NavButton.vue';
+import ApiService from '@/common/apiService.js';
+import FacilityHeader from '@/components/guiComponents/FacilityHeader.vue';
+import rules from '@/utils/rules.js';
 
 export default {
   components: { NavButton, FacilityHeader },
   mixins: [alertMixin],
   data() {
     return {
-      processing: false,
       prevFees: {},
-      input: '',
       loading: true,
       model: {},
       isValidForm: false,
       feeList: [],
-      rules: [(v) => !!v || 'Required.'],
       currentCCFRI: undefined,
     };
   },
@@ -155,6 +150,16 @@ export default {
       //if no RegEx match is found, this will return whatever the name is in full. Might look weird if the user set field is changed to something different.
       return programYear?.name.replace(/^.*\b(\d{4})\b.*$/, '$1');
     },
+    isFormValidAndLoaded() {
+      if (this.loading) {
+        //we need this to disable button while the page is loading
+        return false;
+      }
+      if (this.feeList.length === 0) {
+        return true;
+      }
+      return this.isValidForm;
+    },
   },
   watch: {
     //get facilityID from here and then set it !
@@ -163,10 +168,9 @@ export default {
         try {
           this.loading = true;
           await this.loadCCFRIFacility(this.$route.params.urlGuid);
-          console.log('fees correct handler', this.CCFRIFacilityModel.existingFeesCorrect);
-          if (this.CCFRIFacilityModel.existingFeesCorrect == 100000000) {
+          if (this.CCFRIFacilityModel.existingFeesCorrect === CCFRI_FEE_CORRECT_TYPES.YES) {
             this.model.q1 = 'Yes';
-          } else if (this.CCFRIFacilityModel.existingFeesCorrect == 100000001) {
+          } else if (this.CCFRIFacilityModel.existingFeesCorrect === CCFRI_FEE_CORRECT_TYPES.NO) {
             this.model.q1 = 'No';
           } else {
             this.model.q1 = undefined;
@@ -183,17 +187,12 @@ export default {
               this.feeList.push(item);
             }
           });
-
           this.feeList.sort((a, b) => a.orderNumber - b.orderNumber);
-
-          console.log(this.feeList);
-
-          //will have to only display the previous years fee - some logic will have to be done here for that
           this.loading = false;
         } catch (error) {
           console.log(error);
           if (this.CCFRIFacilityModel.previousCcfriId) {
-            this.setFailureAlert('An error occured while getting.');
+            this.setFailureAlert('An error occured while getting CCFRI data');
           } else {
             this.setFailureAlert('The server was busy.  Please wait 10 seconds and refresh this screen.');
           }
@@ -203,6 +202,9 @@ export default {
       deep: true,
     },
   },
+  created() {
+    this.rules = rules;
+  },
   methods: {
     ...mapActions(useCcfriAppStore, [
       'loadCCFRIFacility',
@@ -218,15 +220,9 @@ export default {
     setFees(areFeesCorrect) {
       this.currentCCFRI = deepCloneObject(this.getCCFRIById(this.$route.params.urlGuid));
       this.currentCCFRI.prevYearFeesCorrect = areFeesCorrect;
-      this.currentCCFRI.existingFeesCorrect = areFeesCorrect ? 100000000 : 100000001;
-      //this.CCFRIFacilityModel.existingFeesCorrect = areFeesCorrect ? 100000000 : 100000001;
-      console.log('existing fees POST set', this.currentCCFRI.existingFeesCorrect);
+      this.currentCCFRI.existingFeesCorrect = areFeesCorrect ? CCFRI_FEE_CORRECT_TYPES.YES : CCFRI_FEE_CORRECT_TYPES.NO;
       this.addCCFRIToStore({ ccfriId: this.$route.params.urlGuid, CCFRIFacilityModel: this.currentCCFRI });
     },
-    isFormValidAndLoaded() {
-      //we need this to disable button while the page is loading
-      return this.isValidForm && this.loading == false;
-    },
     async next() {
       this.loading = true;
 
@@ -237,16 +233,12 @@ export default {
         this.setFees(true);
         await this.save();
       }
-
-      //console.log('before NEXT', this.CCFRIFacilityModel.existingFeesCorrect);
       this.$router.push(pcfUrlGuid(PATHS.CCFRI_NEW_FEES, this.programYearId, this.$route.params.urlGuid));
     },
     async save() {
-      console.log('da feez payload', this.currentCCFRI.existingFeesCorrect);
       if (this.currentCCFRI.existingFeesCorrect) {
-        let payload = { existingFeesCorrect: this.currentCCFRI.existingFeesCorrect };
-        let res = await ApiService.apiAxios.patch(`/api/application/ccfri/${this.$route.params.urlGuid}`, payload);
-        console.log(res);
+        const payload = { existingFeesCorrect: this.currentCCFRI.existingFeesCorrect };
+        await ApiService.apiAxios.patch(`${ApiRoutes.APPLICATION_CCFRI}/${this.$route.params.urlGuid}`, payload);
       }
     },
     validateForm() {
diff --git a/frontend/src/components/eceweApplication/EceweEligibilityQuestions.vue b/frontend/src/components/eceweApplication/EceweEligibilityQuestions.vue
index 3d9b4f84..d36936d0 100644
--- a/frontend/src/components/eceweApplication/EceweEligibilityQuestions.vue
+++ b/frontend/src/components/eceweApplication/EceweEligibilityQuestions.vue
@@ -102,8 +102,7 @@
                 <div v-if="model.applicableSector === ECEWE_SECTOR_TYPES.SOME_FACILITIES_UNIONIZED">
                   <v-row class="justify-left">
                     <AppAlertBanner  type="info" class="ma-2 mb-4 w-100"
-                      >Please Confirm</AppAlertBanner
-                    />
+                      >Please Confirm</AppAlertBanner>
                   </v-row>
                   <v-row>
                     <v-col class="pl-6 d-flex py-0">
@@ -122,8 +121,7 @@
               <v-row>
                 <AppAlertBanner v-if="showCSSEAWarning" type="error" class="ma-2 mb-4"
                   >If you are a member of the Community Social Services Employers' Association (CSSEA), you are a public
-                  sector employer. Please update your response to the previous question.</AppAlertBanner
-                />
+                  sector employer. Please update your response to the previous question.</AppAlertBanner>
               </v-row>
             </v-container>
           </v-card>
diff --git a/frontend/src/components/requestChanges/ChangeFileUpload.vue b/frontend/src/components/requestChanges/ChangeFileUpload.vue
index d10d9db9..23524e8a 100644
--- a/frontend/src/components/requestChanges/ChangeFileUpload.vue
+++ b/frontend/src/components/requestChanges/ChangeFileUpload.vue
@@ -15,14 +15,7 @@
       >
         <template #top>
           <v-col flex>
-            <AppButton
-              v-if="!isReadOnly"
-              id="add-new-file"
-              :primary="false"
-              size="large"
-              class="add-file-button mb-2"
-              @click="addNew"
-            >
+            <AppButton v-if="!isReadOnly" id="add-new-file" :primary="false" size="large" class="mb-2" @click="addNew">
               Add File
             </AppButton>
           </v-col>