diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index afa25399e..7a1401150 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,32 +1,18 @@
 <template>
   <v-app id="app">
-    <MsieBanner v-if="isIE" />
-    <HeaderComponent />
-    <SnackBar />
-    <v-main fluid style="--v-layout-top: 64px" class="align-start">
-      <div class="v-main__wrap">
-        <v-app-bar
-          v-if="bannerColor !== ''"
-          :color="bannerColor"
-          sticky
-          dense
-          height="20rem"
-          clipped-left
-          class="px-4 appBar"
-        >
-          <div>
-            <h3 class="envBanner">{{ bannerEnvironment }} Environment</h3>
-          </div>
-        </v-app-bar>
-        <div>
-          <h3 v-if="subtitleBanner != ''" class="subBanner">
-            {{ subtitleBanner }}
-          </h3>
-        </div>
-        <ModalIdle v-if="isAuthenticated" />
-        <NavBar v-if="pageTitle && isAuthenticated && showNavBar" :title="pageTitle" />
-        <router-view />
-      </div>
+    <div>
+      <MsieBanner v-if="isIE" />
+      <HeaderComponent />
+      <SnackBar />
+      <TheEnvBar />
+    </div>
+    <v-main>
+      <h3 v-if="subtitleBanner" class="subBanner">
+        {{ subtitleBanner }}
+      </h3>
+      <ModalIdle v-if="isAuthenticated" />
+      <NavBar v-if="pageTitle && isAuthenticated && showNavBar" :title="pageTitle" />
+      <router-view />
     </v-main>
     <FooterComponent />
   </v-app>
@@ -46,6 +32,7 @@ import ModalIdle from '@/components/ModalIdle.vue';
 import MsieBanner from '@/components/MsieBanner.vue';
 import SnackBar from '@/components/util/SnackBar.vue';
 import NavBar from '@/components/util/NavBar.vue';
+import TheEnvBar from '@/components/TheEnvBar.vue';
 
 export default {
   name: 'App',
@@ -56,16 +43,11 @@ export default {
     MsieBanner,
     SnackBar,
     NavBar,
+    TheEnvBar,
   },
   metaInfo: {
     meta: StaticConfig.VUE_APP_META_DATA,
   },
-  data() {
-    return {
-      bannerEnvironment: StaticConfig.BANNER_ENVIRONMENT,
-      bannerColor: StaticConfig.BANNER_COLOR,
-    };
-  },
   computed: {
     ...mapState(useAuthStore, ['isAuthenticated', 'loginError', 'isLoading']),
     ...mapState(useAppStore, ['pageTitle', 'showNavBar', 'subtitleBanner']),
@@ -96,12 +78,6 @@ export default {
 </script>
 
 <style>
-.appBar {
-  height: 20px !important;
-  color: white !important;
-  position: relative !important;
-  top: 0 !important;
-}
 /*Some BCSans fonts (i.e. g, y) get clipped in v-selects. This heightens the display to fix clipping. */
 .v-select__selection.v-select__selection--comma {
   line-height: 20px !important;
diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
index 0528897fd..83bbc5b0b 100644
--- a/frontend/src/components/Footer.vue
+++ b/frontend/src/components/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-footer inset color="#003366" dark>
+  <v-footer absolute color="#003366" dark>
     <v-row justify="center" align="center">
       <v-btn id="footer-home" variant="text" href="https://www.gov.bc.ca/"> Home </v-btn>
       <v-btn id="footer-about" variant="text" href="https://www2.gov.bc.ca/gov/content/about-gov-bc-ca">
@@ -22,18 +22,13 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .v-footer {
   border-top: 2px solid rgb(252, 186, 25) !important;
   min-width: 100%;
+  flex-grow: 0;
 }
-/*
-  .footer {
-    position: fixed;
-    width: 100%;
-    bottom: 0;
-  }
-  */
+
 .v-btn--active.footer:before,
 .v-btn.footer:focus:before,
 .v-btn.footer:hover:before {
diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
index 674eb28a3..f5af5c7d0 100644
--- a/frontend/src/components/Header.vue
+++ b/frontend/src/components/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-system-bar absolute color="rgb(0, 51, 102)" class="sysBar">
+  <v-app-bar color="#003366" class="px-5 px-md-10 app-header" height="64">
     <!-- Navbar content -->
     <v-container :class="{ sizingForIconXLScreen: $vuetify.display.xl }">
       <v-row class="justify-space-between">
@@ -52,12 +52,11 @@
           </v-menu>
         </div>
         <div v-else-if="isAuthenticated && !dataReady">
-          <v-skeleton-loader type="chip" width="150"
-          class="bg-transparent mt-2" />
+          <v-skeleton-loader type="chip" width="150" class="bg-transparent mt-2" />
         </div>
       </v-row>
     </v-container>
-  </v-system-bar>
+  </v-app-bar>
 </template>
 
 <script>
@@ -111,11 +110,9 @@ a {
   color: #fff;
   text-decoration: none;
 }
-.sysBar {
+.app-header {
   border-bottom: 2px solid rgb(252, 186, 25) !important;
-  z-index: 8;
-  height: 66px !important;
-  text-align: left;
+  z-index: 1002;
 }
 .gov-header .v-btn,
 .v-btn--active.title:before,
diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index 78168d308..86b008ae5 100644
--- a/frontend/src/components/Login.vue
+++ b/frontend/src/components/Login.vue
@@ -39,7 +39,7 @@
         <p class="pt-4">
           <strong>NOTE:</strong> The information collected through My ChildCareBC Services is collected under the
           authority of the <i>Freedom of Information and Protection of Privacy Act</i> (FOIPPA) and the
-          <i>Early Learning and Child Care Act</i> (SBC 2001, c. 4) and will be used for the purpose of administering
+          <i>Early Learning and Child Care Act</i> and will be used for the purpose of administering
           the Child Care Operating Funding Program, which includes the Child Care Fee Reduction Initiative and the Early
           Childhood Educator (ECE) Wage Enhancement for successfully enrolled applicants. Personal information is
           protected from unauthorized use and disclosure in accordance with FOIPPA. Any questions or concerns about the
diff --git a/frontend/src/components/SummaryDeclaration.vue b/frontend/src/components/SummaryDeclaration.vue
index 50570da58..5e1e63fa4 100644
--- a/frontend/src/components/SummaryDeclaration.vue
+++ b/frontend/src/components/SummaryDeclaration.vue
@@ -1,18 +1,13 @@
 <template>
   <v-container fluid>
     <v-form ref="form" v-model="isValidForm">
-      <v-row class="d-flex justify-center">
-        <span class="text-h4"
-          >Child Care Operating Funding Program - {{ formattedProgramYear }} Program Confirmation Form</span
-        >
-      </v-row>
-      <v-row class="d-flex justify-center">
+      <div class="text-center">
+        <div class="text-h4">
+          Child Care Operating Funding Program - {{ formattedProgramYear }} Program Confirmation Form
+        </div>
         <h2>Summary and Declaration</h2>
-      </v-row>
-      <v-row class="d-flex justify-center text-h5" style="color: #003466">
-        {{ userInfo.organizationName }}
-      </v-row>
-
+        <div class="text-h5" style="color: #003466">{{ userInfo.organizationName }}</div>
+      </div>
       <v-row>
         <!-- Do not allow PCF to be submitted if CR is active-->
         <v-card v-if="isSomeChangeRequestActive() && !isChangeRequest" width="100%" class="mx-3 my-10">
@@ -61,10 +56,10 @@
         </v-card>
       </v-row>
 
-      <v-row v-if="!isSomeChangeRequestActive()" class="d-flex justify-center text-h5" style="color: #003466">
+      <div v-if="!isSomeChangeRequestActive()" class="text-center text-h5" style="color: #003466">
         To submit your application, review this summary of your information and scroll down to sign the declaration.
-      </v-row>
-      <v-card v-if="!isSummaryComplete && !isProcessing" elevation="4">
+      </div>
+      <v-card v-if="!isSummaryComplete && !isProcessing" elevation="4" class="mx-8 mt-8">
         <v-card-title class="rounded-t-lg pt-3 pb-3 noticeAlert">
           <v-icon size="x-large" class="py-1 px-3 noticeAlertIcon"> mdi-alert-octagon </v-icon>
           Incomplete Form
@@ -75,147 +70,145 @@
         </div>
       </v-card>
       <div>
-        <v-row class="d-flex justify-center">
-          <v-card class="py-0 px-3 mx-0 mt-10 rounded-lg col-11" elevation="4">
-            <v-row class="d-flex justify-start">
-              <v-col class="pa-0">
-                <v-card-title class="rounded-t-lg pt-3 pb-3 card-title" style="color: #003466"> Summary </v-card-title>
+        <v-card class="py-0 px-3 mx-12 mt-4 rounded-lg" elevation="4">
+          <v-row class="d-flex justify-start">
+            <v-col class="pa-0">
+              <v-card-title class="rounded-t-lg pt-3 pb-3 card-title" style="color: #003466"> Summary </v-card-title>
+            </v-col>
+          </v-row>
+          <v-expansion-panels ref="v-expansion-panels" v-model="expand" multiple variant="accordion">
+            <v-row v-if="isMainLoading">
+              <v-col>
+                <v-skeleton-loader
+                  v-if="isMainLoading"
+                  :loading="isMainLoading"
+                  type="paragraph, text@3, paragraph, text@3, paragraph, paragraph, text@2, paragraph"
+                />
               </v-col>
             </v-row>
-            <v-expansion-panels ref="v-expansion-panels" v-model="expand" multiple variant="accordion">
-              <v-row v-if="isMainLoading">
-                <v-col>
-                  <v-skeleton-loader
-                    v-if="isMainLoading"
-                    :loading="isMainLoading"
-                    type="paragraph, text@3, paragraph, text@3, paragraph, paragraph, text@2, paragraph"
+            <v-row v-else no-gutters class="d-flex flex-column pb-2 pt-2">
+              <div v-if="!isRenewal">
+                <v-expansion-panel variant="accordion">
+                  <OrganizationSummary
+                    :program-year="formattedProgramYear"
+                    :summary-model="summaryModel"
+                    :is-processing="isProcessing"
+                    :program-year-id="summaryModel?.application?.programYearId"
+                    @is-summary-valid="isFormComplete"
                   />
-                </v-col>
-              </v-row>
-              <v-row v-else no-gutters class="d-flex flex-column pb-2 pt-2">
-                <div v-if="!isRenewal">
-                  <v-expansion-panel variant="accordion">
-                    <OrganizationSummary
-                      :program-year="formattedProgramYear"
-                      :summary-model="summaryModel"
-                      :is-processing="isProcessing"
+                </v-expansion-panel>
+              </div>
+
+              <div v-for="(facility, index) in summaryModel?.facilities" :key="facility?.facilityId" class="special">
+                <v-skeleton-loader
+                  v-if="isSummaryLoading[index]"
+                  :loading="isSummaryLoading[index]"
+                  type="paragraph, text@3, paragraph, text@3, paragraph, paragraph, text@2, paragraph"
+                />
+
+                <div v-else>
+                  <v-expansion-panel v-if="facility?.facilityInfo" variant="accordion">
+                    <FacilityInformationSummary
+                      :facility-info="facility?.facilityInfo"
+                      :funding="facility?.funding"
+                      :facility-id="facility.facilityId"
+                      :ccfri-status="facility?.ccfri?.ccfriOptInStatus"
+                      :ecewe-status="facility?.ecewe?.optInOrOut"
+                      :license-categories="facility?.licenseCategories"
+                      :provider-type="summaryModel?.application?.organizationProviderType"
+                      :change-rec-guid="facility?.changeRequestId"
                       :program-year-id="summaryModel?.application?.programYearId"
                       @is-summary-valid="isFormComplete"
                     />
                   </v-expansion-panel>
-                </div>
-
-                <div v-for="(facility, index) in summaryModel?.facilities" :key="facility?.facilityId" class="special">
-                  <v-skeleton-loader
-                    v-if="isSummaryLoading[index]"
-                    :loading="isSummaryLoading[index]"
-                    type="paragraph, text@3, paragraph, text@3, paragraph, paragraph, text@2, paragraph"
-                  />
-
-                  <div v-else>
-                    <v-expansion-panel v-if="facility?.facilityInfo" variant="accordion">
-                      <FacilityInformationSummary
-                        :facility-info="facility?.facilityInfo"
-                        :funding="facility?.funding"
-                        :facility-id="facility.facilityId"
-                        :ccfri-status="facility?.ccfri?.ccfriOptInStatus"
-                        :ecewe-status="facility?.ecewe?.optInOrOut"
-                        :license-categories="facility?.licenseCategories"
-                        :provider-type="summaryModel?.application?.organizationProviderType"
-                        :change-rec-guid="facility?.changeRequestId"
-                        :program-year-id="summaryModel?.application?.programYearId"
-                        @is-summary-valid="isFormComplete"
-                      />
-                    </v-expansion-panel>
-                    <v-expansion-panel variant="accordion">
-                      <div v-if="!facility.funding || isRenewal" />
-                      <div v-else>
-                        <CCOFSummaryFamily
-                          v-if="summaryModel?.application?.organizationProviderType == 'FAMILY'"
-                          :funding="facility.funding"
-                          :facility-id="facility.facilityId"
-                          :program-year-id="summaryModel?.application?.programYearId"
-                          @is-summary-valid="isFormComplete"
-                        />
-                        <CCOFSummary
-                          v-else
-                          :funding="facility.funding"
-                          :facility-id="facility.facilityId"
-                          :change-rec-guid="facility.changeRequestId"
-                          :program-year-id="summaryModel?.application?.programYearId"
-                          @is-summary-valid="isFormComplete"
-                        />
-                      </div>
-                    </v-expansion-panel>
-                    <v-expansion-panel variant="accordion">
-                      <CCFRISummary
-                        :ccfri="facility?.ccfri"
-                        :facility-id="facility.facilityId"
-                        :change-rec-guid="facility?.changeRequestId"
-                        :program-year-id="summaryModel?.application?.programYearId"
-                        @is-summary-valid="isFormComplete"
-                      />
-                    </v-expansion-panel>
-                    <v-expansion-panel v-if="facility?.rfiApp" variant="accordion">
-                      <RFISummary
-                        :rfi-app="facility?.rfiApp"
-                        :ccfri-id="facility?.ccfri?.ccfriId"
+                  <v-expansion-panel variant="accordion">
+                    <div v-if="!facility.funding || isRenewal" />
+                    <div v-else>
+                      <CCOFSummaryFamily
+                        v-if="summaryModel?.application?.organizationProviderType == 'FAMILY'"
+                        :funding="facility.funding"
                         :facility-id="facility.facilityId"
-                        :change-rec-guid="facility?.changeRequestId"
                         :program-year-id="summaryModel?.application?.programYearId"
                         @is-summary-valid="isFormComplete"
                       />
-                    </v-expansion-panel>
-                    <v-expansion-panel v-if="facility?.nmfApp" variant="accordion">
-                      <NMFSummary
-                        :nmf-app="facility?.nmfApp"
-                        :ccfri-id="facility?.ccfri?.ccfriId"
+                      <CCOFSummary
+                        v-else
+                        :funding="facility.funding"
                         :facility-id="facility.facilityId"
-                        :change-rec-guid="facility?.changeRequestId"
-                        :program-year-id="summaryModel?.application?.programYearId"
-                        @is-summary-valid="isFormComplete"
-                      />
-                    </v-expansion-panel>
-                    <v-expansion-panel variant="accordion">
-                      <ECEWESummary
-                        :ecewe="{}"
-                        :ecewe-facility="facility.ecewe"
-                        :is-processing="isProcessing"
                         :change-rec-guid="facility.changeRequestId"
                         :program-year-id="summaryModel?.application?.programYearId"
                         @is-summary-valid="isFormComplete"
                       />
-                    </v-expansion-panel>
-                    <v-expansion-panel variant="accordion">
-                      <UploadedDocumentsSummary
-                        :documents="facility.documents"
-                        :program-year-id="summaryModel?.application?.programYearId"
-                        @is-summary-valid="isFormComplete"
-                      />
-                    </v-expansion-panel>
-                  </div>
-                </div>
-                <div v-if="!isRenewal" class="mt-10">
+                    </div>
+                  </v-expansion-panel>
+                  <v-expansion-panel variant="accordion">
+                    <CCFRISummary
+                      :ccfri="facility?.ccfri"
+                      :facility-id="facility.facilityId"
+                      :change-rec-guid="facility?.changeRequestId"
+                      :program-year-id="summaryModel?.application?.programYearId"
+                      @is-summary-valid="isFormComplete"
+                    />
+                  </v-expansion-panel>
+                  <v-expansion-panel v-if="facility?.rfiApp" variant="accordion">
+                    <RFISummary
+                      :rfi-app="facility?.rfiApp"
+                      :ccfri-id="facility?.ccfri?.ccfriId"
+                      :facility-id="facility.facilityId"
+                      :change-rec-guid="facility?.changeRequestId"
+                      :program-year-id="summaryModel?.application?.programYearId"
+                      @is-summary-valid="isFormComplete"
+                    />
+                  </v-expansion-panel>
+                  <v-expansion-panel v-if="facility?.nmfApp" variant="accordion">
+                    <NMFSummary
+                      :nmf-app="facility?.nmfApp"
+                      :ccfri-id="facility?.ccfri?.ccfriId"
+                      :facility-id="facility.facilityId"
+                      :change-rec-guid="facility?.changeRequestId"
+                      :program-year-id="summaryModel?.application?.programYearId"
+                      @is-summary-valid="isFormComplete"
+                    />
+                  </v-expansion-panel>
                   <v-expansion-panel variant="accordion">
                     <ECEWESummary
-                      :ecewe="summaryModel.ecewe"
-                      :ecewe-facility="null"
+                      :ecewe="{}"
+                      :ecewe-facility="facility.ecewe"
                       :is-processing="isProcessing"
+                      :change-rec-guid="facility.changeRequestId"
+                      :program-year-id="summaryModel?.application?.programYearId"
+                      @is-summary-valid="isFormComplete"
+                    />
+                  </v-expansion-panel>
+                  <v-expansion-panel variant="accordion">
+                    <UploadedDocumentsSummary
+                      :documents="facility.documents"
                       :program-year-id="summaryModel?.application?.programYearId"
                       @is-summary-valid="isFormComplete"
                     />
                   </v-expansion-panel>
                 </div>
-                <v-expansion-panel v-if="hasChangeNotificationFormDocuments" variant="accordion" class="mt-10">
-                  <ChangeNotificationFormSummary
-                    :change-notification-form-documents="summaryModel?.changeNotificationFormDocuments"
+              </div>
+              <div v-if="!isRenewal" class="mt-10">
+                <v-expansion-panel variant="accordion">
+                  <ECEWESummary
+                    :ecewe="summaryModel.ecewe"
+                    :ecewe-facility="null"
+                    :is-processing="isProcessing"
+                    :program-year-id="summaryModel?.application?.programYearId"
                     @is-summary-valid="isFormComplete"
                   />
                 </v-expansion-panel>
-              </v-row>
-            </v-expansion-panels>
-          </v-card>
-        </v-row>
+              </div>
+              <v-expansion-panel v-if="hasChangeNotificationFormDocuments" variant="accordion" class="mt-10">
+                <ChangeNotificationFormSummary
+                  :change-notification-form-documents="summaryModel?.changeNotificationFormDocuments"
+                  @is-summary-valid="isFormComplete"
+                />
+              </v-expansion-panel>
+            </v-row>
+          </v-expansion-panels>
+        </v-card>
       </div>
       <!---Declaration Start--->
       <v-row
@@ -675,10 +668,11 @@ export default {
     ...mapActions(useSummaryDeclarationStore, [
       'loadDeclaration',
       'loadChangeRequestDeclaration',
-      'updateDeclaration',
+      'loadChangeRequestSummaryDeclaration',
       'loadSummary',
+      'setModel',
       'updateApplicationStatus',
-      'loadChangeRequestSummaryDeclaration',
+      'updateDeclaration',
     ]),
     ...mapActions(useApplicationStore, ['setIsEceweComplete', 'setIsLicenseUploadComplete']),
     ...mapActions(useNavBarStore, ['setNavBarFacilityComplete', 'setNavBarFundingComplete', 'forceNavBarRefresh']),
@@ -723,8 +717,7 @@ export default {
     async submit() {
       this.isProcessing = true;
       try {
-        const summaryDeclarationStore = useSummaryDeclarationStore();
-        summaryDeclarationStore.model(this.model);
+        this.setModel(this.model);
         if (this.isChangeRequest) {
           // await this.updateDeclaration({changeRequestId: this.$route.params?.changeRecGuid, reLockPayload:this.createChangeRequestRelockPayload()});
           await this.updateDeclaration({ changeRequestId: this.$route.params?.changeRecGuid, reLockPayload: [] });
@@ -946,8 +939,9 @@ li {
   padding-bottom: 12px;
 }
 
->>> ::placeholder {
+:deep(::placeholder) {
   color: red !important;
+  opacity: 1 !important;
 }
 
 * .card-title {
diff --git a/frontend/src/components/SupportingDocumentUpload.vue b/frontend/src/components/SupportingDocumentUpload.vue
index 9c4f231a9..fb015eeea 100644
--- a/frontend/src/components/SupportingDocumentUpload.vue
+++ b/frontend/src/components/SupportingDocumentUpload.vue
@@ -2,8 +2,8 @@
   <v-form ref="form" v-model="isValidForm">
     <v-container>
       <v-row justify="space-around">
-        <v-card class="cc-top-level-card" width="1200">
-          <v-card-title class="text-center">
+        <v-card class="cc-top-level-card mx-12" width="100%">
+          <v-card-title class="text-center text-wrap">
             <span class="text-h5">
               Child Care Operating Funding Program - {{ formattedProgramYear }} Program Confirmation Form
             </span>
@@ -96,12 +96,12 @@
         </v-card>
       </v-row>
       <v-row v-if="isChangeRequest">
-        <v-card v-if="isLoading" class="mx-auto mb-4 rounded-lg cc-top-level-card" width="1200">
+        <v-card v-if="isLoading" class="mx-auto mb-4 rounded-lg cc-top-level-card mx-12" width="100%">
           <v-skeleton-loader v-if="isLoading" :loading="isLoading" type="card-heading" />
           <v-skeleton-loader v-if="isLoading" :loading="isLoading" type="list-item-avatar" />
           <v-skeleton-loader v-if="isLoading" :loading="isLoading" type="list-item-avatar" />
         </v-card>
-        <v-card v-else class="px-0 py-0 mx-auto mb-4 rounded-lg cc-top-level-card" width="1200">
+        <v-card v-else class="px-0 py-0 mx-auto mb-4 rounded-lg cc-top-level-card mx-12" width="100%">
           <v-card-text class="pt-7 pa-0">
             <div class="px-md-12 px-7">
               <p class="text-h5 text--primary">
diff --git a/frontend/src/components/TheEnvBar.vue b/frontend/src/components/TheEnvBar.vue
new file mode 100644
index 000000000..e320db7db
--- /dev/null
+++ b/frontend/src/components/TheEnvBar.vue
@@ -0,0 +1,31 @@
+<template>
+  <v-app-bar v-if="bannerColor" :color="bannerColor" height="20" class="env-bar">
+    <div>
+      <h3 class="env-text">{{ bannerEnvironment }} Environment</h3>
+    </div>
+  </v-app-bar>
+</template>
+
+<script>
+import StaticConfig from '@/common/staticConfig'
+
+export default {
+  name: 'TheEnvBar',
+  data() {
+    return {
+      bannerEnvironment: StaticConfig.BANNER_ENVIRONMENT,
+      bannerColor: StaticConfig.BANNER_COLOR,
+    };
+  },
+};
+</script>
+<style scoped>
+.env-bar {
+  margin-top: 2px;
+  padding: 0 16px;
+}
+.env-text {
+  color: #ffffff;
+  font-size: 0.8rem;
+}
+</style>
diff --git a/frontend/src/components/ccofApplication/group/FacilityInformation.vue b/frontend/src/components/ccofApplication/group/FacilityInformation.vue
index 7740e4242..ad0b9314b 100644
--- a/frontend/src/components/ccofApplication/group/FacilityInformation.vue
+++ b/frontend/src/components/ccofApplication/group/FacilityInformation.vue
@@ -3,7 +3,7 @@
     <v-container>
       <v-skeleton-loader :loading="loading" type="table-tbody" class="mb-12">
         <v-row justify="space-around">
-          <v-card class="cc-top-level-card" width="1200">
+          <v-card class="cc-top-level-card mx-12" width="100%">
             <v-card-title class="text-center pb-0"><h3>Facility Information</h3></v-card-title>
             <v-container>
               <v-row>
diff --git a/frontend/src/components/ccofApplication/group/OrganizationInformation.vue b/frontend/src/components/ccofApplication/group/OrganizationInformation.vue
index e5a645350..795569822 100644
--- a/frontend/src/components/ccofApplication/group/OrganizationInformation.vue
+++ b/frontend/src/components/ccofApplication/group/OrganizationInformation.vue
@@ -3,7 +3,7 @@
     <v-container>
       <v-skeleton-loader :loading="loading" type="table-tbody" class="mb-12">
         <v-row justify="space-around">
-          <v-card class="cc-top-level-card" width="1200">
+          <v-card class="cc-top-level-card mx-12" width="100%">
             <v-card-title class="text-center pb-0">
               <h3>Organization Information</h3>
             </v-card-title>
diff --git a/frontend/src/components/guiComponents/AppDateInput.vue b/frontend/src/components/guiComponents/AppDateInput.vue
index 8a0e7138e..c7fe85b83 100644
--- a/frontend/src/components/guiComponents/AppDateInput.vue
+++ b/frontend/src/components/guiComponents/AppDateInput.vue
@@ -26,10 +26,7 @@ export default {
     },
   },
   created() {
-    console.log('AppDateInput');
-    console.log(this.modelValue);
     this.updatedDate = this.modelValue ? new Date(this.modelValue)?.toISOString()?.split('T')[0] : null;
-    console.log(this.updatedDate);
   },
 };
 </script>
diff --git a/frontend/src/components/util/NavBar.vue b/frontend/src/components/util/NavBar.vue
index d45fe7142..bea808579 100644
--- a/frontend/src/components/util/NavBar.vue
+++ b/frontend/src/components/util/NavBar.vue
@@ -4,26 +4,22 @@
       v-model="drawer"
       :location="$vuetify.display.mdAndUp ? 'left' : null"
       :temporary="!$vuetify.display.mdAndUp"
-      width="200"
-      class="mt-16"
     >
-      <v-list>
+      <v-list :opened="expandedNavBarItems">
         <template v-for="item in items" :key="item.title">
           <v-list-item
             v-if="!item.items"
             :id="stripWhitespace(item.title + `MenuBtn`)"
             :value="item.navBarId"
-            :to="item.isAccessible ? item.link : undefined"
             :disabled="!item.isAccessible"
             class="menuRow"
             :style="{ '--v-list-item-prepend-max-width': '30px' }"
+            @click="goTo(item)"
           >
-            <template v-slot:prepend>
+            <template #prepend>
               <v-icon v-if="item.icon">{{ item.icon }}</v-icon>
             </template>
-            <v-list-item-title
-              :class="['menuItem text-wrap', { 'font-weight-bold': item.isActive }]"
-            >
+            <v-list-item-title :class="['menuItem text-wrap', { 'font-weight-bold': item.isActive }]">
               {{ item.title }}
             </v-list-item-title>
           </v-list-item>
@@ -31,13 +27,13 @@
           <v-list-group
             v-else
             :id="stripWhitespace(item.title + `MenuBtn`)"
-            :value="item.expanded"
-            @click="setActive(item)"
+            :value="item.title"
             class="groupMenu"
+            @click="setActive(item)"
           >
-            <template v-slot:activator="{ props }">
+            <template #activator="{ props }">
               <v-list-item v-bind="props" :style="{ '--v-list-item-prepend-max-width': '30px' }">
-                <template v-slot:prepend>
+                <template #prepend>
                   <v-icon v-if="item.icon">{{ item.icon }}</v-icon>
                 </template>
                 <v-list-item-title class="menuItem text-wrap">{{ item.title }}</v-list-item-title>
@@ -46,27 +42,30 @@
 
             <v-list-item
               v-for="subItem in item.items"
-              :key="subItem.navBarId"
               :id="stripWhitespace(subItem.title) + `MenuBtn`"
-              :to="subItem.isAccessible ? subItem.link : undefined"
+              :key="subItem.navBarId"
               :disabled="!subItem.isAccessible"
               class="subMenuRow pl-9 d-flex custom-item"
               :style="{ '--v-list-item-prepend-max-width': '30px' }"
+              @click="goTo(subItem)"
             >
-              <template v-slot:prepend>
+              <template #prepend>
                 <v-icon v-if="subItem.icon">{{ subItem.icon }}</v-icon>
               </template>
-              <v-list-item-title
-                :class="['menuItem text-wrap',
-                  { 'font-weight-bold': subItem.isActive },
-                  { 'blue-grey--text': !subItem.isAccessible }
-                ]"
-              >
-                {{ subItem.title }}
+              <v-list-item-title class="text-wrap">
+                <div
+                  :class="[
+                    'menuItem',
+                    { 'font-weight-bold': subItem.isActive },
+                    { 'blue-grey--text': !subItem.isAccessible },
+                  ]"
+                >
+                  {{ subItem.title }}
+                </div>
+                <div>
+                  {{ subItem.subTitle }}
+                </div>
               </v-list-item-title>
-              <v-list-item-subtitle v-if="subItem.subTitle" class="text-left">
-                {{ subItem.subTitle }}
-              </v-list-item-subtitle>
             </v-list-item>
           </v-list-group>
         </template>
@@ -184,6 +183,10 @@ export default {
     ccofConfirmationEnabled() {
       return this.isLicenseUploadComplete != null;
     },
+
+    expandedNavBarItems() {
+      return this.items?.filter((item) => item.expanded)?.map((item) => item.title);
+    },
   },
   watch: {
     navRefresh: {
@@ -991,6 +994,11 @@ export default {
         return fac.ccfriOptInStatus == 0 || fac.isCCFRIComplete;
       });
     },
+    goTo(page) {
+      if (page?.isAccessible) {
+        this.$router.push(page.link);
+      }
+    },
   },
 };
 </script>
@@ -1004,39 +1012,9 @@ export default {
 .menuItem {
   color: #003366;
 }
-/* .v-list-item {
-    height: 35px;
-    min-height: 35px;
-  } */
-
-/* .menuRow, .groupMenu {
-    border-bottom: 2px solid #d2d2d2;
-  } */
-/* .router:hover .v-list-item__content, /deep/.v-list-group__header:hover .v-list-item__content, .router-link-exact-active {
-    text-decoration: underline #003366;
-  } */
-/* .subMenuRow {
-    border-top: 2px solid #d2d2d2;
-    border-left: 4px solid #FCBA19;
-    background-color: white;
-  } */
-.menuRow /deep/ i {
+.menuRow {
   color: #003366;
 }
-/deep/ .active {
-  border-left: 4px solid #fcba19;
-  background-color: white;
-}
-header /deep/ .v-toolbar__content {
-  padding-left: 0 !important;
-}
-/deep/ .v-list-group__header:before {
-  background-color: #e9ebef;
-  height: 10px;
-}
-/* .v-list-item {
-    min-height: 24px!important;
-  } */
 
 .nav-title {
   font-size: 1.4rem;
diff --git a/frontend/src/router.js b/frontend/src/router.js
index d56959686..b1917661e 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -1,3 +1,52 @@
+import { createRouter, createWebHistory } from 'vue-router';
+
+import BackendSessionExpired from '@/components/BackendSessionExpired.vue';
+import CcfriEstimator from '@/components/CcfriEstimator.vue';
+import ErrorPage from '@/components/ErrorPage.vue';
+import SearchFacility from '@/components/FacilitySearch.vue';
+import Impersonate from '@/components/Impersonate.vue';
+import LandingPage from '@/components/LandingPage.vue';
+import Login from '@/components/Login.vue';
+import LoginError from '@/components/LoginError.vue';
+import Logout from '@/components/Logout.vue';
+import MessagesPage from '@/components/MessagesPage.vue';
+import MinistryLogin from '@/components/MinistryLogin.vue';
+import CcofNewApplicationIntermediate from '@/components/NewAppIntermediatePage.vue';
+import NMF from '@/components/RFI/NMF.vue';
+import CCFRIRequestMoreInfo from '@/components/RFI/RFILanding.vue';
+import SessionExpired from '@/components/SessionExpired.vue';
+import SubmissionHistory from '@/components/SubmissionHistory.vue';
+import SummaryDeclaration from '@/components/SummaryDeclaration.vue';
+import SupportingDocumentUpload from '@/components/SupportingDocumentUpload.vue';
+import AddNewFees from '@/components/ccfriApplication/group/AddNewFees.vue';
+import CcfriEceLandingPage from '@/components/ccfriApplication/group/CcfriEceLanding.vue';
+import currentFees from '@/components/ccfriApplication/group/ExistingFacilityFees.vue';
+import CcofApplicationTypeSelector from '@/components/ccofApplication/CcofApplicationTypeSelector.vue';
+import RenewOrganization from '@/components/ccofApplication/RenewOrganization.vue';
+import Eligibility from '@/components/ccofApplication/family/Eligibility.vue';
+import FamilyFunding from '@/components/ccofApplication/family/FamilyFunding.vue';
+import FamilyOrganization from '@/components/ccofApplication/family/FamilyOrganization.vue';
+import ApplicationConfirmation from '@/components/ccofApplication/group/ApplicationConfirmation.vue';
+import FacilityInformation from '@/components/ccofApplication/group/FacilityInformation.vue';
+import GroupFundAmount from '@/components/ccofApplication/group/FundAmount.vue';
+import LicenseUpload from '@/components/ccofApplication/group/LicenseUpload.vue';
+import GroupOrganizationInformation from '@/components/ccofApplication/group/OrganizationInformation.vue';
+import Unauthorized from '@/components/common/Unauthorized.vue';
+import EceweEligibility from '@/components/eceweApplication/EceweEligibility.vue';
+import EceweFacilities from '@/components/eceweApplication/EceweFacilities.vue';
+import MtfiFeeVerification from '@/components/mtfi/CurrentFeeVerification.vue';
+import MtfiInfo from '@/components/mtfi/MTFIInfo.vue';
+import MtfiSelectFacility from '@/components/mtfi/MtfiSelectFacility.vue';
+import ChangeInformation from '@/components/requestChanges/ChangeInformation.vue';
+import ChangeNotificationDialogue from '@/components/requestChanges/ChangeNotificationDialogue.vue';
+import ChangeNotificationForm from '@/components/requestChanges/ChangeNotificationForm.vue';
+import ReportChange from '@/components/requestChanges/ReportChanges.vue';
+import SummaryDeclarationChangeRequest from '@/components/requestChanges/SummaryDeclarationChangeRequest.vue';
+import { useAppStore } from '@/store/app.js';
+import { useApplicationStore } from '@/store/application.js';
+import { useAuthStore } from '@/store/auth.js';
+import { useNavBarStore } from '@/store/navBar.js';
+
 import {
   CHANGE_TYPES,
   NAV_BAR_GROUPS,
@@ -8,59 +57,8 @@ import {
   pcfUrl,
   pcfUrlGuid,
 } from './utils/constants.js';
-
-import AddNewFees from './components/ccfriApplication/group/AddNewFees.vue';
-import ApplicationConfirmation from './components/ccofApplication/group/ApplicationConfirmation.vue';
-import BackendSessionExpired from './components/BackendSessionExpired.vue';
-import CCFRIRequestMoreInfo from './components/RFI/RFILanding.vue';
-import CcfriEceLandingPage from './components/ccfriApplication/group/CcfriEceLanding.vue';
-import CcfriEstimator from './components/CcfriEstimator.vue';
-import CcofApplicationTypeSelector from './components/ccofApplication/CcofApplicationTypeSelector.vue';
-import CcofNewApplicationIntermediate from './components/NewAppIntermediatePage.vue';
-import ChangeInformation from './components/requestChanges/ChangeInformation.vue';
-import ChangeNotificationDialogue from './components/requestChanges/ChangeNotificationDialogue.vue';
-import ChangeNotificationForm from './components/requestChanges/ChangeNotificationForm.vue';
-import EceweEligibility from './components/eceweApplication/EceweEligibility.vue';
-import EceweFacilities from './components/eceweApplication/EceweFacilities.vue';
-import Eligibility from './components/ccofApplication/family/Eligibility.vue';
-import ErrorPage from './components/ErrorPage.vue';
-import FacilityInformation from './components/ccofApplication/group/FacilityInformation.vue';
-import FamilyFunding from './components/ccofApplication/family/FamilyFunding.vue';
-import FamilyOrganization from './components/ccofApplication/family/FamilyOrganization.vue';
-import GroupFundAmount from './components/ccofApplication/group/FundAmount.vue';
-import GroupOrganizationInformation from './components/ccofApplication/group/OrganizationInformation.vue';
-import Impersonate from './components/Impersonate.vue';
-import LandingPage from './components/LandingPage.vue';
-import LicenseUpload from './components/ccofApplication/group/LicenseUpload.vue';
-import Login from './components/Login.vue';
-import LoginError from './components/LoginError.vue';
-import Logout from './components/Logout.vue';
-import MessagesPage from './components/MessagesPage.vue';
-import MinistryLogin from './components/MinistryLogin.vue';
-import MtfiFeeVerification from './components/mtfi/CurrentFeeVerification.vue';
-import MtfiInfo from './components/mtfi/MTFIInfo.vue';
-import MtfiSelectFacility from './components/mtfi/MtfiSelectFacility.vue';
-import NMF from './components/RFI/NMF.vue';
-import RenewOrganization from './components/ccofApplication/RenewOrganization.vue';
-import ReportChange from './components/requestChanges/ReportChanges.vue';
-import SearchFacility from './components/FacilitySearch.vue';
-import SessionExpired from './components/SessionExpired.vue';
-import SubmissionHistory from './components/SubmissionHistory.vue';
-import SummaryDeclaration from './components/SummaryDeclaration.vue';
-import SummaryDeclarationChangeRequest from './components/requestChanges/SummaryDeclarationChangeRequest.vue';
-import SupportingDocumentUpload from './components/SupportingDocumentUpload.vue';
-import Unauthorized from './components/common/Unauthorized.vue';
-import currentFees from './components/ccfriApplication/group/ExistingFacilityFees.vue';
-
-import { useAppStore } from './store/app.js';
-import { useApplicationStore } from './store/application.js';
-import { useAuthStore } from './store/auth.js';
-import { useNavBarStore } from './store/navBar.js';
-
 import { Subtitle_Banners } from './utils/constants/SubTitleBanners.js';
 
-import { createRouter, createWebHistory } from 'vue-router';
-
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
diff --git a/frontend/src/store/app.js b/frontend/src/store/app.js
index 50ce305af..7027f7051 100644
--- a/frontend/src/store/app.js
+++ b/frontend/src/store/app.js
@@ -1,8 +1,8 @@
 import { defineStore } from 'pinia';
-import { useApplicationStore } from './application.js';
 
-import ApiService from '../common/apiService.js';
-import { PROGRAM_YEAR_LANGUAGE_TYPES } from '../utils/constants.js';
+import ApiService from '@/common/apiService.js';
+import { useApplicationStore } from '@/store/application.js';
+import { PROGRAM_YEAR_LANGUAGE_TYPES } from '@/utils/constants.js';
 
 export const useAppStore = defineStore('app', {
   state: () => ({
@@ -36,7 +36,7 @@ export const useAppStore = defineStore('app', {
     setPageTitle(pageTitle) {
       this.pageTitle = pageTitle;
     },
-    setSubtitleBanner(state, subtitleBanner) {
+    setSubtitleBanner(subtitleBanner) {
       this.subtitleBanner = subtitleBanner;
     },
     setAlertNotificationText(alertNotificationText) {
diff --git a/frontend/src/store/summaryDeclaration.js b/frontend/src/store/summaryDeclaration.js
index 005ae0bdd..a52f227ed 100644
--- a/frontend/src/store/summaryDeclaration.js
+++ b/frontend/src/store/summaryDeclaration.js
@@ -73,7 +73,7 @@ export const useSummaryDeclarationStore = defineStore('summaryDeclaration', {
     },
   },
   actions: {
-    model(value) {
+    setModel(value) {
       this.model = value;
     },
     setSummaryModel(value) {