diff --git a/src/app/indexed-db/db-changes.service.ts b/src/app/indexed-db/db-changes.service.ts
index c5d723e4..bfeab133 100644
--- a/src/app/indexed-db/db-changes.service.ts
+++ b/src/app/indexed-db/db-changes.service.ts
@@ -154,13 +154,15 @@ export class DbChangesService {
 
     //update on site visits
     let onSiteVisits: Array<IdbOnSiteVisit> = this.onSiteVisitIdbService.onSiteVisits.getValue();
-    let assessmentOnSiteVisits: Array<IdbOnSiteVisit> = onSiteVisits.filter(onSiteVisit => { return onSiteVisit.assessmentIds.includes(assessment.guid) });
-    if (assessmentOnSiteVisits.length > 0) {
-      for (let i = 0; i < assessmentOnSiteVisits.length; i++) {
-        assessmentOnSiteVisits[i].assessmentIds = assessmentOnSiteVisits[i].assessmentIds.filter(assessmentId => { return assessmentId != assessment.guid });
-        await firstValueFrom(this.onSiteVisitIdbService.updateWithObservable(assessmentOnSiteVisits[i]));
-      }
+    let assessmentOnSiteVisit: IdbOnSiteVisit = onSiteVisits.find(onSiteVisit => { return onSiteVisit.assessmentIds.includes(assessment.guid) });
+    if (assessmentOnSiteVisit) {
+      assessmentOnSiteVisit.assessmentIds = assessmentOnSiteVisit.assessmentIds.filter(assessmentId => { return assessmentId != assessment.guid });
+      await firstValueFrom(this.onSiteVisitIdbService.updateWithObservable(assessmentOnSiteVisit));
       await this.onSiteVisitIdbService.setOnSiteVisits();
+      let selectedOnSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
+      if (selectedOnSiteVisit && selectedOnSiteVisit.guid == assessmentOnSiteVisit.guid) {
+        this.onSiteVisitIdbService.selectedVisit.next(assessmentOnSiteVisit);
+      }
     }
 
     //delete assessment
diff --git a/src/app/indexed-db/key-performance-indicators-idb.service.ts b/src/app/indexed-db/key-performance-indicators-idb.service.ts
index 0271bdee..bf1ab545 100644
--- a/src/app/indexed-db/key-performance-indicators-idb.service.ts
+++ b/src/app/indexed-db/key-performance-indicators-idb.service.ts
@@ -121,4 +121,12 @@ export class KeyPerformanceIndicatorsIdbService {
     }
     return addedMetric;
   }
+
+  getByFacilityGuid(facilityGuid: string): Array<IdbKeyPerformanceIndicator> {
+    let keyPerformanceIndicators: Array<IdbKeyPerformanceIndicator> = this.keyPerformanceIndicators.getValue();
+    let facilityKPIs: Array<IdbKeyPerformanceIndicator> = keyPerformanceIndicators.filter(kpi => {
+      return kpi.facilityId == facilityGuid;
+    });
+    return facilityKPIs;
+  }
 }
diff --git a/src/app/models/assessment.ts b/src/app/models/assessment.ts
index 6c8edf81..3c967d22 100644
--- a/src/app/models/assessment.ts
+++ b/src/app/models/assessment.ts
@@ -20,7 +20,8 @@ export interface IdbAssessment extends IdbEntry {
     costSavings: number,
     visitDate: Date,
     notes: string,
-    implementationCost: number
+    implementationCost: number,
+    sidebarOpen: boolean
 }
 
 const defaultAssessmentType: AssessmentType = "Pump";
@@ -46,6 +47,7 @@ export function getNewIdbAssessment(userId: string, companyId: string, facilityI
         costSavings: 0,
         notes: undefined,
         visitDate: undefined,
-        implementationCost: 0
+        implementationCost: 0,
+        sidebarOpen: false
     }
 }
\ No newline at end of file
diff --git a/src/app/models/company.ts b/src/app/models/company.ts
index 15f10083..41bd6289 100644
--- a/src/app/models/company.ts
+++ b/src/app/models/company.ts
@@ -7,6 +7,8 @@ export interface IdbCompany extends IdbEntry {
     generalInformation: GeneralInformation,
     displayFacilities: boolean,
     companyEnergyUnit: string,
+    sidebarOpen: boolean,
+    sidebarContactsOpen: boolean
 }
 
 export function getNewIdbCompany(userId: string): IdbCompany {
@@ -18,6 +20,8 @@ export function getNewIdbCompany(userId: string): IdbCompany {
         generalInformation: generalInformation,
         displayFacilities: true,
         companyEnergyUnit: 'MMBtu',
+        sidebarOpen: true,
+        sidebarContactsOpen: false
     }
 }
 
diff --git a/src/app/models/facility.ts b/src/app/models/facility.ts
index c816de42..36cecad7 100644
--- a/src/app/models/facility.ts
+++ b/src/app/models/facility.ts
@@ -10,6 +10,11 @@ export interface IdbFacility extends IdbEntry {
     generalInformation: GeneralInformation,
     energyUse: number,
     cost: number,
+    sidebarOpen: boolean,
+    sidebarKPIsOpen: boolean,
+    sidebarSystemInventoryOpen: boolean,
+    sidebarEndUseInventoryOpen: boolean,
+    sidebarPreAssessmentOpen: boolean
 }
 
 export function getNewIdbFacility(userId: string, companyId: string): IdbFacility {
@@ -24,5 +29,10 @@ export function getNewIdbFacility(userId: string, companyId: string): IdbFacilit
         generalInformation: generalInformation,
         energyUse: 0,
         cost: 0,
+        sidebarOpen: true,
+        sidebarKPIsOpen: false,
+        sidebarSystemInventoryOpen: false,
+        sidebarEndUseInventoryOpen: false,
+        sidebarPreAssessmentOpen: false
     }
 }
diff --git a/src/app/routing/setup-wizard.routes.ts b/src/app/routing/setup-wizard.routes.ts
index 9bf7166a..e6158d06 100644
--- a/src/app/routing/setup-wizard.routes.ts
+++ b/src/app/routing/setup-wizard.routes.ts
@@ -3,11 +3,7 @@ import { SetupWizardComponent } from "../setup-wizard/setup-wizard.component";
 import { PreVisitComponent } from "../setup-wizard/pre-visit/pre-visit.component";
 import { CompanySetupComponent } from "../setup-wizard/pre-visit/company-setup/company-setup.component";
 import { CanDeactivateGuard } from "../guards/can-deactivate.guard";
-import { CompanyContactsSetupComponent } from "../setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup.component";
 import { FacilitySetupComponent } from "../setup-wizard/pre-visit/facility-setup/facility-setup.component";
-import { FacilityEnergyEquipmentSetupComponent } from "../setup-wizard/pre-visit/facility-energy-equipment-setup/facility-energy-equipment-setup.component";
-import { FacilityProcessEquipmentSetupComponent } from "../setup-wizard/pre-visit/facility-process-equipment-setup/facility-process-equipment-setup.component";
-import { PreAssessmentSetupComponent } from "../setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.component";
 import { ReviewPreVisitSetupComponent } from "../setup-wizard/pre-visit/review-pre-visit-setup/review-pre-visit-setup.component";
 import { DataCollectionComponent } from "../setup-wizard/data-collection/data-collection.component";
 import { DataCollectionManageAssessmentsComponent } from "../setup-wizard/data-collection/data-collection-manage-assessments/data-collection-manage-assessments.component";
@@ -23,6 +19,14 @@ import { AssessmentDetailsFormComponent } from "../shared/shared-assessment-form
 import { AssessmentEnergyOpportunitiesFormComponent } from "../setup-wizard/data-collection/on-site-assessment/assessment-energy-opportunities-form/assessment-energy-opportunities-form.component";
 import { FacilityKpiSelectComponent } from "../setup-wizard/pre-visit/facility-kpi-select/facility-kpi-select.component";
 import { FacilityKpiDetailsComponent } from "../setup-wizard/pre-visit/facility-kpi-details/facility-kpi-details.component";
+import { ManageCompanyContactsComponent } from "../setup-wizard/pre-visit/company-contacts/manage-company-contacts/manage-company-contacts.component";
+import { CompanyContactDetailsFormComponent } from "../setup-wizard/pre-visit/company-contacts/company-contact-details-form/company-contact-details-form.component";
+import { ManageEnergyEquipmentComponent } from "../setup-wizard/pre-visit/facility-energy-equipment/manage-energy-equipment/manage-energy-equipment.component";
+import { FacilityEnergyEquipmentFormComponent } from "../setup-wizard/pre-visit/facility-energy-equipment/facility-energy-equipment-form/facility-energy-equipment-form.component";
+import { ManageProcessEquipmentComponent } from "../setup-wizard/pre-visit/facility-process-equipment/manage-process-equipment/manage-process-equipment.component";
+import { FacilityProcessEquipmentFormComponent } from "../setup-wizard/pre-visit/facility-process-equipment/facility-process-equipment-form/facility-process-equipment-form.component";
+import { PreAssessmentFormComponent } from "../setup-wizard/pre-visit/pre-assessments/pre-assessment-form/pre-assessment-form.component";
+import { ManagePreAssessmentsComponent } from "../setup-wizard/pre-visit/pre-assessments/manage-pre-assessments/manage-pre-assessments.component";
 
 
 export const SetupWizardRoutes: Route = {
@@ -44,16 +48,21 @@ export const SetupWizardRoutes: Route = {
                     canDeactivate: [CanDeactivateGuard]
                 },
                 {
-                    path: 'kpi-select',
+                    path: 'facility-kpi-select',
                     component: FacilityKpiSelectComponent
                 },
                 {
-                    path: 'kpi-detail/:id',
+                    path: 'facility-kpi-detail/:id',
                     component: FacilityKpiDetailsComponent
                 },
                 {
                     path: 'company-contacts',
-                    component: CompanyContactsSetupComponent,
+                    component: ManageCompanyContactsComponent,
+                    // canDeactivate: [CanDeactivateGuard]
+                },
+                {
+                    path: 'company-contacts/:id',
+                    component: CompanyContactDetailsFormComponent,
                     canDeactivate: [CanDeactivateGuard]
                 },
                 {
@@ -62,16 +71,31 @@ export const SetupWizardRoutes: Route = {
                     canDeactivate: [CanDeactivateGuard]
                 },
                 {
-                    path: 'energy-equipment',
-                    component: FacilityEnergyEquipmentSetupComponent
+                    path: 'facility-energy-equipment',
+                    component: ManageEnergyEquipmentComponent
+                },
+                {
+                    path: 'facility-energy-equipment/:id',
+                    component: FacilityEnergyEquipmentFormComponent,
+                    canDeactivate: [CanDeactivateGuard]
                 },
                 {
-                    path: 'end-uses',
-                    component: FacilityProcessEquipmentSetupComponent
+                    path: 'facility-end-uses',
+                    component: ManageProcessEquipmentComponent
                 },
                 {
-                    path: 'pre-assessment',
-                    component: PreAssessmentSetupComponent
+                    path: 'facility-end-uses/:id',
+                    component: FacilityProcessEquipmentFormComponent,
+                    canDeactivate: [CanDeactivateGuard]
+                },
+                {
+                    path: 'facility-pre-assessment',
+                    component: ManagePreAssessmentsComponent
+                },
+                {
+                    path: 'facility-pre-assessment/:id',
+                    component: PreAssessmentFormComponent,
+                    canDeactivate: [CanDeactivateGuard]
                 },
                 {
                     path: 'review-pre-visit',
diff --git a/src/app/setup-wizard/data-collection/data-collection-manage-assessments/data-collection-manage-assessments.component.html b/src/app/setup-wizard/data-collection/data-collection-manage-assessments/data-collection-manage-assessments.component.html
index 37641c5f..b0e66ee4 100644
--- a/src/app/setup-wizard/data-collection/data-collection-manage-assessments/data-collection-manage-assessments.component.html
+++ b/src/app/setup-wizard/data-collection/data-collection-manage-assessments/data-collection-manage-assessments.component.html
@@ -3,7 +3,7 @@
         <div class="col-10 pt-4 pb-4">
             <div class="form-paper shadow">
                 <h5>
-                    <fa-icon [icon]="faToolbox"></fa-icon> Manage Assessments
+                    <fa-icon [icon]="faList"></fa-icon> Manage Assessments
                 </h5>
                 <hr>
                 <div class="d-flex w-100 justify-content-between pb-2">
diff --git a/src/app/setup-wizard/data-collection/data-collection-manage-assessments/data-collection-manage-assessments.component.ts b/src/app/setup-wizard/data-collection/data-collection-manage-assessments/data-collection-manage-assessments.component.ts
index 835f122b..9f91aff5 100644
--- a/src/app/setup-wizard/data-collection/data-collection-manage-assessments/data-collection-manage-assessments.component.ts
+++ b/src/app/setup-wizard/data-collection/data-collection-manage-assessments/data-collection-manage-assessments.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { IconDefinition, faChevronLeft, faChevronRight, faPlus, faScrewdriverWrench, faToolbox, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { IconDefinition, faChevronLeft, faChevronRight, faList, faPlus, faScrewdriverWrench, faToolbox, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { Subscription, firstValueFrom } from 'rxjs';
 import { AssessmentIdbService } from 'src/app/indexed-db/assessment-idb.service';
 import { DbChangesService } from 'src/app/indexed-db/db-changes.service';
@@ -16,7 +16,7 @@ import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
 })
 export class DataCollectionManageAssessmentsComponent {
 
-  faToolbox: IconDefinition = faToolbox;
+  faList: IconDefinition = faList;
   faChevronRight: IconDefinition = faChevronRight;
   faChevronLeft: IconDefinition = faChevronLeft;
   faPlus: IconDefinition = faPlus;
@@ -69,10 +69,12 @@ export class DataCollectionManageAssessmentsComponent {
       this.facilityIdbService.getByGUID(this.onSiteVisit.facilityId).unitSettings
     );
     assessment.visitDate = this.onSiteVisit.visitDate;
+    assessment.sidebarOpen = true;
     await firstValueFrom(this.assessmentIdbService.addWithObservable(assessment));
     await this.assessmentIdbService.setAssessments();
     this.onSiteVisit.assessmentIds.push(assessment.guid);
     await this.onSiteVisitIdbService.asyncUpdate(this.onSiteVisit);
+    this.goToAssessment(assessment.guid);
   }
 
 
diff --git a/src/app/setup-wizard/data-collection/on-site-assessment/on-site-assessment.component.css b/src/app/setup-wizard/data-collection/on-site-assessment/on-site-assessment.component.css
index ed46499d..2303a9dd 100644
--- a/src/app/setup-wizard/data-collection/on-site-assessment/on-site-assessment.component.css
+++ b/src/app/setup-wizard/data-collection/on-site-assessment/on-site-assessment.component.css
@@ -8,5 +8,21 @@
 
 .navbar{
     padding-bottom: 0px;
-    border-bottom: 1px #0079c2 solid;
+    border-bottom: 1px var(--portfolio-nav-color) solid;
+}
+
+nav.navbar .nav.nav-tabs .nav-item .nav-link{
+    border-color: var(--portfolio-nav-color);
+    color: var(--portfolio-nav-color);
+}
+
+
+nav.navbar .nav.nav-tabs .nav-item .nav-link.active {
+    background-color: var(--portfolio-nav-color);
+    color: white;
+    border-bottom-color: black;
+}
+nav.navbar .nav.nav-tabs .nav-item .nav-link:hover {
+    background-color: #8DABBE;
+    color: black;
 }
\ No newline at end of file
diff --git a/src/app/setup-wizard/data-collection/on-site-assessment/on-site-assessment.component.html b/src/app/setup-wizard/data-collection/on-site-assessment/on-site-assessment.component.html
index 58739859..f6f6a84d 100644
--- a/src/app/setup-wizard/data-collection/on-site-assessment/on-site-assessment.component.html
+++ b/src/app/setup-wizard/data-collection/on-site-assessment/on-site-assessment.component.html
@@ -13,6 +13,7 @@ <h5>
                             *ngIf="assessment.assessmentType">{{assessment.assessmentType}}</span>
                     </div>
                 </div>
+                <hr class="my-1">
                 <nav class="navbar">
                     <ul class="nav nav-tabs">
                         <li class="nav-item">
diff --git a/src/app/setup-wizard/data-evaluation/assessment-evaluation/assessment-evaluation.component.html b/src/app/setup-wizard/data-evaluation/assessment-evaluation/assessment-evaluation.component.html
index f35e8e8f..37add8f5 100644
--- a/src/app/setup-wizard/data-evaluation/assessment-evaluation/assessment-evaluation.component.html
+++ b/src/app/setup-wizard/data-evaluation/assessment-evaluation/assessment-evaluation.component.html
@@ -3,7 +3,7 @@
         <div [ngClass]="{'col-10 pt-4 pb-4': !print}">
             <div [ngClass]="{'form-paper shadow': !print}">
                 <h5>
-                    <fa-icon [icon]="faScrewdriverWrench"></fa-icon> {{assessment.name}} Report
+                    <fa-icon [icon]="faChartPie"></fa-icon> {{assessment.name}} Report
                 </h5>
                 <app-assessment-report [assessment]="assessment"></app-assessment-report>
             </div>
diff --git a/src/app/setup-wizard/data-evaluation/assessment-evaluation/assessment-evaluation.component.ts b/src/app/setup-wizard/data-evaluation/assessment-evaluation/assessment-evaluation.component.ts
index 8b832fde..97b35f7c 100644
--- a/src/app/setup-wizard/data-evaluation/assessment-evaluation/assessment-evaluation.component.ts
+++ b/src/app/setup-wizard/data-evaluation/assessment-evaluation/assessment-evaluation.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { IconDefinition, faChevronLeft, faChevronRight, faFilePdf, faScrewdriverWrench } from '@fortawesome/free-solid-svg-icons';
+import { IconDefinition, faChevronLeft, faChevronRight, faChartPie, faFilePdf } from '@fortawesome/free-solid-svg-icons';
 import { Subscription } from 'rxjs';
 import { AssessmentIdbService } from 'src/app/indexed-db/assessment-idb.service';
 import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
@@ -16,8 +16,8 @@ import { SharedDataService } from 'src/app/shared/shared-services/shared-data.se
 export class AssessmentEvaluationComponent {
   faChevronRight: IconDefinition = faChevronRight;
   faChevronLeft: IconDefinition = faChevronLeft;
-  faScrewdriverWrench: IconDefinition = faScrewdriverWrench;
   faFilePdf: IconDefinition = faFilePdf;
+  faChartPie: IconDefinition = faChartPie;
   
   assessmentIndex: number;
   onSiteVisit: IdbOnSiteVisit;
diff --git a/src/app/setup-wizard/data-evaluation/data-follow-up/data-follow-up.component.html b/src/app/setup-wizard/data-evaluation/data-follow-up/data-follow-up.component.html
index a5c0db71..dbca66d1 100644
--- a/src/app/setup-wizard/data-evaluation/data-follow-up/data-follow-up.component.html
+++ b/src/app/setup-wizard/data-evaluation/data-follow-up/data-follow-up.component.html
@@ -3,6 +3,7 @@
         <div class="col-10 pt-4 pb-4">
             <div class="form-paper shadow">
                 <h5>
+                    <fa-icon [icon]="faPersonWalkingArrowLoopLeft"></fa-icon>
                     Review and Follow-up
                 </h5>
                 <hr>
diff --git a/src/app/setup-wizard/data-evaluation/data-follow-up/data-follow-up.component.ts b/src/app/setup-wizard/data-evaluation/data-follow-up/data-follow-up.component.ts
index 66849c2a..2e6911d2 100644
--- a/src/app/setup-wizard/data-evaluation/data-follow-up/data-follow-up.component.ts
+++ b/src/app/setup-wizard/data-evaluation/data-follow-up/data-follow-up.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { IconDefinition, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { IconDefinition, faChevronLeft, faChevronRight, faPersonWalkingArrowLoopLeft } from '@fortawesome/free-solid-svg-icons';
 import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
 import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
 
@@ -13,6 +13,7 @@ export class DataFollowUpComponent {
 
   faChevronLeft: IconDefinition = faChevronLeft;
   faChevronRight: IconDefinition = faChevronRight;
+  faPersonWalkingArrowLoopLeft: IconDefinition = faPersonWalkingArrowLoopLeft;
 
   onSiteVisit: IdbOnSiteVisit;
   constructor(private router: Router,
diff --git a/src/app/setup-wizard/data-evaluation/visit-report/visit-report.component.html b/src/app/setup-wizard/data-evaluation/visit-report/visit-report.component.html
index 8c73281a..2fb30732 100644
--- a/src/app/setup-wizard/data-evaluation/visit-report/visit-report.component.html
+++ b/src/app/setup-wizard/data-evaluation/visit-report/visit-report.component.html
@@ -3,7 +3,7 @@
         <div [ngClass]="{'col-10 pt-4 pb-4': !print}">
             <div [ngClass]="{'form-paper shadow': !print}">
                 <h5>
-                    <fa-icon [icon]="faChartPie"></fa-icon>
+                    <fa-icon [icon]="faChartColumn"></fa-icon>
                     On Site Visit Report
                 </h5>
                 <app-on-site-visit-report [onSiteVisit]="onSiteVisit"></app-on-site-visit-report>
diff --git a/src/app/setup-wizard/data-evaluation/visit-report/visit-report.component.ts b/src/app/setup-wizard/data-evaluation/visit-report/visit-report.component.ts
index 0cf714ea..9be28b33 100644
--- a/src/app/setup-wizard/data-evaluation/visit-report/visit-report.component.ts
+++ b/src/app/setup-wizard/data-evaluation/visit-report/visit-report.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { IconDefinition, faChartPie, faChevronLeft, faFilePdf, faFolderOpen, faScrewdriverWrench } from '@fortawesome/free-solid-svg-icons';
+import { IconDefinition, faChartColumn, faChevronLeft, faFilePdf, faFolderOpen, faScrewdriverWrench } from '@fortawesome/free-solid-svg-icons';
 import { Subscription } from 'rxjs';
 import { AssessmentIdbService } from 'src/app/indexed-db/assessment-idb.service';
 import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
@@ -18,9 +18,10 @@ export class VisitReportComponent {
   faChevronLeft: IconDefinition = faChevronLeft;
   faFolderOpen: IconDefinition = faFolderOpen;
   faScrewdriverWrench: IconDefinition = faScrewdriverWrench;
-  faChartPie: IconDefinition = faChartPie;
   faFilePdf: IconDefinition = faFilePdf;
   
+  faChartColumn: IconDefinition = faChartColumn;
+
   onSiteVisit: IdbOnSiteVisit;
   assessments: Array<IdbAssessment>;
     print: boolean;
diff --git a/src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup-form/company-contacts-setup-form.component.html b/src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup-form/company-contacts-setup-form.component.html
deleted file mode 100644
index 43089b40..00000000
--- a/src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup-form/company-contacts-setup-form.component.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<h5>
-    <fa-icon [icon]="faAddressBook" class="me-2"></fa-icon>Stakeholder Contacts
-</h5>
-<hr class="my-1">
-<div class="d-flex w-100 justify-content-end pb-2">
-    <div class="p-0">
-        <button class="btn btn-outline-success btn-sm" (click)="addContact()">
-            <fa-icon [icon]="faPlus"></fa-icon>
-            Add Stakeholder
-        </button>
-    </div>
-</div>
-<ng-template [ngIf]="companyContactGuids.length > 0" [ngIfElse]="noContactsBlock">
-    <div class="accordion" id="contactAccordion">
-        <div class="accordion-item"
-            *ngFor="let contactGuid of companyContactGuids; let index = index; let last = last;">
-
-            <h2 class="accordion-header">
-                <button class="accordion-button" type="button" data-bs-toggle="collapse"
-                    [attr.data-bs-target]="'#'+contactGuid" aria-expanded="true" [attr.aria-controls]="contactGuid"
-                    [ngClass]="{'collapsed': accordionGuid != contactGuid}" (click)="toggleBS(contactGuid)">
-                    <!--
-                    TODO: add back in messaging around validation
-                    Updated when using shared form in dashboards
-                    -->
-                    <fa-icon [icon]="faCircleExclamation" class="pe-1 fa-error"
-                        *ngIf="contactGuid | contactInvalid: allContacts"></fa-icon>
-                    <fa-icon [icon]="faUser" class="pe-1"></fa-icon>
-                    {{contactGuid | contactName: allContacts}}
-                </button>
-            </h2>
-            <div [id]="'#'+contactGuid" class="accordion-collapse collapse" data-bs-parent="#contactAccordion">
-                <div class="accordion-body">
-                    <app-company-contacts-form [contactGuid]="contactGuid"
-                        (emitInitialized)="childFormInitialized(contactGuid, last)"></app-company-contacts-form>
-                </div>
-            </div>
-        </div>
-    </div>
-</ng-template>
-<ng-template #noContactsBlock>
-    <div class="alert alert-warning">
-        No stakeholder contacts added for this company. Click "<fa-icon [icon]="faPlus"></fa-icon> Add
-        Stakeholder"
-        to add a contact to this company.
-    </div>
-</ng-template>
\ No newline at end of file
diff --git a/src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup-form/company-contacts-setup-form.component.ts b/src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup-form/company-contacts-setup-form.component.ts
deleted file mode 100644
index 35701480..00000000
--- a/src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup-form/company-contacts-setup-form.component.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import { ChangeDetectorRef, Component } from '@angular/core';
-import { firstValueFrom, Subscription } from 'rxjs';
-import { getNewIdbContact, IdbContact } from 'src/app/models/contact';
-import { IdbCompany } from 'src/app/models/company';
-import { faAddressBook, faCircleExclamation, faPlus, faUser, IconDefinition } from '@fortawesome/free-solid-svg-icons';
-import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
-import { ContactIdbService } from 'src/app/indexed-db/contact-idb.service';
-import { LocalStorageDataService } from 'src/app/shared/shared-services/local-storage-data.service';
-import { BootstrapService } from 'src/app/shared/shared-services/bootstrap.service';
-
-@Component({
-  selector: 'app-company-contacts-setup-form',
-  templateUrl: './company-contacts-setup-form.component.html',
-  styleUrl: './company-contacts-setup-form.component.css'
-})
-export class CompanyContactsSetupFormComponent {
-
-  faUser: IconDefinition = faUser;
-  faCircleExclamation: IconDefinition = faCircleExclamation;
-  
-  allContacts: Array<IdbContact>;
-  companyContactGuids: Array<string>;
-  contactsSub: Subscription
-  companyContacts: Array<IdbContact>;
-  routeGuardWarningModal: boolean = false;
-
-  selectedCompany: IdbCompany;
-  selectedCompanySub: Subscription;
-
-  accordionGuid: string;
-  faAddressBook: IconDefinition = faAddressBook;
-  faPlus: IconDefinition = faPlus;
-
-  hasInvalidContacts: boolean;
-  isAddNew: boolean = false;
-  constructor(
-    private companyIdbService: CompanyIdbService,
-    private contactIdbService: ContactIdbService,
-    private localStorageDataService: LocalStorageDataService,
-    private bootstrapService: BootstrapService,
-    private cd: ChangeDetectorRef
-  ) {
-  }
-
-  ngOnInit() {
-    this.selectedCompanySub = this.companyIdbService.selectedCompany.subscribe(_company => {
-      this.selectedCompany = _company;
-      this.setCompanyContacts();
-    });
-
-    this.contactsSub = this.contactIdbService.contacts.subscribe(_contacts => {
-      this.allContacts = _contacts;
-      this.setCompanyContacts();
-    });
-  }
-
-  ngAfterViewInit() {
-    //open the accordion for last viewed neb
-    let lastContactGuid: string = this.localStorageDataService.contactAccordionGuid;
-    if (lastContactGuid && this.companyContactGuids.includes(lastContactGuid)) {
-      this.toggleBS(lastContactGuid);
-      this.cd.detectChanges();
-    }
-  }
-
-  setCompanyContacts() {
-    if (this.selectedCompany && this.allContacts) {
-      let tmpCompanyContacts: Array<IdbContact> = this.allContacts.filter(contact => {
-        return contact.companyId == this.selectedCompany.guid;
-      });
-      let tmpContactIds: Array<string> = tmpCompanyContacts.map(contact => {
-        return contact.guid;
-      });
-
-      if (!this.companyContactGuids) {
-        this.companyContactGuids = tmpContactIds;
-      } else {
-        //check contact added/removed
-        if (this.companyContactGuids.length != tmpContactIds.length) {
-          this.companyContactGuids = tmpContactIds;
-        }
-      }
-    }
-  }
-
-  ngOnDestroy() {
-    if (this.selectedCompanySub) {
-      this.selectedCompanySub.unsubscribe();
-    }
-    if (this.contactsSub) {
-      this.contactsSub.unsubscribe();
-    }
-  }
-
-  async addContact() {
-    let newContact: IdbContact = getNewIdbContact(this.selectedCompany.userId, this.selectedCompany.guid);
-    await firstValueFrom(this.contactIdbService.addWithObservable(newContact))
-    await this.contactIdbService.setContacts();
-    this.isAddNew = true;
-  }
-
-  toggleBS(contactGuid: string) {
-    this.bootstrapService.bsCollapse('#' + contactGuid);
-    if (this.accordionGuid != contactGuid) {
-      this.accordionGuid = contactGuid;
-    } else {
-      this.accordionGuid = undefined;
-    }
-    this.localStorageDataService.setContactAccordionGuid(this.accordionGuid);
-  }
-
-  childFormInitialized(contactGuid: string, isLast: boolean) {
-    if (this.isAddNew == true && isLast) {
-      this.toggleBS(contactGuid);
-      this.isAddNew = false;
-      this.cd.detectChanges();
-    }
-  }
-}
diff --git a/src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup.component.spec.ts b/src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup.component.spec.ts
deleted file mode 100644
index 19d85856..00000000
--- a/src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup.component.spec.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CompanyContactsSetupComponent } from './company-contacts-setup.component';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { UserIdbService } from 'src/app/indexed-db/user-idb.service';
-import { IdbUser, getNewIdbUser } from 'src/app/models/user';
-import { BehaviorSubject } from 'rxjs';
-import { IdbCompany, getNewIdbCompany } from 'src/app/models/company';
-import { IdbFacility, getNewIdbFacility } from 'src/app/models/facility';
-import { FormsModule } from '@angular/forms';
-import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
-import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
-import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
-import { IdbOnSiteVisit, getNewIdbOnSiteVisit } from 'src/app/models/onSiteVisit';
-import { ContactIdbService } from 'src/app/indexed-db/contact-idb.service';
-import { IdbContact } from 'src/app/models/contact';
-import { LocalStorageDataService } from 'src/app/shared/shared-services/local-storage-data.service';
-import { ChangeDetectorRef } from '@angular/core';
-import { BootstrapService } from 'src/app/shared/shared-services/bootstrap.service';
-import { SharedCompanyFormsModule } from 'src/app/shared/shared-company-forms/shared-company-forms.module';
-import { CompanyContactsSetupFormComponent } from './company-contacts-setup-form/company-contacts-setup-form.component';
-
-describe('CompanyContactsSetupComponent', () => {
-  let component: CompanyContactsSetupComponent;
-  let fixture: ComponentFixture<CompanyContactsSetupComponent>;
-  let userIdbService: Partial<UserIdbService> = {
-    user: new BehaviorSubject<IdbUser>(getNewIdbUser())
-  };
-  let companyIdbService: Partial<CompanyIdbService> = {
-    companies: new BehaviorSubject<Array<IdbCompany>>([]),
-    selectedCompany: new BehaviorSubject<IdbCompany>(getNewIdbCompany(''))
-  };
-  let facilityIdbService: Partial<FacilityIdbService> = {
-    facilities: new BehaviorSubject<Array<IdbFacility>>([]),
-    selectedFacility: new BehaviorSubject<IdbFacility>(getNewIdbFacility('', ''))
-  };
-
-  let onSiteVisitIdbService: Partial<OnSiteVisitIdbService> = {
-    selectedVisit: new BehaviorSubject<IdbOnSiteVisit>(getNewIdbOnSiteVisit('', '', ''))
-  };
-
-  let contactIdbService: Partial<ContactIdbService> = {
-    contacts: new BehaviorSubject<Array<IdbContact>>([])
-  };
-
-  let localStorageDataService: Partial<LocalStorageDataService> = {};
-  let cd: Partial<ChangeDetectorRef> = {};
-  let bootstrapService: Partial<BootstrapService> = {};
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [FontAwesomeModule, FormsModule, SharedCompanyFormsModule],
-      declarations: [CompanyContactsSetupComponent, CompanyContactsSetupFormComponent],
-      providers: [
-        { provide: UserIdbService, useValue: userIdbService },
-        { provide: CompanyIdbService, useValue: companyIdbService },
-        { provide: FacilityIdbService, useValue: facilityIdbService },
-        { provide: OnSiteVisitIdbService, useValue: onSiteVisitIdbService },
-        { provide: ContactIdbService, useValue: contactIdbService },
-        { provide: LocalStorageDataService, useValue: localStorageDataService },
-        { provide: ChangeDetectorRef, useValue: cd },
-        { provide: BootstrapService, useValue: bootstrapService }
-      ]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(CompanyContactsSetupComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup.component.ts b/src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup.component.ts
deleted file mode 100644
index 3e69963e..00000000
--- a/src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup.component.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { IconDefinition, faAddressBook, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
-import { IdbContact } from 'src/app/models/contact';
-import { IdbCompany } from 'src/app/models/company';
-import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
-import { ContactIdbService } from 'src/app/indexed-db/contact-idb.service';
-import { Observable, Subscription, of } from 'rxjs';
-import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
-import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
-import * as _ from 'lodash';
-import { CompanyContactsFormService } from '../../../shared/shared-company-forms/company-contacts-form/company-contacts-form.service';
-import { FormGroup } from '@angular/forms';
-
-@Component({
-  selector: 'app-company-contacts-setup',
-  templateUrl: './company-contacts-setup.component.html',
-  styleUrl: './company-contacts-setup.component.css'
-})
-export class CompanyContactsSetupComponent implements OnInit, OnDestroy {
-
-  allContacts: Array<IdbContact>;
-  contactsSub: Subscription;
-  routeGuardWarningModal: boolean = false;
-
-  selectedCompany: IdbCompany;
-  selectedCompanySub: Subscription;
-
-  faChevronRight: IconDefinition = faChevronRight;
-  faChevronLeft: IconDefinition = faChevronLeft;
-  faAddressBook: IconDefinition = faAddressBook;
-
-  hasInvalidContacts: boolean;
-  constructor(private router: Router,
-    private companyIdbService: CompanyIdbService,
-    private contactIdbService: ContactIdbService,
-    private onSiteVisitIdbService: OnSiteVisitIdbService,
-    private companyContactsFormService: CompanyContactsFormService
-  ) {
-  }
-
-  ngOnInit() {
-    this.selectedCompanySub = this.companyIdbService.selectedCompany.subscribe(_company => {
-      this.selectedCompany = _company;
-      this.setHasInvalidContacts();
-    });
-
-    this.contactsSub = this.contactIdbService.contacts.subscribe(_contacts => {
-      this.allContacts = _contacts;
-      this.setHasInvalidContacts();
-    });
-  }
-
-  canDeactivate(): Observable<boolean> {
-    if (this.hasInvalidContacts) {
-      this.displayWarningModal();
-      return of(false);
-    }
-    return of(true);
-  }
-
-  ngOnDestroy() {
-    if (this.selectedCompanySub) {
-      this.selectedCompanySub.unsubscribe();
-    }
-    if (this.contactsSub) {
-      this.contactsSub.unsubscribe();
-    }
-  }
-
-  goBack() {
-    let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
-    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/company-setup');
-  }
-
-  goToKPIs() {
-    let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
-    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/facility-setup');
-  }
-
-  setHasInvalidContacts() {
-    if (this.selectedCompany && this.allContacts) {
-      let companyContacts: Array<IdbContact> = this.allContacts.filter(contact => {
-        return contact.companyId == this.selectedCompany.guid;
-      });
-      let hasInvalidContacts: boolean = false;
-      companyContacts.forEach(contact => {
-        let contactForm: FormGroup = this.companyContactsFormService.getFormFromIdbContact(contact);
-        if (contactForm.invalid) {
-          for (const name of Object.keys(contactForm.controls)) {
-            const control = contactForm.get(name);
-            if (control && control.errors?.['required']) {
-              hasInvalidContacts = true;
-              break;
-            }
-          }
-        }
-      });
-      this.hasInvalidContacts = hasInvalidContacts;
-    }
-  }
-  displayWarningModal() {
-    this.routeGuardWarningModal = true;
-  }
-  closeWarningModal() {
-    this.routeGuardWarningModal = false;
-  }
-}
diff --git a/src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup-form/company-contacts-setup-form.component.css b/src/app/setup-wizard/pre-visit/company-contacts/company-contact-details-form/company-contact-details-form.component.css
similarity index 100%
rename from src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup-form/company-contacts-setup-form.component.css
rename to src/app/setup-wizard/pre-visit/company-contacts/company-contact-details-form/company-contact-details-form.component.css
diff --git a/src/app/setup-wizard/pre-visit/company-contacts/company-contact-details-form/company-contact-details-form.component.html b/src/app/setup-wizard/pre-visit/company-contacts/company-contact-details-form/company-contact-details-form.component.html
new file mode 100644
index 00000000..4aa0cfd9
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/company-contacts/company-contact-details-form/company-contact-details-form.component.html
@@ -0,0 +1,48 @@
+<div class="setup-wizard-content">
+    <div class="row g-0 justify-content-center h-100 w-100 overflow-scroll">
+        <div class="col-10 pt-4 pb-4">
+            <div class="form-paper shadow">
+                <h5>
+                    <fa-icon [icon]="faUser"></fa-icon>
+                    {{contact | contactNameDisplay}}
+                </h5>
+                <hr>
+                <app-company-contacts-form [contactGuid]="undefined"></app-company-contacts-form>
+            </div>
+        </div>
+    </div>
+</div>
+<nav class="setup-wizard-footer navbar shadow">
+    <div class="container-fluid justify-content-between">
+        <button class="btn nav-btn btn-sm" (click)="goBack()">
+            <fa-icon [icon]="faChevronLeft"></fa-icon>
+            <ng-template [ngIf]="contactIndex != 0" [ngIfElse]="listLabelBlock">
+                Next Stakeholder
+            </ng-template>
+            <ng-template #listLabelBlock>
+                Stakeholder List
+            </ng-template>
+        </button>
+        <button class="btn nav-btn btn-sm" (click)="next()">
+            <ng-template [ngIf]="contactIndex < (companyContacts.length-1)" [ngIfElse]="facilityDetailsBlock">
+                Next Stakeholder
+            </ng-template>
+            <ng-template #facilityDetailsBlock>
+                Facility Details
+            </ng-template>
+            <fa-icon [icon]="faChevronRight"></fa-icon>
+        </button>
+    </div>
+</nav>
+
+<div [ngClass]="{'window-overlay': routeGuardWarningModal}"></div>
+<div class="popup" [ngClass]="{'open': routeGuardWarningModal }">
+    <div class="popup-body">
+        <div class="alert alert-danger">
+            Please fill the required fields.
+        </div>
+    </div>
+    <div class="popup-footer d-flex justify-content-end">
+        <button class="btn btn-secondary me-2" (click)="closeWarningModal()">OK</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup-form/company-contacts-setup-form.component.spec.ts b/src/app/setup-wizard/pre-visit/company-contacts/company-contact-details-form/company-contact-details-form.component.spec.ts
similarity index 60%
rename from src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup-form/company-contacts-setup-form.component.spec.ts
rename to src/app/setup-wizard/pre-visit/company-contacts/company-contact-details-form/company-contact-details-form.component.spec.ts
index 7e58d5c0..a62c1652 100644
--- a/src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup-form/company-contacts-setup-form.component.spec.ts
+++ b/src/app/setup-wizard/pre-visit/company-contacts/company-contact-details-form/company-contact-details-form.component.spec.ts
@@ -1,24 +1,24 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CompanyContactsSetupFormComponent } from './company-contacts-setup-form.component';
-import { SharedCompanyFormsModule } from 'src/app/shared/shared-company-forms/shared-company-forms.module';
+import { CompanyContactDetailsFormComponent } from './company-contact-details-form.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { SharedCompanyFormsModule } from 'src/app/shared/shared-company-forms/shared-company-forms.module';
 import { stubServiceProviders } from 'src/app/spec-helpers/spec-test-service-stub';
 import { HelperPipesModule } from 'src/app/shared/helper-pipes/_helper-pipes.module';
 
-describe('CompanyContactsSetupFormComponent', () => {
-  let component: CompanyContactsSetupFormComponent;
-  let fixture: ComponentFixture<CompanyContactsSetupFormComponent>;
+describe('CompanyContactDetailsFormComponent', () => {
+  let component: CompanyContactDetailsFormComponent;
+  let fixture: ComponentFixture<CompanyContactDetailsFormComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [SharedCompanyFormsModule, FontAwesomeModule, HelperPipesModule],
-      declarations: [CompanyContactsSetupFormComponent],
+      imports: [FontAwesomeModule, SharedCompanyFormsModule, HelperPipesModule],
+      declarations: [CompanyContactDetailsFormComponent],
       providers: stubServiceProviders
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(CompanyContactsSetupFormComponent);
+    fixture = TestBed.createComponent(CompanyContactDetailsFormComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/setup-wizard/pre-visit/company-contacts/company-contact-details-form/company-contact-details-form.component.ts b/src/app/setup-wizard/pre-visit/company-contacts/company-contact-details-form/company-contact-details-form.component.ts
new file mode 100644
index 00000000..d517c6e5
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/company-contacts/company-contact-details-form/company-contact-details-form.component.ts
@@ -0,0 +1,128 @@
+import { Component } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { faChevronLeft, faChevronRight, faUser, IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { firstValueFrom, Observable, of, Subscription } from 'rxjs';
+import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
+import { ContactIdbService } from 'src/app/indexed-db/contact-idb.service';
+import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
+import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
+import { IdbCompany } from 'src/app/models/company';
+import { IdbContact } from 'src/app/models/contact';
+import { IdbFacility } from 'src/app/models/facility';
+import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
+import { CompanyContactsFormService } from 'src/app/shared/shared-company-forms/company-contacts-form/company-contacts-form.service';
+
+@Component({
+  selector: 'app-company-contact-details-form',
+  templateUrl: './company-contact-details-form.component.html',
+  styleUrl: './company-contact-details-form.component.css'
+})
+export class CompanyContactDetailsFormComponent {
+
+  faUser: IconDefinition = faUser;
+  faChevronRight: IconDefinition = faChevronRight;
+  faChevronLeft: IconDefinition = faChevronLeft;
+
+  contactGuid: string;
+  contact: IdbContact;
+  companyContacts: Array<IdbContact>;
+  contactsSub: Subscription;
+  contactForm: FormGroup;
+  routeGuardWarningModal: boolean = false;
+  contactIndex: number;
+
+  company: IdbCompany;
+  companySub: Subscription;
+
+  contactDeleted: boolean = false;
+  constructor(private activatedRoute: ActivatedRoute,
+    private contactIdbService: ContactIdbService,
+    private companyContactFormService: CompanyContactsFormService,
+    private router: Router,
+    private onSiteVisitIdbService: OnSiteVisitIdbService,
+    private companyIdbService: CompanyIdbService,
+    private facilityIdbService: FacilityIdbService
+  ) {
+
+  }
+
+  ngOnInit() {
+    this.companySub = this.companyIdbService.selectedCompany.subscribe(val => {
+      this.company = val;
+    });
+    this.activatedRoute.params.subscribe(params => {
+      this.contactGuid = params['id'];
+      this.setContact();
+    });
+    this.contactsSub = this.contactIdbService.contacts.subscribe(contacts => {
+      this.companyContacts = contacts.filter(c => { return c.companyId == this.company.guid });
+      this.setContact();
+    });
+  }
+
+  ngOnDestroy() {
+    this.contactsSub.unsubscribe();
+    this.companySub.unsubscribe();
+  }
+
+  setContact() {
+    if (this.companyContacts) {
+      this.contactIndex = this.companyContacts.findIndex(c => { return c.guid == this.contactGuid });
+      if (this.contactIndex != -1) {
+        this.contact = this.companyContacts[this.contactIndex];
+        this.contactForm = this.companyContactFormService.getFormFromIdbContact(this.contact);
+      } else {
+        this.contactDeleted = true;
+        let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
+        this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/company-contacts')
+      }
+    }
+  }
+
+  async next() {
+    let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
+    this.contactIndex++;
+    if (this.companyContacts[this.contactIndex]) {
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/company-contacts/' + this.companyContacts[this.contactIndex].guid);
+    } else {
+      let selectedCompany: IdbCompany = this.companyIdbService.selectedCompany.getValue();
+      if (selectedCompany.sidebarContactsOpen) {
+        selectedCompany.sidebarContactsOpen = false;
+        await this.companyIdbService.asyncUpdate(selectedCompany);
+      }
+      let facility: IdbFacility = this.facilityIdbService.getByGUID(onSiteVisit.facilityId);
+      if (!facility.sidebarOpen) {
+        facility.sidebarOpen = true;
+        await this.facilityIdbService.asyncUpdate(facility);
+      }
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/facility-setup');
+    }
+  }
+
+  goBack() {
+    let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
+    if (this.contactIndex != 0) {
+      this.contactIndex--;
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/company-contacts/' + this.companyContacts[this.contactIndex].guid);
+    } else {
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/company-contacts');
+    }
+  }
+
+  canDeactivate(): Observable<boolean> {
+    if (this.contactForm.invalid && !this.contactDeleted) {
+      this.displayWarningModal();
+      return of(false);
+    }
+    return of(true);
+  }
+
+  displayWarningModal() {
+    this.routeGuardWarningModal = true;
+  }
+
+  closeWarningModal() {
+    this.routeGuardWarningModal = false;
+  }
+}
diff --git a/src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup.component.css b/src/app/setup-wizard/pre-visit/company-contacts/manage-company-contacts/manage-company-contacts.component.css
similarity index 100%
rename from src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup.component.css
rename to src/app/setup-wizard/pre-visit/company-contacts/manage-company-contacts/manage-company-contacts.component.css
diff --git a/src/app/setup-wizard/pre-visit/company-contacts/manage-company-contacts/manage-company-contacts.component.html b/src/app/setup-wizard/pre-visit/company-contacts/manage-company-contacts/manage-company-contacts.component.html
new file mode 100644
index 00000000..0a8b3add
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/company-contacts/manage-company-contacts/manage-company-contacts.component.html
@@ -0,0 +1,83 @@
+<div class="setup-wizard-content">
+    <div class="row g-0 justify-content-center h-100 w-100 overflow-scroll">
+        <div class="col-10 pt-4 pb-4">
+            <div class="form-paper shadow">
+                <h5>
+                    <fa-icon [icon]="faAddressBook" class="me-2"></fa-icon>Stakeholder Contacts
+                </h5>
+                <hr>
+                <div class="d-flex w-100 justify-content-end pb-2">
+                    <div class="p-0">
+                        <button class="btn btn-outline-success btn-sm" (click)="addContact()">
+                            <fa-icon [icon]="faPlus"></fa-icon>
+                            Add Stakeholder
+                        </button>
+                    </div>
+                </div>
+                <ng-template [ngIf]="companyContacts.length > 0" [ngIfElse]="noContactsBlock">
+                    <table class="table table-bordered table-hover table-sm">
+                        <thead>
+                            <tr>
+                                <th class="w-25">
+                                    Name
+                                </th>
+                                <th class="w-25">
+                                    Title
+                                </th>
+                                <th class="w-25">
+                                    Team
+                                </th>
+                                <th class="w-25">
+                                    Notes
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let contact of companyContacts">
+                                <td>
+                                    <a class="click-link" (click)="goToContact(contact)">
+                                        {{contact | contactNameDisplay}}
+                                    </a>
+                                </td>
+                                <td>
+                                    <app-single-cell-item [strValue]="contact.role"></app-single-cell-item>
+                                </td>
+                                <td>
+                                    <app-single-cell-item [strValue]="contact.team"></app-single-cell-item>
+                                </td>
+                                <td>
+                                    <app-single-cell-item [strValue]="contact.notes"></app-single-cell-item>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </ng-template>
+                <ng-template #noContactsBlock>
+                    <div class="alert alert-warning">
+                        No stakeholder contacts added for this company. Click "<fa-icon [icon]="faPlus"></fa-icon> Add
+                        Stakeholder"
+                        to add a contact to this company.
+                    </div>
+                </ng-template>
+            </div>
+        </div>
+    </div>
+</div>
+<nav class="setup-wizard-footer navbar shadow">
+    <div class="container-fluid justify-content-between">
+        <button class="btn nav-btn btn-sm" (click)="goBack()">
+            <fa-icon [icon]="faChevronLeft"></fa-icon>
+            Go Back
+        </button>
+
+        <button class="btn nav-btn btn-sm" (click)="next()">
+            <ng-template [ngIf]="companyContacts.length != 0" [ngIfElse]="facilityDetailsBlock">
+                Stakeholder Details
+            </ng-template>
+            <ng-template #facilityDetailsBlock>
+                Facility Details
+            </ng-template>
+            <fa-icon [icon]="faChevronRight"></fa-icon>
+        </button>
+    </div>
+</nav>
\ No newline at end of file
diff --git a/src/app/setup-wizard/pre-visit/company-contacts/manage-company-contacts/manage-company-contacts.component.spec.ts b/src/app/setup-wizard/pre-visit/company-contacts/manage-company-contacts/manage-company-contacts.component.spec.ts
new file mode 100644
index 00000000..0ac8e7f1
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/company-contacts/manage-company-contacts/manage-company-contacts.component.spec.ts
@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ManageCompanyContactsComponent } from './manage-company-contacts.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { TableEntriesModule } from 'src/app/shared/table-entries/table-entries.module';
+import { HelperPipesModule } from 'src/app/shared/helper-pipes/_helper-pipes.module';
+import { stubServiceProviders } from 'src/app/spec-helpers/spec-test-service-stub';
+
+describe('ManageCompanyContactsComponent', () => {
+  let component: ManageCompanyContactsComponent;
+  let fixture: ComponentFixture<ManageCompanyContactsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FontAwesomeModule, TableEntriesModule, HelperPipesModule],
+      declarations: [ManageCompanyContactsComponent],
+      providers: stubServiceProviders
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ManageCompanyContactsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/setup-wizard/pre-visit/company-contacts/manage-company-contacts/manage-company-contacts.component.ts b/src/app/setup-wizard/pre-visit/company-contacts/manage-company-contacts/manage-company-contacts.component.ts
new file mode 100644
index 00000000..28781832
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/company-contacts/manage-company-contacts/manage-company-contacts.component.ts
@@ -0,0 +1,100 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IconDefinition, faAddressBook, faChevronLeft, faChevronRight, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { getNewIdbContact, IdbContact } from 'src/app/models/contact';
+import { IdbCompany } from 'src/app/models/company';
+import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
+import { ContactIdbService } from 'src/app/indexed-db/contact-idb.service';
+import { Observable, Subscription, firstValueFrom, of } from 'rxjs';
+import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
+import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
+import * as _ from 'lodash';
+
+import { FormGroup } from '@angular/forms';
+import { CompanyContactsFormService } from 'src/app/shared/shared-company-forms/company-contacts-form/company-contacts-form.service';
+
+@Component({
+  selector: 'app-manage-company-contacts',
+  templateUrl: './manage-company-contacts.component.html',
+  styleUrl: './manage-company-contacts.component.css'
+})
+export class ManageCompanyContactsComponent {
+  companyContacts: Array<IdbContact>;
+  contactsSub: Subscription;
+  routeGuardWarningModal: boolean = false;
+
+  selectedCompany: IdbCompany;
+  selectedCompanySub: Subscription;
+
+  faChevronRight: IconDefinition = faChevronRight;
+  faChevronLeft: IconDefinition = faChevronLeft;
+  faAddressBook: IconDefinition = faAddressBook;
+  faPlus: IconDefinition = faPlus;
+
+  hasInvalidContacts: boolean;
+
+  onSiteVisit: IdbOnSiteVisit;
+  onSiteVisitSub: Subscription;
+  constructor(private router: Router,
+    private companyIdbService: CompanyIdbService,
+    private contactIdbService: ContactIdbService,
+    private onSiteVisitIdbService: OnSiteVisitIdbService
+  ) {
+  }
+
+  ngOnInit() {
+    this.selectedCompanySub = this.companyIdbService.selectedCompany.subscribe(_company => {
+      this.selectedCompany = _company;
+    });
+
+    this.contactsSub = this.contactIdbService.contacts.subscribe(_contacts => {
+      this.companyContacts = _contacts.filter(c => { return c.companyId == this.selectedCompany.guid });
+    });
+    this.onSiteVisitSub = this.onSiteVisitIdbService.selectedVisit.subscribe(visit => {
+      this.onSiteVisit = visit;
+    })
+  }
+
+  ngOnDestroy() {
+    if (this.selectedCompanySub) {
+      this.selectedCompanySub.unsubscribe();
+    }
+    if (this.contactsSub) {
+      this.contactsSub.unsubscribe();
+    }
+    this.onSiteVisitSub.unsubscribe();
+  }
+
+  async goBack() {
+    if(this.selectedCompany.sidebarContactsOpen){
+      this.selectedCompany.sidebarContactsOpen = false;
+      await this.companyIdbService.asyncUpdate(this.selectedCompany);
+    }
+    this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/company-setup');
+  }
+
+   async next() {
+    if (this.companyContacts.length == 0) {
+      if(this.selectedCompany.sidebarContactsOpen){
+        this.selectedCompany.sidebarContactsOpen = false;
+        this.selectedCompany.sidebarOpen = false;
+        await this.companyIdbService.asyncUpdate(this.selectedCompany);
+      }
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/facility-setup');
+    } else {
+      this.goToContact(this.companyContacts[0]);
+    }
+  }
+
+
+  async addContact() {
+    let newContact: IdbContact = getNewIdbContact(this.selectedCompany.userId, this.selectedCompany.guid);
+    await firstValueFrom(this.contactIdbService.addWithObservable(newContact))
+    await this.contactIdbService.setContacts();
+    this.goToContact(newContact);
+  }
+
+  goToContact(contact: IdbContact) {
+    this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/company-contacts/' + contact.guid)
+  }
+}
diff --git a/src/app/setup-wizard/pre-visit/company-setup/company-setup.component.spec.ts b/src/app/setup-wizard/pre-visit/company-setup/company-setup.component.spec.ts
index 7b4429ee..69dca3db 100644
--- a/src/app/setup-wizard/pre-visit/company-setup/company-setup.component.spec.ts
+++ b/src/app/setup-wizard/pre-visit/company-setup/company-setup.component.spec.ts
@@ -15,11 +15,11 @@ import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
 import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
 import { IdbOnSiteVisit, getNewIdbOnSiteVisit } from 'src/app/models/onSiteVisit';
 import { LabelWithTooltipModule } from 'src/app/shared/label-with-tooltip/label-with-tooltip.module';
-import { PreAssessmentSetupService } from '../pre-assessment-setup/pre-assessment-setup.service';
 import { AssessmentIdbService } from 'src/app/indexed-db/assessment-idb.service';
 import { EnergyOpportunityIdbService } from 'src/app/indexed-db/energy-opportunity-idb.service';
 import { EnergyEquipmentIdbService } from 'src/app/indexed-db/energy-equipment-idb.service';
 import { SharedCompanyFormsModule } from 'src/app/shared/shared-company-forms/shared-company-forms.module';
+import { PreAssessmentSetupService } from '../pre-assessments/pre-assessment-setup.service';
 
 describe('CompanySetupComponent', () => {
   let component: CompanySetupComponent;
diff --git a/src/app/setup-wizard/pre-visit/company-setup/company-setup.component.ts b/src/app/setup-wizard/pre-visit/company-setup/company-setup.component.ts
index 48d58e3f..0667c8f9 100644
--- a/src/app/setup-wizard/pre-visit/company-setup/company-setup.component.ts
+++ b/src/app/setup-wizard/pre-visit/company-setup/company-setup.component.ts
@@ -3,7 +3,7 @@ import { Router } from '@angular/router';
 import { IdbCompany } from 'src/app/models/company';
 import { IconDefinition, faBuilding, faChevronRight, faCircleExclamation } from '@fortawesome/free-solid-svg-icons';
 import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
-import { Observable, Subscription, filter, of } from 'rxjs';
+import { Observable, Subscription, filter, firstValueFrom, of } from 'rxjs';
 import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
 import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
 import { FormControl, Validators } from '@angular/forms';
@@ -54,7 +54,9 @@ export class CompanySetupComponent implements OnInit, OnDestroy {
     this.selectedCompanySub.unsubscribe();
   }
 
-  goToContacts() {
+  async goToContacts() {
+    this.selectedCompany.sidebarContactsOpen = true;
+    await this.companyIdbService.asyncUpdate(this.selectedCompany);
     let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
     this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/company-contacts');
   }
diff --git a/src/app/setup-wizard/pre-visit/facility-energy-equipment-setup/facility-energy-equipment-setup.component.html b/src/app/setup-wizard/pre-visit/facility-energy-equipment-setup/facility-energy-equipment-setup.component.html
deleted file mode 100644
index 2dc56802..00000000
--- a/src/app/setup-wizard/pre-visit/facility-energy-equipment-setup/facility-energy-equipment-setup.component.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<div class="setup-wizard-content">
-    <div class="row g-0 justify-content-center h-100 w-100 overflow-scroll">
-        <div class="col-10 pt-4 pb-4">
-            <div class="form-paper shadow">
-                <h5>
-                    <fa-icon [icon]="faList"></fa-icon>
-                    Industrial System Inventory
-                </h5>
-                <hr>
-                <div class="d-flex w-100 justify-content-end pb-2">
-                    <div class="p-0">
-                        <button class="btn btn-outline-success btn-sm" (click)="addEquipment()">
-                            <fa-icon [icon]="faPlus" class="pe-1"></fa-icon>
-                            Add Equipment
-                        </button>
-                    </div>
-                </div>
-                <ng-template [ngIf]="energyEquipmentGuids.length != 0" [ngIfElse]="noEnergyEquipmentBlock">
-                    <div class="accordion" id="equipmentAccordion">
-                        <div class="accordion-item"
-                            *ngFor="let energyEquipmentGuid of energyEquipmentGuids; let last = last;">
-                            <h2 class="accordion-header">
-                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
-                                    [attr.data-bs-target]="'#'+energyEquipmentGuid" aria-expanded="true"
-                                    [attr.aria-controls]="energyEquipmentGuid"
-                                    [ngClass]="{'collapsed': accordionGuid != energyEquipmentGuid}"
-                                    (click)="toggleBS(energyEquipmentGuid)">
-                                    <fa-icon [icon]="energyEquipmentGuid | equipmentTypeIcon: energyEquipments"
-                                        class="pe-1"></fa-icon>
-                                    {{energyEquipmentGuid | energyEquipmentDisplay: energyEquipments}}
-                                </button>
-                            </h2>
-                            <div [id]="'#'+energyEquipmentGuid" class="accordion-collapse collapse"
-                                data-bs-parent="#equipmentAccordion">
-                                <div class="accordion-body">
-                                    <app-energy-equipment-form [energyEquipmentGuid]="energyEquipmentGuid"
-                                        (emitInitialized)="childFormInitialized(energyEquipmentGuid, last)"></app-energy-equipment-form>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </ng-template>
-                <ng-template #noEnergyEquipmentBlock>
-                    <div class="alert alert-info text-center">
-                        Empty Inventory. Click "Add Equipment" to the industrial system inventory.
-                    </div>
-                </ng-template>
-            </div>
-        </div>
-    </div>
-</div>
-<nav class="setup-wizard-footer navbar shadow">
-    <div class="container-fluid justify-content-between">
-        <button class="btn nav-btn btn-sm" (click)="goBack()">
-            <fa-icon [icon]="faChevronLeft"></fa-icon>
-            Go Back
-        </button>
-        <button class="btn nav-btn btn-sm" (click)="goToNext()">
-            End Use Inventory
-            <fa-icon [icon]="faChevronRight"></fa-icon>
-        </button>
-    </div>
-</nav>
\ No newline at end of file
diff --git a/src/app/setup-wizard/pre-visit/facility-energy-equipment-setup/facility-energy-equipment-setup.component.spec.ts b/src/app/setup-wizard/pre-visit/facility-energy-equipment-setup/facility-energy-equipment-setup.component.spec.ts
deleted file mode 100644
index b881f0a1..00000000
--- a/src/app/setup-wizard/pre-visit/facility-energy-equipment-setup/facility-energy-equipment-setup.component.spec.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FacilityEnergyEquipmentSetupComponent } from './facility-energy-equipment-setup.component';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { IdbCompany, getNewIdbCompany } from 'src/app/models/company';
-import { IdbFacility, getNewIdbFacility } from 'src/app/models/facility';
-import { BehaviorSubject } from 'rxjs';
-import { UserIdbService } from 'src/app/indexed-db/user-idb.service';
-import { IdbUser, getNewIdbUser } from 'src/app/models/user';
-import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
-import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
-import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
-import { IdbOnSiteVisit, getNewIdbOnSiteVisit } from 'src/app/models/onSiteVisit';
-import { ContactIdbService } from 'src/app/indexed-db/contact-idb.service';
-import { IdbContact } from 'src/app/models/contact';
-import { EnergyEquipmentIdbService } from 'src/app/indexed-db/energy-equipment-idb.service';
-import { IdbEnergyEquipment } from 'src/app/models/energyEquipment';
-import { LocalStorageDataService } from 'src/app/shared/shared-services/local-storage-data.service';
-import { ChangeDetectorRef } from '@angular/core';
-import { BootstrapService } from 'src/app/shared/shared-services/bootstrap.service';
-
-describe('FacilityEnergyEquipmentSetupComponent', () => {
-  let component: FacilityEnergyEquipmentSetupComponent;
-  let fixture: ComponentFixture<FacilityEnergyEquipmentSetupComponent>;
-  let userIdbService: Partial<UserIdbService> = {
-    user: new BehaviorSubject<IdbUser>(getNewIdbUser())
-  }
-  let companyIdbService: Partial<CompanyIdbService> = {
-    companies: new BehaviorSubject<Array<IdbCompany>>([]),
-    selectedCompany: new BehaviorSubject<IdbCompany>(getNewIdbCompany(''))
-  };
-  let facilityIdbService: Partial<FacilityIdbService> = {
-    facilities: new BehaviorSubject<Array<IdbFacility>>([]),
-    selectedFacility: new BehaviorSubject<IdbFacility>(getNewIdbFacility('', ''))
-  };
-  let onSiteVisitIdbService: Partial<OnSiteVisitIdbService> = {
-    selectedVisit: new BehaviorSubject<IdbOnSiteVisit>(getNewIdbOnSiteVisit('', '', ''))
-  };
-  let contactIdbService: Partial<ContactIdbService> = {
-    contacts: new BehaviorSubject<Array<IdbContact>>([])
-  };
-  let energyEquipmentIdbService: Partial<EnergyEquipmentIdbService> = {
-    energyEquipments: new BehaviorSubject<Array<IdbEnergyEquipment>>([])
-  }
-  let localStorageDataService: Partial<LocalStorageDataService> = {};
-  let cd: Partial<ChangeDetectorRef> = {};
-  let bootstrapService: Partial<BootstrapService> = {};
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [FontAwesomeModule],
-      declarations: [FacilityEnergyEquipmentSetupComponent],
-      providers: [
-        { provide: UserIdbService, useValue: userIdbService },
-        { provide: CompanyIdbService, useValue: companyIdbService },
-        { provide: FacilityIdbService, useValue: facilityIdbService },
-        { provide: OnSiteVisitIdbService, useValue: onSiteVisitIdbService },
-        { provide: ContactIdbService, useValue: contactIdbService },
-        { provide: EnergyEquipmentIdbService, useValue: energyEquipmentIdbService },
-        { provide: LocalStorageDataService, useValue: localStorageDataService },
-        { provide: ChangeDetectorRef, useValue: cd },
-        { provide: BootstrapService, useValue: bootstrapService }
-      ]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(FacilityEnergyEquipmentSetupComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/setup-wizard/pre-visit/facility-energy-equipment-setup/facility-energy-equipment-setup.component.ts b/src/app/setup-wizard/pre-visit/facility-energy-equipment-setup/facility-energy-equipment-setup.component.ts
deleted file mode 100644
index 09c50ded..00000000
--- a/src/app/setup-wizard/pre-visit/facility-energy-equipment-setup/facility-energy-equipment-setup.component.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import { ChangeDetectorRef, Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { faChevronLeft, faChevronRight, faList, faPlus, IconDefinition } from '@fortawesome/free-solid-svg-icons';
-import { firstValueFrom, Subscription } from 'rxjs';
-import { EnergyEquipmentIdbService } from 'src/app/indexed-db/energy-equipment-idb.service';
-import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
-import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
-import { getNewIdbEnergyEquipment, IdbEnergyEquipment } from 'src/app/models/energyEquipment';
-import { IdbFacility } from 'src/app/models/facility';
-import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
-import * as _ from 'lodash';
-import { BootstrapService } from 'src/app/shared/shared-services/bootstrap.service';
-import { LocalStorageDataService } from 'src/app/shared/shared-services/local-storage-data.service';
-
-@Component({
-  selector: 'app-facility-energy-equipment-setup',
-  templateUrl: './facility-energy-equipment-setup.component.html',
-  styleUrl: './facility-energy-equipment-setup.component.css'
-})
-export class FacilityEnergyEquipmentSetupComponent {
-
-  faChevronRight: IconDefinition = faChevronRight;
-  faChevronLeft: IconDefinition = faChevronLeft;
-  faPlus: IconDefinition = faPlus;
-  faList: IconDefinition = faList;
-  facility: IdbFacility;
-  
-  energyEquipmentsSub: Subscription
-  energyEquipments: Array<IdbEnergyEquipment>;
-  energyEquipmentGuids: Array<string> = [];
-  accordionGuid: string;
-  isAddNew: boolean = false;
-  constructor(private facilityIdbService: FacilityIdbService, private router: Router,
-    private onSiteVisitIdbService: OnSiteVisitIdbService,
-    private energyEquipmentIdbService: EnergyEquipmentIdbService,
-    private bootstrapService: BootstrapService,
-    private localStorageDataService: LocalStorageDataService,
-    private cd: ChangeDetectorRef
-  ) {
-
-  }
-
-  ngOnInit() {
-    this.facility = this.facilityIdbService.selectedFacility.getValue();
-    if (!this.facility) {
-      this.router.navigateByUrl('/welcome')
-    }
-
-    this.energyEquipmentsSub = this.energyEquipmentIdbService.energyEquipments.subscribe(_energyEquipments => {
-      this.energyEquipments = _energyEquipments;
-      this.setEnergyEquipmentGuids();
-    });
-  }
-
-  ngOnDestroy() {
-    this.energyEquipmentsSub.unsubscribe();
-  }
-
-  ngAfterViewInit() {
-    //open the accordion for last viewed neb
-    let lastEquipmentGuid: string = this.localStorageDataService.energyEquipmentAccordionGuid;
-    if (lastEquipmentGuid && this.energyEquipmentGuids.includes(lastEquipmentGuid)) {
-      this.toggleBS(lastEquipmentGuid);
-      this.cd.detectChanges();
-    }
-  }
-
-  async addEquipment() {
-    this.isAddNew = true;
-    let newEnergyEquipment: IdbEnergyEquipment = getNewIdbEnergyEquipment(
-      this.facility.userId,
-      this.facility.companyId,
-      this.facility.guid,
-      this.facility.unitSettings);
-    await firstValueFrom(this.energyEquipmentIdbService.addWithObservable(newEnergyEquipment));
-    await this.energyEquipmentIdbService.setEnergyEquipments();
-  }
-
-  goBack() {
-    let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
-    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/kpi-select');
-  }
-
-  goToNext() {
-    let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
-    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/end-uses');
-  }
-
-  setEnergyEquipmentGuids() {
-    // only want to update neb list if changes made
-    // otherwise forms get re-init when the list updates
-    if (this.facility && this.energyEquipments) {
-      let facilityEnergyEquipments: Array<IdbEnergyEquipment> = this.energyEquipments.filter(energyEquipment => {
-        return energyEquipment.facilityId == this.facility.guid
-      });
-      let tmpEquipmentGuids: Array<string> = facilityEnergyEquipments.map(neb => {
-        return neb.guid
-      });
-      if (tmpEquipmentGuids.length != this.energyEquipmentGuids.length) {
-        this.energyEquipmentGuids = tmpEquipmentGuids;
-      } else {
-        let xor: Array<string> = _.xor(this.energyEquipmentGuids, tmpEquipmentGuids)
-        if (xor.length != 0) {
-          this.energyEquipmentGuids = tmpEquipmentGuids;
-        }
-      }
-    } else {
-      this.energyEquipmentGuids = [];
-    }
-  }
-
-  toggleBS(equipmentGuid: string) {
-    this.bootstrapService.bsCollapse('#' + equipmentGuid);
-    if (this.accordionGuid != equipmentGuid) {
-      this.accordionGuid = equipmentGuid;
-    } else {
-      this.accordionGuid = undefined;
-    }
-    this.localStorageDataService.setEnergyEquipmentAccordionGuid(this.accordionGuid);
-  }
-
-  childFormInitialized(equipmentGuid: string, isLast: boolean) {
-    if (this.isAddNew == true && isLast) {
-      this.toggleBS(equipmentGuid);
-      this.isAddNew = false;
-      this.cd.detectChanges();
-    }
-  }
-}
diff --git a/src/app/setup-wizard/pre-visit/facility-energy-equipment-setup/facility-energy-equipment-setup.component.css b/src/app/setup-wizard/pre-visit/facility-energy-equipment/facility-energy-equipment-form/facility-energy-equipment-form.component.css
similarity index 100%
rename from src/app/setup-wizard/pre-visit/facility-energy-equipment-setup/facility-energy-equipment-setup.component.css
rename to src/app/setup-wizard/pre-visit/facility-energy-equipment/facility-energy-equipment-form/facility-energy-equipment-form.component.css
diff --git a/src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup.component.html b/src/app/setup-wizard/pre-visit/facility-energy-equipment/facility-energy-equipment-form/facility-energy-equipment-form.component.html
similarity index 62%
rename from src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup.component.html
rename to src/app/setup-wizard/pre-visit/facility-energy-equipment/facility-energy-equipment-form/facility-energy-equipment-form.component.html
index 38b91c55..dcecb21e 100644
--- a/src/app/setup-wizard/pre-visit/company-contacts-setup/company-contacts-setup.component.html
+++ b/src/app/setup-wizard/pre-visit/facility-energy-equipment/facility-energy-equipment-form/facility-energy-equipment-form.component.html
@@ -2,7 +2,12 @@
     <div class="row g-0 justify-content-center h-100 w-100 overflow-scroll">
         <div class="col-10 pt-4 pb-4">
             <div class="form-paper shadow">
-                <app-company-contacts-setup-form></app-company-contacts-setup-form>
+                <h5>
+                    <fa-icon [icon]="faCube"></fa-icon>
+                    {{equipment?.equipmentName}}
+                </h5>
+                <hr>
+                <app-energy-equipment-form [energyEquipmentGuid]="undefined"></app-energy-equipment-form>
             </div>
         </div>
     </div>
@@ -13,8 +18,13 @@
             <fa-icon [icon]="faChevronLeft"></fa-icon>
             Go Back
         </button>
-        <button class="btn nav-btn btn-sm" (click)="goToKPIs()" [disabled]="hasInvalidContacts">
-            Facility Details
+        <button class="btn nav-btn btn-sm" (click)="goToNext()">
+            <ng-template [ngIf]="(equipmentIndex != energyEquipments.length -1)" [ngIfElse]="endUseBlock">
+                Next Equipment Details
+            </ng-template>
+            <ng-template #endUseBlock>
+                End Use Inventory
+            </ng-template>
             <fa-icon [icon]="faChevronRight"></fa-icon>
         </button>
     </div>
diff --git a/src/app/setup-wizard/pre-visit/facility-energy-equipment/facility-energy-equipment-form/facility-energy-equipment-form.component.spec.ts b/src/app/setup-wizard/pre-visit/facility-energy-equipment/facility-energy-equipment-form/facility-energy-equipment-form.component.spec.ts
new file mode 100644
index 00000000..50f77a06
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/facility-energy-equipment/facility-energy-equipment-form/facility-energy-equipment-form.component.spec.ts
@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FacilityEnergyEquipmentFormComponent } from './facility-energy-equipment-form.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { stubServiceProviders } from 'src/app/spec-helpers/spec-test-service-stub';
+import { SharedFacilityFormsModule } from 'src/app/shared/shared-facility-forms/shared-facility-forms.module';
+
+describe('FacilityEnergyEquipmentFormComponent', () => {
+  let component: FacilityEnergyEquipmentFormComponent;
+  let fixture: ComponentFixture<FacilityEnergyEquipmentFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FontAwesomeModule, SharedFacilityFormsModule],
+      declarations: [FacilityEnergyEquipmentFormComponent],
+      providers: stubServiceProviders
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FacilityEnergyEquipmentFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/setup-wizard/pre-visit/facility-energy-equipment/facility-energy-equipment-form/facility-energy-equipment-form.component.ts b/src/app/setup-wizard/pre-visit/facility-energy-equipment/facility-energy-equipment-form/facility-energy-equipment-form.component.ts
new file mode 100644
index 00000000..9fba4d4d
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/facility-energy-equipment/facility-energy-equipment-form/facility-energy-equipment-form.component.ts
@@ -0,0 +1,117 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { faBox, faChevronLeft, faChevronRight, faCube, IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { Observable, of, Subscription } from 'rxjs';
+import { EnergyEquipmentIdbService } from 'src/app/indexed-db/energy-equipment-idb.service';
+import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
+import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
+import { IdbEnergyEquipment } from 'src/app/models/energyEquipment';
+import { IdbFacility } from 'src/app/models/facility';
+import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
+
+@Component({
+  selector: 'app-facility-energy-equipment-form',
+  templateUrl: './facility-energy-equipment-form.component.html',
+  styleUrl: './facility-energy-equipment-form.component.css'
+})
+export class FacilityEnergyEquipmentFormComponent {
+
+  faCube: IconDefinition = faCube;
+  faChevronLeft: IconDefinition = faChevronLeft;
+  faChevronRight: IconDefinition = faChevronRight;
+
+  equipmentGuid: string;
+  energyEquipments: Array<IdbEnergyEquipment>;
+  equipmentsSub: Subscription;
+  equipment: IdbEnergyEquipment;
+  routeGuardWarningModal: boolean = false;
+
+  facility: IdbFacility;
+  facilitySub: Subscription;
+  equipmentIndex: number;
+  constructor(private activatedRoute: ActivatedRoute,
+    private router: Router,
+    private onSiteVisitIdbService: OnSiteVisitIdbService,
+    private energyEquipmentIdbService: EnergyEquipmentIdbService,
+    private facilityIdbService: FacilityIdbService
+  ) {
+
+  }
+
+  ngOnInit() {
+    this.facilitySub = this.facilityIdbService.selectedFacility.subscribe(val => {
+      this.facility = val;
+    })
+    this.activatedRoute.params.subscribe(params => {
+      this.equipmentGuid = params['id'];
+      this.setEquipment();
+    });
+    this.equipmentsSub = this.energyEquipmentIdbService.energyEquipments.subscribe(energyEquipments => {
+      this.energyEquipments = energyEquipments.filter(eq => { return eq.facilityId == this.facility.guid });
+      this.setEquipment();
+    });
+  }
+
+  ngOnDestroy() {
+    this.equipmentsSub.unsubscribe();
+    this.facilitySub.unsubscribe();
+  }
+
+  setEquipment() {
+    if (this.energyEquipments) {
+      this.equipmentIndex = this.energyEquipments.findIndex(eq => { return eq.guid == this.equipmentGuid })
+      if (this.equipmentIndex == -1) {
+        let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
+        this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/facility-energy-equipment')
+      } else {
+        this.equipment = this.energyEquipments[this.equipmentIndex];
+      }
+    }
+  }
+
+  async goToNext() {
+    this.equipmentIndex++;
+    if (this.energyEquipments[this.equipmentIndex]) {
+      this.goToEnergyEquipment(this.energyEquipments[this.equipmentIndex]);
+    } else {
+      if (!this.facility.sidebarEndUseInventoryOpen) {
+        this.facility.sidebarEndUseInventoryOpen = true;
+        this.facility.sidebarSystemInventoryOpen = false;
+        await this.facilityIdbService.asyncUpdate(this.facility);
+      }
+      let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/facility-end-uses')
+    }
+  }
+
+  goBack() {
+    if (this.equipmentIndex != 0) {
+      this.equipmentIndex--;
+      this.goToEnergyEquipment(this.energyEquipments[this.equipmentIndex]);
+    } else {
+      let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/facility-energy-equipment');
+    }
+  }
+
+  goToEnergyEquipment(equipment: IdbEnergyEquipment) {
+    let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
+    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/facility-energy-equipment/' + equipment.guid);
+  }
+
+  canDeactivate(): Observable<boolean> {
+    if (this.equipment && !this.equipment.equipmentName) {
+      this.displayWarningModal();
+      return of(false);
+    }
+    return of(true);
+  }
+
+  displayWarningModal() {
+    this.routeGuardWarningModal = true;
+  }
+
+  closeWarningModal() {
+    this.routeGuardWarningModal = false;
+  }
+}
diff --git a/src/app/setup-wizard/pre-visit/facility-energy-equipment-setup/facility-energy-equipment-setup.service.spec.ts b/src/app/setup-wizard/pre-visit/facility-energy-equipment/facility-energy-equipment-setup.service.spec.ts
similarity index 100%
rename from src/app/setup-wizard/pre-visit/facility-energy-equipment-setup/facility-energy-equipment-setup.service.spec.ts
rename to src/app/setup-wizard/pre-visit/facility-energy-equipment/facility-energy-equipment-setup.service.spec.ts
diff --git a/src/app/setup-wizard/pre-visit/facility-energy-equipment-setup/facility-energy-equipment-setup.service.ts b/src/app/setup-wizard/pre-visit/facility-energy-equipment/facility-energy-equipment-setup.service.ts
similarity index 100%
rename from src/app/setup-wizard/pre-visit/facility-energy-equipment-setup/facility-energy-equipment-setup.service.ts
rename to src/app/setup-wizard/pre-visit/facility-energy-equipment/facility-energy-equipment-setup.service.ts
diff --git a/src/app/setup-wizard/pre-visit/facility-process-equipment-setup/facility-process-equipment-setup.component.css b/src/app/setup-wizard/pre-visit/facility-energy-equipment/manage-energy-equipment/manage-energy-equipment.component.css
similarity index 100%
rename from src/app/setup-wizard/pre-visit/facility-process-equipment-setup/facility-process-equipment-setup.component.css
rename to src/app/setup-wizard/pre-visit/facility-energy-equipment/manage-energy-equipment/manage-energy-equipment.component.css
diff --git a/src/app/setup-wizard/pre-visit/facility-energy-equipment/manage-energy-equipment/manage-energy-equipment.component.html b/src/app/setup-wizard/pre-visit/facility-energy-equipment/manage-energy-equipment/manage-energy-equipment.component.html
new file mode 100644
index 00000000..ce5334fa
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/facility-energy-equipment/manage-energy-equipment/manage-energy-equipment.component.html
@@ -0,0 +1,100 @@
+<div class="setup-wizard-content">
+    <div class="row g-0 justify-content-center h-100 w-100 overflow-scroll">
+        <div class="col-10 pt-4 pb-4">
+            <div class="form-paper shadow">
+                <h5>
+                    <fa-icon [icon]="faList"></fa-icon>
+                    Industrial System Inventory
+                </h5>
+                <hr>
+                <div class="d-flex w-100 justify-content-end pb-2">
+                    <div class="p-0">
+                        <button class="btn btn-outline-success btn-sm" (click)="addEquipment()">
+                            <fa-icon [icon]="faPlus" class="pe-1"></fa-icon>
+                            Add Equipment
+                        </button>
+                    </div>
+                </div>
+                
+                <ng-template [ngIf]="energyEquipments.length != 0" [ngIfElse]="noEnergyEquipmentBlock">
+                    <table class="table table-bordered table-hover table-sm">
+                        <thead>
+                            <tr>
+                                <th>
+                                    Name
+                                </th>
+                                <th>
+                                    Industrial System
+                                </th>
+                                <th>
+                                    Utility Type
+                                </th>
+                                <th>
+                                    Energy Use<br>
+                                    <span class="fw-light small">
+                                        (<span [innerHTML]="companyEnergyUnit | unitsDisplay"></span>/yr)
+                                    </span>
+                                </th>
+                                <th>
+                                    Stakeholders
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let energyEquipment of energyEquipments">
+                                <td>
+                                    <a class="click-link" (click)="goToEnergyEquipment(energyEquipment)">
+                                        {{energyEquipment.equipmentName}}
+                                    </a>
+                                </td>
+                                <td>
+                                    <app-single-cell-item [strValue]="energyEquipment.equipmentType"></app-single-cell-item>
+                                </td>
+                                <td>
+                                    <app-single-cell-item [strValue]="energyEquipment.utilityType"></app-single-cell-item>
+                                </td>
+                                <td>
+                                    <app-single-cell-item [numValue]="energyEquipment.annualEnergyUse"
+                                        [numValueDigits]="'1.0-0'"></app-single-cell-item>
+                                </td>
+                                <td>
+                                    @let associatedContacts = energyEquipment.guid | associatedContacts:'energyEquipment': contacts;
+                                    <ng-template [ngIf]="associatedContacts.length > 0" [ngIfElse]="noContactsBlock">
+                                        <span *ngFor="let contact of associatedContacts">
+                                            {{contact | contactNameDisplay}} <br>
+                                        </span>
+                                    </ng-template>
+                                    <ng-template #noContactsBlock>
+                                        &mdash;
+                                    </ng-template>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </ng-template>
+                <ng-template #noEnergyEquipmentBlock>
+                    <div class="alert alert-info text-center">
+                        Empty Inventory. Click "Add Equipment" to the industrial system inventory.
+                    </div>
+                </ng-template>
+            </div>
+        </div>
+    </div>
+</div>
+<nav class="setup-wizard-footer navbar shadow">
+    <div class="container-fluid justify-content-between">
+        <button class="btn nav-btn btn-sm" (click)="goBack()">
+            <fa-icon [icon]="faChevronLeft"></fa-icon>
+            Go Back
+        </button>
+        <button class="btn nav-btn btn-sm" (click)="goToNext()">
+            <ng-template [ngIf]="energyEquipments.length > 0" [ngIfElse]="endUseBlock">
+                Equipment Details
+            </ng-template>
+            <ng-template #endUseBlock>
+                End Use Inventory
+            </ng-template>
+            <fa-icon [icon]="faChevronRight"></fa-icon>
+        </button>
+    </div>
+</nav>
\ No newline at end of file
diff --git a/src/app/setup-wizard/pre-visit/facility-energy-equipment/manage-energy-equipment/manage-energy-equipment.component.spec.ts b/src/app/setup-wizard/pre-visit/facility-energy-equipment/manage-energy-equipment/manage-energy-equipment.component.spec.ts
new file mode 100644
index 00000000..1b0c8937
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/facility-energy-equipment/manage-energy-equipment/manage-energy-equipment.component.spec.ts
@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ManageEnergyEquipmentComponent } from './manage-energy-equipment.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { TableEntriesModule } from 'src/app/shared/table-entries/table-entries.module';
+import { stubServiceProviders } from 'src/app/spec-helpers/spec-test-service-stub';
+import { HelperPipesModule } from 'src/app/shared/helper-pipes/_helper-pipes.module';
+
+describe('ManageEnergyEquipmentComponent', () => {
+  let component: ManageEnergyEquipmentComponent;
+  let fixture: ComponentFixture<ManageEnergyEquipmentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FontAwesomeModule, TableEntriesModule, HelperPipesModule],
+      declarations: [ManageEnergyEquipmentComponent],
+      providers: stubServiceProviders
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ManageEnergyEquipmentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/setup-wizard/pre-visit/facility-energy-equipment/manage-energy-equipment/manage-energy-equipment.component.ts b/src/app/setup-wizard/pre-visit/facility-energy-equipment/manage-energy-equipment/manage-energy-equipment.component.ts
new file mode 100644
index 00000000..1af42994
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/facility-energy-equipment/manage-energy-equipment/manage-energy-equipment.component.ts
@@ -0,0 +1,116 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { faChevronLeft, faChevronRight, faList, faPlus, IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { firstValueFrom, Subscription } from 'rxjs';
+import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
+import { ContactIdbService } from 'src/app/indexed-db/contact-idb.service';
+import { EnergyEquipmentIdbService } from 'src/app/indexed-db/energy-equipment-idb.service';
+import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
+import { KeyPerformanceIndicatorsIdbService } from 'src/app/indexed-db/key-performance-indicators-idb.service';
+import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
+import { IdbContact } from 'src/app/models/contact';
+import { getNewIdbEnergyEquipment, IdbEnergyEquipment } from 'src/app/models/energyEquipment';
+import { IdbFacility } from 'src/app/models/facility';
+import { IdbKeyPerformanceIndicator } from 'src/app/models/keyPerformanceIndicator';
+import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
+
+@Component({
+  selector: 'app-manage-energy-equipment',
+  templateUrl: './manage-energy-equipment.component.html',
+  styleUrl: './manage-energy-equipment.component.css'
+})
+export class ManageEnergyEquipmentComponent {
+
+  faChevronRight: IconDefinition = faChevronRight;
+  faChevronLeft: IconDefinition = faChevronLeft;
+  faList: IconDefinition = faList;
+  faPlus: IconDefinition = faPlus;
+
+  energyEquipments: Array<IdbEnergyEquipment>;
+  energyEquipmentSub: Subscription;
+
+  facility: IdbFacility;
+  facilitySub: Subscription;
+
+  onSiteVisitSub: Subscription;
+  onSiteVisit: IdbOnSiteVisit;
+
+  contacts: Array<IdbContact>;
+  contactsSub: Subscription;
+
+  companyEnergyUnit: string;
+  constructor(private router: Router,
+    private facilityIdbService: FacilityIdbService,
+    private onSiteVisitIdbService: OnSiteVisitIdbService,
+    private energyEquipmentIdbService: EnergyEquipmentIdbService,
+    private contactIdbService: ContactIdbService,
+    private companyIdbService: CompanyIdbService,
+    private keyPerformanceIndicatorIdbService: KeyPerformanceIndicatorsIdbService
+  ) {
+  }
+
+  ngOnInit() {
+    this.companyEnergyUnit = this.companyIdbService.selectedCompany.getValue().companyEnergyUnit;
+    this.facilitySub = this.facilityIdbService.selectedFacility.subscribe(selectedFacility => {
+      this.facility = selectedFacility;
+    });
+    this.energyEquipmentSub = this.energyEquipmentIdbService.energyEquipments.subscribe(equipments => {
+      this.energyEquipments = equipments.filter(eq => { return eq.facilityId == this.facility.guid });
+    });
+    this.onSiteVisitSub = this.onSiteVisitIdbService.selectedVisit.subscribe(visit => {
+      this.onSiteVisit = visit;
+    });
+    this.contactsSub = this.contactIdbService.contacts.subscribe(contacts => {
+      this.contacts = contacts;
+    })
+  }
+
+  ngOnDestroy() {
+    this.facilitySub.unsubscribe();
+    this.energyEquipmentSub.unsubscribe();
+    this.onSiteVisitSub.unsubscribe();
+    this.contactsSub.unsubscribe();
+  }
+
+  async addEquipment() {
+    let newEnergyEquipment: IdbEnergyEquipment = getNewIdbEnergyEquipment(
+      this.facility.userId,
+      this.facility.companyId,
+      this.facility.guid,
+      this.facility.unitSettings);
+    await firstValueFrom(this.energyEquipmentIdbService.addWithObservable(newEnergyEquipment));
+    await this.energyEquipmentIdbService.setEnergyEquipments();
+    this.goToEnergyEquipment(newEnergyEquipment);
+  }
+
+  async goBack() {
+    let keyPerformanceIndicators: Array<IdbKeyPerformanceIndicator> = this.keyPerformanceIndicatorIdbService.getByFacilityGuid(this.facility.guid);
+    if (!this.facility.sidebarKPIsOpen) {
+      this.facility.sidebarKPIsOpen = true;
+      this.facility.sidebarSystemInventoryOpen = false;
+      await this.facilityIdbService.asyncUpdate(this.facility);
+    }
+    if (keyPerformanceIndicators.length == 0) {
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/facility-kpi-select');
+    } else {
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/facility-kpi-detail/' + keyPerformanceIndicators[keyPerformanceIndicators.length - 1].guid);
+    }
+  }
+
+  async goToNext() {
+    if (this.energyEquipments.length == 0) {
+      if (!this.facility.sidebarEndUseInventoryOpen) {
+        this.facility.sidebarEndUseInventoryOpen = true;
+        this.facility.sidebarSystemInventoryOpen = false;
+        await this.facilityIdbService.asyncUpdate(this.facility);
+      }
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/facility-end-uses');
+    } else {
+      this.goToEnergyEquipment(this.energyEquipments[0]);
+    }
+  }
+
+  goToEnergyEquipment(equipment: IdbEnergyEquipment) {
+    this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/facility-energy-equipment/' + equipment.guid);
+  }
+}
diff --git a/src/app/setup-wizard/pre-visit/facility-kpi-details/facility-kpi-details.component.html b/src/app/setup-wizard/pre-visit/facility-kpi-details/facility-kpi-details.component.html
index 7beed2c4..e4c1480d 100644
--- a/src/app/setup-wizard/pre-visit/facility-kpi-details/facility-kpi-details.component.html
+++ b/src/app/setup-wizard/pre-visit/facility-kpi-details/facility-kpi-details.component.html
@@ -14,11 +14,11 @@
             Go Back
         </button>
         <button class="btn nav-btn btn-sm" (click)="goNext()">
-            <ng-template [ngIf]="indicatorIndex != (numCompanyKpis-1)" [ngIfElse]="facilityDetailsBlock">
+            <ng-template [ngIf]="indicatorIndex != (numFacilityKpis-1)" [ngIfElse]="facilityDetailsBlock">
                 Next KPI
             </ng-template>
             <ng-template #facilityDetailsBlock>
-                Facility Details
+                Industrial System Inventory
             </ng-template>
             <fa-icon [icon]="faChevronRight"></fa-icon>
         </button>
diff --git a/src/app/setup-wizard/pre-visit/facility-kpi-details/facility-kpi-details.component.spec.ts b/src/app/setup-wizard/pre-visit/facility-kpi-details/facility-kpi-details.component.spec.ts
index 07d6ce92..b7d1dacb 100644
--- a/src/app/setup-wizard/pre-visit/facility-kpi-details/facility-kpi-details.component.spec.ts
+++ b/src/app/setup-wizard/pre-visit/facility-kpi-details/facility-kpi-details.component.spec.ts
@@ -1,53 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { FacilityKpiDetailsComponent } from './facility-kpi-details.component';
-import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
-import { BehaviorSubject } from 'rxjs';
-import { IdbOnSiteVisit, getNewIdbOnSiteVisit } from 'src/app/models/onSiteVisit';
-import { KeyPerformanceIndicatorsIdbService } from 'src/app/indexed-db/key-performance-indicators-idb.service';
-import { IdbKeyPerformanceIndicator } from 'src/app/models/keyPerformanceIndicator';
-import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
-import { IdbCompany, getNewIdbCompany } from 'src/app/models/company';
-import { ContactIdbService } from 'src/app/indexed-db/contact-idb.service';
-import { IdbContact } from 'src/app/models/contact';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { FormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 import { HelperPipesModule } from 'src/app/shared/helper-pipes/_helper-pipes.module';
-import { KeyPerformanceMetricImpactsIdbService } from 'src/app/indexed-db/key-performance-metric-impacts-idb.service';
-import { IdbKeyPerformanceMetricImpact } from 'src/app/models/keyPerformanceMetricImpact';
+import { stubServiceProviders } from 'src/app/spec-helpers/spec-test-service-stub';
+import { SharedFacilityFormsModule } from 'src/app/shared/shared-facility-forms/shared-facility-forms.module';
 
 describe('FacilityKpiDetailsComponent', () => {
   let component: FacilityKpiDetailsComponent;
   let fixture: ComponentFixture<FacilityKpiDetailsComponent>;
-
-  let onSiteVisitIdbService: Partial<OnSiteVisitIdbService> = {
-    onSiteVisits: new BehaviorSubject<Array<IdbOnSiteVisit>>([]),
-    selectedVisit: new BehaviorSubject<IdbOnSiteVisit>(getNewIdbOnSiteVisit('', '', '')),
-  };
-  let keyPerformanceIndicatorIdbService: Partial<KeyPerformanceIndicatorsIdbService> = {
-    keyPerformanceIndicators: new BehaviorSubject<Array<IdbKeyPerformanceIndicator>>([])
-  };
-  let companyIdbService: Partial<CompanyIdbService> = {
-    selectedCompany: new BehaviorSubject<IdbCompany>(getNewIdbCompany(''))
-  };
-  let contactIdbService: Partial<ContactIdbService> = {
-    contacts: new BehaviorSubject<Array<IdbContact>>([])
-  };
-  let keyPerformanceMetricImpactsIdbService: Partial<KeyPerformanceMetricImpactsIdbService> = {
-    keyPerformanceMetricImpacts: new BehaviorSubject<Array<IdbKeyPerformanceMetricImpact>>([])
-  };
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [FontAwesomeModule, FormsModule, RouterTestingModule, HelperPipesModule],
+      imports: [FontAwesomeModule, FormsModule, RouterTestingModule, HelperPipesModule, SharedFacilityFormsModule],
       declarations: [FacilityKpiDetailsComponent],
-      providers: [
-        { provide: CompanyIdbService, useValue: companyIdbService },
-        { provide: OnSiteVisitIdbService, useValue: onSiteVisitIdbService },
-        { provide: ContactIdbService, useValue: contactIdbService },
-        { provide: KeyPerformanceIndicatorsIdbService, useValue: keyPerformanceIndicatorIdbService },
-        { provide: KeyPerformanceMetricImpactsIdbService, useValue: keyPerformanceMetricImpactsIdbService }
-      ]
+      providers: stubServiceProviders
     })
       .compileComponents();
 
diff --git a/src/app/setup-wizard/pre-visit/facility-kpi-details/facility-kpi-details.component.ts b/src/app/setup-wizard/pre-visit/facility-kpi-details/facility-kpi-details.component.ts
index dd7ac8b8..7d0749c3 100644
--- a/src/app/setup-wizard/pre-visit/facility-kpi-details/facility-kpi-details.component.ts
+++ b/src/app/setup-wizard/pre-visit/facility-kpi-details/facility-kpi-details.component.ts
@@ -9,6 +9,8 @@ import { IdbKeyPerformanceIndicator } from 'src/app/models/keyPerformanceIndicat
 import * as _ from 'lodash';
 import { Subscription } from 'rxjs';
 import { IdbCompany } from 'src/app/models/company';
+import { IdbFacility } from 'src/app/models/facility';
+import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
 
 @Component({
   selector: 'app-facility-kpi-details',
@@ -23,23 +25,23 @@ export class FacilityKpiDetailsComponent {
   keyPerformanceIndicator: IdbKeyPerformanceIndicator;
   faBullseye: IconDefinition = faBullseye;
 
-  companySub: Subscription;
-  company: IdbCompany;
+  facilitySub: Subscription;
+  facility: IdbFacility;
 
   indicatorIndex: number;
-  numCompanyKpis: number;
+  numFacilityKpis: number;
 
   constructor(private router: Router,
     private onSiteVisitIdbService: OnSiteVisitIdbService,
     private keyPerformanceIndicatorIdbService: KeyPerformanceIndicatorsIdbService,
     private activatedRoute: ActivatedRoute,
-    private companyIdbService: CompanyIdbService,
+    private facilityIdbService: FacilityIdbService,
   ) {
   }
 
   ngOnInit() {
-    this.companySub = this.companyIdbService.selectedCompany.subscribe(_company => {
-      this.company = _company;
+    this.facilitySub = this.facilityIdbService.selectedFacility.subscribe(facility => {
+      this.facility = facility;
     });
 
     this.activatedRoute.params.subscribe(params => {
@@ -50,50 +52,55 @@ export class FacilityKpiDetailsComponent {
   }
 
   ngOnDestroy() {
-    this.companySub.unsubscribe();
+    this.facilitySub.unsubscribe();
   }
 
-  goBack() {
+  async goBack() {
     if (this.indicatorIndex == 0) {
       let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
       this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/kpi-select');
     } else {
-      let companyKpis: Array<IdbKeyPerformanceIndicator> = this.getCompanyKPIs();
-      this.goToKPI(companyKpis[this.indicatorIndex - 1].guid);
+      let facilityKpis: Array<IdbKeyPerformanceIndicator> = this.getFacilityKPIs();
+      await this.goToKPI(facilityKpis[this.indicatorIndex - 1].guid);
     }
   }
 
-  goNext() {
-    if (this.numCompanyKpis - 1 == this.indicatorIndex) {
-      this.goToFacility();
+  async goNext() {
+    if (this.numFacilityKpis - 1 == this.indicatorIndex) {
+      await this.goToSystemInventory();
     } else {
-      let companyKpis: Array<IdbKeyPerformanceIndicator> = this.getCompanyKPIs();
-      this.goToKPI(companyKpis[this.indicatorIndex + 1].guid);
+      let facilityKpis: Array<IdbKeyPerformanceIndicator> = this.getFacilityKPIs();
+      this.goToKPI(facilityKpis[this.indicatorIndex + 1].guid);
     }
   }
 
   goToKPI(kpiGUID: string) {
     let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
-    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/kpi-detail/' + kpiGUID);
+    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/facility-kpi-detail/' + kpiGUID);
   }
 
-  goToFacility() {
+  async goToSystemInventory() {
     let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
-    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/facility-setup');
+    if (!this.facility.sidebarSystemInventoryOpen) {
+      this.facility.sidebarSystemInventoryOpen = true;
+      this.facility.sidebarKPIsOpen = false;
+      await this.facilityIdbService.asyncUpdate(this.facility);
+    }
+    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/facility-energy-equipment');
   }
 
   setIndexValues() {
-    let companyKpis: Array<IdbKeyPerformanceIndicator> = this.getCompanyKPIs();
-    this.numCompanyKpis = companyKpis.length;
-    this.indicatorIndex = companyKpis.findIndex(kpi => {
+    let facilityKpis: Array<IdbKeyPerformanceIndicator> = this.getFacilityKPIs();
+    this.numFacilityKpis = facilityKpis.length;
+    this.indicatorIndex = facilityKpis.findIndex(kpi => {
       return kpi.guid == this.keyPerformanceIndicator.guid
     });
   }
 
-  getCompanyKPIs(): Array<IdbKeyPerformanceIndicator> {
+  getFacilityKPIs(): Array<IdbKeyPerformanceIndicator> {
     let kpis: Array<IdbKeyPerformanceIndicator> = this.keyPerformanceIndicatorIdbService.keyPerformanceIndicators.getValue();
     return kpis.filter(kpi => {
-      return kpi.companyId == this.company.guid
+      return kpi.facilityId == this.facility.guid
     });
   }
 }
diff --git a/src/app/setup-wizard/pre-visit/facility-kpi-select/facility-kpi-select.component.ts b/src/app/setup-wizard/pre-visit/facility-kpi-select/facility-kpi-select.component.ts
index f8528e2b..41c54106 100644
--- a/src/app/setup-wizard/pre-visit/facility-kpi-select/facility-kpi-select.component.ts
+++ b/src/app/setup-wizard/pre-visit/facility-kpi-select/facility-kpi-select.component.ts
@@ -6,6 +6,8 @@ import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.serv
 import { KeyPerformanceIndicatorsIdbService } from 'src/app/indexed-db/key-performance-indicators-idb.service';
 import { IdbKeyPerformanceIndicator } from 'src/app/models/keyPerformanceIndicator';
 import { Subscription } from 'rxjs';
+import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
+import { IdbFacility } from 'src/app/models/facility';
 
 @Component({
   selector: 'app-facility-kpi-select',
@@ -23,6 +25,7 @@ export class FacilityKpiSelectComponent {
   constructor(private router: Router,
     private onSiteVisitIdbService: OnSiteVisitIdbService,
     private keyPerformanceIndicatorIdbService: KeyPerformanceIndicatorsIdbService,
+    private facilityIdbService: FacilityIdbService
   ) { }
 
   ngOnInit() {
@@ -38,16 +41,26 @@ export class FacilityKpiSelectComponent {
     this.facilityKpiSub.unsubscribe();
   }
 
-  goBack() {
+  async goBack() {
+    await this.collapseKpi();
     let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
     this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/facility-setup');
   }
 
-  goToKpiDetails() {
+  async goToKpiDetails() {
     if (this.facilityKpis.length > 0) {
-      this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/kpi-detail/' + this.facilityKpis[0].guid);
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/facility-kpi-detail/' + this.facilityKpis[0].guid);
     } else {
-      this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/energy-equipment');
+      await this.collapseKpi();
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/facility-energy-equipment');
+    }
+  }
+
+  async collapseKpi() {
+    let facility: IdbFacility = this.facilityIdbService.selectedFacility.getValue();
+    if (facility.sidebarKPIsOpen) {
+      facility.sidebarKPIsOpen = false;
+      await this.facilityIdbService.asyncUpdate(facility);
     }
   }
 }
diff --git a/src/app/setup-wizard/pre-visit/facility-process-equipment-setup/facility-process-equipment-setup.component.html b/src/app/setup-wizard/pre-visit/facility-process-equipment-setup/facility-process-equipment-setup.component.html
deleted file mode 100644
index c1232543..00000000
--- a/src/app/setup-wizard/pre-visit/facility-process-equipment-setup/facility-process-equipment-setup.component.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<div class="setup-wizard-content">
-    <div class="row g-0 justify-content-center h-100 w-100 overflow-scroll">
-        <div class="col-10 pt-4 pb-4">
-            <div class="form-paper shadow">
-                <h5>
-                    <fa-icon [icon]="faDiagramProject"></fa-icon> End Use Inventory
-                </h5>
-                <hr>
-                <div class="d-flex w-100 justify-content-end pb-2">
-                    <div class="p-0">
-                        <button class="btn btn-outline-success btn-sm" (click)="addEquipment()">
-                            <fa-icon [icon]="faPlus" class="pe-1"></fa-icon>
-                            Add End Use
-                        </button>
-                    </div>
-                </div>
-                <ng-template [ngIf]="processEquipmentGuids.length != 0" [ngIfElse]="noProcessEquipmentBlock">
-                    <div class="accordion" id="equipmentAccordion">
-                        <div class="accordion-item"
-                            *ngFor="let processEquipmentGuid of processEquipmentGuids; let last = last;">
-                            <h2 class="accordion-header">
-                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
-                                    [attr.data-bs-target]="'#'+processEquipmentGuid" aria-expanded="true"
-                                    [attr.aria-controls]="processEquipmentGuid"
-                                    [ngClass]="{'collapsed': accordionGuid != processEquipmentGuid}"
-                                    (click)="toggleBS(processEquipmentGuid)">
-                                    <fa-icon class="pe-1" [icon]="faSplotch"></fa-icon>
-                                    {{processEquipmentGuid | processEquipmentDisplay: processEquipments}}
-                                </button>
-                            </h2>
-                            <div [id]="'#'+processEquipmentGuid" class="accordion-collapse collapse"
-                                data-bs-parent="#equipmentAccordion">
-                                <div class="accordion-body">
-                                    <app-process-equipment-form [processEquipmentGuid]="processEquipmentGuid"
-                                        (emitInitialized)="childFormInitialized(processEquipmentGuid, last)"></app-process-equipment-form>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </ng-template>
-                <ng-template #noProcessEquipmentBlock>
-                    <div class="alert alert-info text-center">
-                        Empty end use inventory. Click "<fa-icon [icon]="faPlus"></fa-icon> Add End Use" to add end uses
-                        to the inventory.
-                    </div>
-                </ng-template>
-            </div>
-        </div>
-    </div>
-</div>
-<nav class="setup-wizard-footer navbar shadow">
-    <div class="container-fluid justify-content-between">
-        <button class="btn nav-btn btn-sm" (click)="goBack()">
-            <fa-icon [icon]="faChevronLeft"></fa-icon>
-            Go Back
-        </button>
-        <button class="btn nav-btn btn-sm" (click)="goToNext()">
-            Pre-Assessment
-            <fa-icon [icon]="faChevronRight"></fa-icon>
-        </button>
-    </div>
-</nav>
\ No newline at end of file
diff --git a/src/app/setup-wizard/pre-visit/facility-process-equipment-setup/facility-process-equipment-setup.component.spec.ts b/src/app/setup-wizard/pre-visit/facility-process-equipment-setup/facility-process-equipment-setup.component.spec.ts
deleted file mode 100644
index 1425dcfe..00000000
--- a/src/app/setup-wizard/pre-visit/facility-process-equipment-setup/facility-process-equipment-setup.component.spec.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FacilityProcessEquipmentSetupComponent } from './facility-process-equipment-setup.component';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { IdbCompany, getNewIdbCompany } from 'src/app/models/company';
-import { IdbFacility, getNewIdbFacility } from 'src/app/models/facility';
-import { BehaviorSubject } from 'rxjs';
-import { UserIdbService } from 'src/app/indexed-db/user-idb.service';
-import { IdbUser, getNewIdbUser } from 'src/app/models/user';
-import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
-import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
-import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
-import { IdbOnSiteVisit, getNewIdbOnSiteVisit } from 'src/app/models/onSiteVisit';
-import { ContactIdbService } from 'src/app/indexed-db/contact-idb.service';
-import { IdbContact } from 'src/app/models/contact';
-import { ProcessEquipmentIdbService } from 'src/app/indexed-db/process-equipment-idb.service';
-import { IdbProcessEquipment } from 'src/app/models/processEquipment';
-import { LocalStorageDataService } from 'src/app/shared/shared-services/local-storage-data.service';
-import { ChangeDetectorRef } from '@angular/core';
-import { BootstrapService } from 'src/app/shared/shared-services/bootstrap.service';
-
-describe('FacilityProcessEquipmentSetupComponent', () => {
-  let component: FacilityProcessEquipmentSetupComponent;
-  let fixture: ComponentFixture<FacilityProcessEquipmentSetupComponent>;
-  let userIdbService: Partial<UserIdbService> = {
-    user: new BehaviorSubject<IdbUser>(getNewIdbUser())
-  }
-  let companyIdbService: Partial<CompanyIdbService> = {
-    companies: new BehaviorSubject<Array<IdbCompany>>([]),
-    selectedCompany: new BehaviorSubject<IdbCompany>(getNewIdbCompany(''))
-  };
-  let facilityIdbService: Partial<FacilityIdbService> = {
-    facilities: new BehaviorSubject<Array<IdbFacility>>([]),
-    selectedFacility: new BehaviorSubject<IdbFacility>(getNewIdbFacility('', ''))
-  };
-  let onSiteVisitIdbService: Partial<OnSiteVisitIdbService> = {
-    selectedVisit: new BehaviorSubject<IdbOnSiteVisit>(getNewIdbOnSiteVisit('', '', ''))
-  };
-  let contactIdbService: Partial<ContactIdbService> = {
-    contacts: new BehaviorSubject<Array<IdbContact>>([])
-  };
-  let processEquipmentIdbService: Partial<ProcessEquipmentIdbService> = {
-    processEquipments: new BehaviorSubject<Array<IdbProcessEquipment>>([])
-  }
-
-  let localStorageDataService: Partial<LocalStorageDataService> = {};
-  let cd: Partial<ChangeDetectorRef> = {};
-  let bootstrapService: Partial<BootstrapService> = {};
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [FontAwesomeModule],
-      declarations: [FacilityProcessEquipmentSetupComponent],
-      providers: [
-        { provide: UserIdbService, useValue: userIdbService },
-        { provide: CompanyIdbService, useValue: companyIdbService },
-        { provide: FacilityIdbService, useValue: facilityIdbService },
-        { provide: OnSiteVisitIdbService, useValue: onSiteVisitIdbService },
-        { provide: ContactIdbService, useValue: contactIdbService },
-        { provide: ProcessEquipmentIdbService, useValue: processEquipmentIdbService },
-        { provide: LocalStorageDataService, useValue: localStorageDataService },
-        { provide: ChangeDetectorRef, useValue: cd },
-        { provide: BootstrapService, useValue: bootstrapService }
-
-      ]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(FacilityProcessEquipmentSetupComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/setup-wizard/pre-visit/facility-process-equipment-setup/facility-process-equipment-setup.component.ts b/src/app/setup-wizard/pre-visit/facility-process-equipment-setup/facility-process-equipment-setup.component.ts
deleted file mode 100644
index 25b36c62..00000000
--- a/src/app/setup-wizard/pre-visit/facility-process-equipment-setup/facility-process-equipment-setup.component.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { IconDefinition, faChevronLeft, faChevronRight, faDiagramProject, faPlus, faSplotch } from '@fortawesome/free-solid-svg-icons';
-import { IdbFacility } from 'src/app/models/facility';
-import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
-import { Subscription, firstValueFrom } from 'rxjs';
-import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
-import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
-import { getNewIdbProcessEquipment, IdbProcessEquipment } from 'src/app/models/processEquipment';
-import { ProcessEquipmentIdbService } from 'src/app/indexed-db/process-equipment-idb.service';
-import * as _ from 'lodash';
-import { BootstrapService } from 'src/app/shared/shared-services/bootstrap.service';
-import { LocalStorageDataService } from 'src/app/shared/shared-services/local-storage-data.service';
-
-@Component({
-  selector: 'app-facility-process-equipment-setup',
-  templateUrl: './facility-process-equipment-setup.component.html',
-  styleUrl: './facility-process-equipment-setup.component.css'
-})
-export class FacilityProcessEquipmentSetupComponent implements OnInit, OnDestroy {
-
-  faChevronRight: IconDefinition = faChevronRight;
-  faChevronLeft: IconDefinition = faChevronLeft;
-  faDiagramProject: IconDefinition = faDiagramProject;
-  faPlus: IconDefinition = faPlus;
-  faSplotch: IconDefinition = faSplotch;
-  facility: IdbFacility;
-  
-  processEquipmentsSub: Subscription
-  processEquipments: Array<IdbProcessEquipment>;
-  processEquipmentGuids: Array<string> = [];
-
-  accordionGuid: string;
-  isAddNew: boolean = false;
-  constructor(private facilityIdbService: FacilityIdbService, private router: Router,
-    private onSiteVisitIdbService: OnSiteVisitIdbService,
-    private processEquipmentIdbService: ProcessEquipmentIdbService,
-    private bootstrapService: BootstrapService,
-    private localStorageDataService: LocalStorageDataService,
-    private cd: ChangeDetectorRef
-  ) {
-
-  }
-
-  ngOnInit() {
-    this.facility = this.facilityIdbService.selectedFacility.getValue();
-    if (!this.facility) {
-      this.router.navigateByUrl('/welcome')
-    }
-
-    this.processEquipmentsSub = this.processEquipmentIdbService.processEquipments.subscribe(_processEquipments => {
-      this.processEquipments = _processEquipments;
-      this.setProcessEquipmentGuids();
-    });
-  }
-
-  ngOnDestroy() {
-    this.processEquipmentsSub.unsubscribe();
-  }
-
-  ngAfterViewInit() {
-    //open the accordion for last viewed neb
-    let lastEquipmentGuid: string = this.localStorageDataService.processEquipmentAccordionGuid;
-    if (lastEquipmentGuid && this.processEquipmentGuids.includes(lastEquipmentGuid)) {
-      this.toggleBS(lastEquipmentGuid);
-      this.cd.detectChanges();
-    }
-  }
-
-  async addEquipment() {
-    this.isAddNew = true;
-    let newProcessEquipment: IdbProcessEquipment = getNewIdbProcessEquipment(this.facility.userId, this.facility.companyId, this.facility.guid);
-    await firstValueFrom(this.processEquipmentIdbService.addWithObservable(newProcessEquipment));
-    await this.processEquipmentIdbService.setProcessEquipments();
-  }
-
-  goBack() {
-    let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
-    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/energy-equipment');
-  }
-
-  goToNext() {
-    let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
-    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/pre-assessment');
-  }
-
-  setProcessEquipmentGuids() {
-    // only want to update neb list if changes made
-    // otherwise forms get re-init when the list updates
-    if (this.facility && this.processEquipments) {
-      let facilityProcessEquipments: Array<IdbProcessEquipment> = this.processEquipments.filter(processEquipment => {
-        return processEquipment.facilityId == this.facility.guid
-      });
-      let tmpEquipmentGuids: Array<string> = facilityProcessEquipments.map(neb => {
-        return neb.guid
-      });
-      if (tmpEquipmentGuids.length != this.processEquipmentGuids.length) {
-        this.processEquipmentGuids = tmpEquipmentGuids;
-      } else {
-        let xor: Array<string> = _.xor(this.processEquipmentGuids, tmpEquipmentGuids)
-        if (xor.length != 0) {
-          this.processEquipmentGuids = tmpEquipmentGuids;
-        }
-      }
-    } else {
-      this.processEquipmentGuids = [];
-    }
-  }
-
-  toggleBS(equipmentGuid: string) {
-    this.bootstrapService.bsCollapse('#' + equipmentGuid);
-    if (this.accordionGuid != equipmentGuid) {
-      this.accordionGuid = equipmentGuid;
-    } else {
-      this.accordionGuid = undefined;
-    }
-    this.localStorageDataService.setProcessEquipmentAccordionGuid(this.accordionGuid);
-  }
-
-  childFormInitialized(equipmentGuid: string, isLast: boolean) {
-    if (this.isAddNew == true && isLast) {
-      this.toggleBS(equipmentGuid);
-      this.isAddNew = false;
-      this.cd.detectChanges();
-    }
-  }
-  
-}
diff --git a/src/app/setup-wizard/pre-visit/facility-process-equipment/facility-process-equipment-form/facility-process-equipment-form.component.css b/src/app/setup-wizard/pre-visit/facility-process-equipment/facility-process-equipment-form/facility-process-equipment-form.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/setup-wizard/pre-visit/facility-process-equipment/facility-process-equipment-form/facility-process-equipment-form.component.html b/src/app/setup-wizard/pre-visit/facility-process-equipment/facility-process-equipment-form/facility-process-equipment-form.component.html
new file mode 100644
index 00000000..99a13a49
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/facility-process-equipment/facility-process-equipment-form/facility-process-equipment-form.component.html
@@ -0,0 +1,42 @@
+<div class="setup-wizard-content">
+    <div class="row g-0 justify-content-center h-100 w-100 overflow-scroll">
+        <div class="col-10 pt-4 pb-4">
+            <div class="form-paper shadow">
+                <h5>
+                    <fa-icon [icon]="faSplotch"></fa-icon>
+                    {{equipment?.equipmentName}}
+                </h5>
+                <hr>
+                <app-process-equipment-form [processEquipmentGuid]="undefined"></app-process-equipment-form>
+            </div>
+        </div>
+    </div>
+</div>
+<nav class="setup-wizard-footer navbar shadow">
+    <div class="container-fluid justify-content-between">
+        <button class="btn nav-btn btn-sm" (click)="goBack()">
+            <fa-icon [icon]="faChevronLeft"></fa-icon>
+            Go Back
+        </button>
+        <button class="btn nav-btn btn-sm" (click)="goToNext()">
+            <ng-template [ngIf]="equipmentIndex != (processEquipments.length - 1)" [ngIfElse]="preAssessmentBlock">
+                Next End Use Details
+            </ng-template>
+            <ng-template #preAssessmentBlock>
+                Pre-Assessments
+            </ng-template>
+            <fa-icon [icon]="faChevronRight"></fa-icon>
+        </button>
+    </div>
+</nav>
+<div [ngClass]="{'window-overlay': routeGuardWarningModal}"></div>
+<div class="popup" [ngClass]="{'open': routeGuardWarningModal }">
+    <div class="popup-body">
+        <div class="alert alert-danger">
+            Please fill the required fields.
+        </div>
+    </div>
+    <div class="popup-footer d-flex justify-content-end">
+        <button class="btn btn-secondary me-2" (click)="closeWarningModal()">OK</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/setup-wizard/pre-visit/facility-process-equipment/facility-process-equipment-form/facility-process-equipment-form.component.spec.ts b/src/app/setup-wizard/pre-visit/facility-process-equipment/facility-process-equipment-form/facility-process-equipment-form.component.spec.ts
new file mode 100644
index 00000000..962ed4ba
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/facility-process-equipment/facility-process-equipment-form/facility-process-equipment-form.component.spec.ts
@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FacilityProcessEquipmentFormComponent } from './facility-process-equipment-form.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { SharedFacilityFormsModule } from 'src/app/shared/shared-facility-forms/shared-facility-forms.module';
+import { stubServiceProviders } from 'src/app/spec-helpers/spec-test-service-stub';
+
+describe('FacilityProcessEquipmentFormComponent', () => {
+  let component: FacilityProcessEquipmentFormComponent;
+  let fixture: ComponentFixture<FacilityProcessEquipmentFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FontAwesomeModule, SharedFacilityFormsModule],
+      declarations: [FacilityProcessEquipmentFormComponent],
+      providers: stubServiceProviders
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FacilityProcessEquipmentFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/setup-wizard/pre-visit/facility-process-equipment/facility-process-equipment-form/facility-process-equipment-form.component.ts b/src/app/setup-wizard/pre-visit/facility-process-equipment/facility-process-equipment-form/facility-process-equipment-form.component.ts
new file mode 100644
index 00000000..f6e39c3a
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/facility-process-equipment/facility-process-equipment-form/facility-process-equipment-form.component.ts
@@ -0,0 +1,117 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { faBox, faChevronLeft, faChevronRight, faSplotch, IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { Observable, of, Subscription } from 'rxjs';
+import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
+import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
+import { ProcessEquipmentIdbService } from 'src/app/indexed-db/process-equipment-idb.service';
+import { IdbFacility } from 'src/app/models/facility';
+import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
+import { IdbProcessEquipment } from 'src/app/models/processEquipment';
+
+@Component({
+  selector: 'app-facility-process-equipment-form',
+  templateUrl: './facility-process-equipment-form.component.html',
+  styleUrl: './facility-process-equipment-form.component.css'
+})
+export class FacilityProcessEquipmentFormComponent {
+
+  faChevronLeft: IconDefinition = faChevronLeft;
+  faChevronRight: IconDefinition = faChevronRight;
+  faSplotch: IconDefinition = faSplotch;
+
+  equipmentGuid: string;
+  processEquipments: Array<IdbProcessEquipment>;
+  equipmentsSub: Subscription;
+  equipment: IdbProcessEquipment;
+  routeGuardWarningModal: boolean = false;
+
+  facility: IdbFacility;
+  facilitySub: Subscription;
+  equipmentIndex: number;
+  constructor(private activatedRoute: ActivatedRoute,
+    private router: Router,
+    private onSiteVisitIdbService: OnSiteVisitIdbService,
+    private processEquipmentIdbService: ProcessEquipmentIdbService,
+    private facilityIdbService: FacilityIdbService
+  ) {
+
+  }
+
+  ngOnInit() {
+    this.facilitySub = this.facilityIdbService.selectedFacility.subscribe(val => {
+      this.facility = val;
+    });
+    this.activatedRoute.params.subscribe(params => {
+      this.equipmentGuid = params['id'];
+      this.setEquipment();
+    });
+    this.equipmentsSub = this.processEquipmentIdbService.processEquipments.subscribe(processEquipments => {
+      this.processEquipments = processEquipments.filter(eq => { return eq.facilityId == this.facility.guid });
+      this.setEquipment();
+    });
+  }
+
+  ngOnDestroy() {
+    this.equipmentsSub.unsubscribe();
+    this.facilitySub.unsubscribe();
+  }
+
+  setEquipment() {
+    if (this.processEquipments) {
+      this.equipmentIndex = this.processEquipments.findIndex(eq => { return eq.guid == this.equipmentGuid });
+      if (this.equipmentIndex == -1) {
+        let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
+        this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/facility-end-uses')
+      } else {
+        this.equipment = this.processEquipments[this.equipmentIndex];
+      }
+    }
+  }
+
+  async goToNext() {
+    this.equipmentIndex++;
+    if (this.processEquipments[this.equipmentIndex]) {
+      this.goToProcessEquipment(this.processEquipments[this.equipmentIndex])
+    } else {
+      if (!this.facility.sidebarPreAssessmentOpen) {
+        this.facility.sidebarPreAssessmentOpen = true;
+        this.facility.sidebarEndUseInventoryOpen = false;
+        await this.facilityIdbService.updateWithObservable(this.facility);
+      }
+      let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/facility-pre-assessment');
+    }
+  }
+
+  async goBack() {
+    if (this.equipmentIndex == 0) {
+      let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/facility-end-uses');
+    } else {
+      this.equipmentIndex--;
+      this.goToProcessEquipment(this.processEquipments[this.equipmentIndex])
+    }
+  }
+
+  canDeactivate(): Observable<boolean> {
+    if (this.equipment && !this.equipment.equipmentName) {
+      this.displayWarningModal();
+      return of(false);
+    }
+    return of(true);
+  }
+
+  displayWarningModal() {
+    this.routeGuardWarningModal = true;
+  }
+
+  closeWarningModal() {
+    this.routeGuardWarningModal = false;
+  }
+
+  goToProcessEquipment(equipment: IdbProcessEquipment) {
+    let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
+    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/facility-end-uses/' + equipment.guid);
+  }
+}
diff --git a/src/app/setup-wizard/pre-visit/facility-process-equipment/manage-process-equipment/manage-process-equipment.component.css b/src/app/setup-wizard/pre-visit/facility-process-equipment/manage-process-equipment/manage-process-equipment.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/setup-wizard/pre-visit/facility-process-equipment/manage-process-equipment/manage-process-equipment.component.html b/src/app/setup-wizard/pre-visit/facility-process-equipment/manage-process-equipment/manage-process-equipment.component.html
new file mode 100644
index 00000000..6afe1801
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/facility-process-equipment/manage-process-equipment/manage-process-equipment.component.html
@@ -0,0 +1,85 @@
+<div class="setup-wizard-content">
+    <div class="row g-0 justify-content-center h-100 w-100 overflow-scroll">
+        <div class="col-10 pt-4 pb-4">
+            <div class="form-paper shadow">
+                <h5>
+                    <fa-icon [icon]="faList"></fa-icon>
+                    End Use Inventory
+                </h5>
+                <hr>
+                <div class="d-flex w-100 justify-content-end pb-2">
+                    <div class="p-0">
+                        <button class="btn btn-outline-success btn-sm" (click)="addEquipment()">
+                            <fa-icon [icon]="faPlus" class="pe-1"></fa-icon>
+                            Add End Use
+                        </button>
+                    </div>
+                </div>
+
+                <ng-template [ngIf]="processEquipments.length != 0" [ngIfElse]="noEnergyEquipmentBlock">
+                    <table class="table table-bordered table-hover table-sm">
+                        <thead>
+                            <tr>
+                                <th class="w-25">
+                                    Name
+                                </th>
+                                <th class="w-50">
+                                    Notes
+                                </th>
+                                <th class="w-25">
+                                    Stakeholders
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let processEquipment of processEquipments">
+                                <td>
+                                    <a class="click-link" (click)="goToProcessEquipment(processEquipment)">
+                                        {{processEquipment.equipmentName}}
+                                    </a>
+                                </td>
+                                <td>
+                                    <app-single-cell-item [strValue]="processEquipment.notes"></app-single-cell-item>
+                                </td>
+                                <td>
+                                    @let associatedContacts = processEquipment.guid |
+                                    associatedContacts:'processEquipment': contacts;
+                                    <ng-template [ngIf]="associatedContacts.length > 0" [ngIfElse]="noContactsBlock">
+                                        <span *ngFor="let contact of associatedContacts">
+                                            {{contact | contactNameDisplay}} <br>
+                                        </span>
+                                    </ng-template>
+                                    <ng-template #noContactsBlock>
+                                        &mdash;
+                                    </ng-template>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </ng-template>
+                <ng-template #noEnergyEquipmentBlock>
+                    <div class="alert alert-info text-center">
+                        Empty Inventory. Click "Add End Use" to the end uses system inventory.
+                    </div>
+                </ng-template>
+            </div>
+        </div>
+    </div>
+</div>
+<nav class="setup-wizard-footer navbar shadow">
+    <div class="container-fluid justify-content-between">
+        <button class="btn nav-btn btn-sm" (click)="goBack()">
+            <fa-icon [icon]="faChevronLeft"></fa-icon>
+            Go Back
+        </button>
+        <button class="btn nav-btn btn-sm" (click)="goToNext()">
+            <ng-template [ngIf]="processEquipments.length != 0" [ngIfElse]="preAssessmentBlock">
+                End Use Details
+            </ng-template>
+            <ng-template #preAssessmentBlock>
+                Pre-Assessments
+            </ng-template>
+            <fa-icon [icon]="faChevronRight"></fa-icon>
+        </button>
+    </div>
+</nav>
\ No newline at end of file
diff --git a/src/app/setup-wizard/pre-visit/facility-process-equipment/manage-process-equipment/manage-process-equipment.component.spec.ts b/src/app/setup-wizard/pre-visit/facility-process-equipment/manage-process-equipment/manage-process-equipment.component.spec.ts
new file mode 100644
index 00000000..a53ec665
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/facility-process-equipment/manage-process-equipment/manage-process-equipment.component.spec.ts
@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ManageProcessEquipmentComponent } from './manage-process-equipment.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { HelperPipesModule } from 'src/app/shared/helper-pipes/_helper-pipes.module';
+import { stubServiceProviders } from 'src/app/spec-helpers/spec-test-service-stub';
+import { TableEntriesModule } from 'src/app/shared/table-entries/table-entries.module';
+
+describe('ManageProcessEquipmentComponent', () => {
+  let component: ManageProcessEquipmentComponent;
+  let fixture: ComponentFixture<ManageProcessEquipmentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FontAwesomeModule, HelperPipesModule, TableEntriesModule],
+      declarations: [ManageProcessEquipmentComponent],
+      providers: stubServiceProviders
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ManageProcessEquipmentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/setup-wizard/pre-visit/facility-process-equipment/manage-process-equipment/manage-process-equipment.component.ts b/src/app/setup-wizard/pre-visit/facility-process-equipment/manage-process-equipment/manage-process-equipment.component.ts
new file mode 100644
index 00000000..4787dc62
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/facility-process-equipment/manage-process-equipment/manage-process-equipment.component.ts
@@ -0,0 +1,110 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { faChevronLeft, faChevronRight, faList, faPlus, IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { firstValueFrom, Subscription } from 'rxjs';
+import { ContactIdbService } from 'src/app/indexed-db/contact-idb.service';
+import { EnergyEquipmentIdbService } from 'src/app/indexed-db/energy-equipment-idb.service';
+import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
+import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
+import { ProcessEquipmentIdbService } from 'src/app/indexed-db/process-equipment-idb.service';
+import { IdbContact } from 'src/app/models/contact';
+import { IdbEnergyEquipment } from 'src/app/models/energyEquipment';
+import { IdbFacility } from 'src/app/models/facility';
+import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
+import { getNewIdbProcessEquipment, IdbProcessEquipment } from 'src/app/models/processEquipment';
+
+@Component({
+  selector: 'app-manage-process-equipment',
+  templateUrl: './manage-process-equipment.component.html',
+  styleUrl: './manage-process-equipment.component.css'
+})
+export class ManageProcessEquipmentComponent {
+  faChevronRight: IconDefinition = faChevronRight;
+  faChevronLeft: IconDefinition = faChevronLeft;
+  faList: IconDefinition = faList;
+  faPlus: IconDefinition = faPlus;
+
+  processEquipments: Array<IdbProcessEquipment>;
+  processEquipmentSub: Subscription;
+
+  facility: IdbFacility;
+  facilitySub: Subscription;
+
+  onSiteVisitSub: Subscription;
+  onSiteVisit: IdbOnSiteVisit;
+
+  contacts: Array<IdbContact>;
+  contactsSub: Subscription;
+
+  constructor(private router: Router,
+    private facilityIdbService: FacilityIdbService,
+    private onSiteVisitIdbService: OnSiteVisitIdbService,
+    private contactIdbService: ContactIdbService,
+    private processEquipmentIdbService: ProcessEquipmentIdbService,
+    private energyEquipmentIdbService: EnergyEquipmentIdbService
+  ) {
+  }
+
+  ngOnInit() {
+    this.facilitySub = this.facilityIdbService.selectedFacility.subscribe(selectedFacility => {
+      this.facility = selectedFacility;
+    });
+    this.processEquipmentSub = this.processEquipmentIdbService.processEquipments.subscribe(equipments => {
+      this.processEquipments = equipments.filter(eq => { return eq.facilityId == this.facility.guid });
+    });
+    this.onSiteVisitSub = this.onSiteVisitIdbService.selectedVisit.subscribe(visit => {
+      this.onSiteVisit = visit;
+    });
+    this.contactsSub = this.contactIdbService.contacts.subscribe(contacts => {
+      this.contacts = contacts;
+    })
+  }
+
+  ngOnDestroy() {
+    this.facilitySub.unsubscribe();
+    this.processEquipmentSub.unsubscribe();
+    this.onSiteVisitSub.unsubscribe();
+    this.contactsSub.unsubscribe();
+  }
+
+  async addEquipment() {
+    let newEquipment: IdbProcessEquipment = getNewIdbProcessEquipment(
+      this.facility.userId,
+      this.facility.companyId,
+      this.facility.guid);
+    await firstValueFrom(this.processEquipmentIdbService.addWithObservable(newEquipment));
+    await this.processEquipmentIdbService.setProcessEquipments();
+    this.goToProcessEquipment(newEquipment);
+  }
+
+  async goBack() {
+    if (!this.facility.sidebarSystemInventoryOpen) {
+      this.facility.sidebarSystemInventoryOpen = true;
+      this.facility.sidebarEndUseInventoryOpen = false;
+      await this.facilityIdbService.asyncUpdate(this.facility);
+    }
+    let energyEquipments: Array<IdbEnergyEquipment> = this.energyEquipmentIdbService.getByOtherGuid(this.facility.guid, 'facility');
+    if (energyEquipments.length == 0) {
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/facility-energy-equipment')
+    } else {
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/facility-energy-equipment/' + energyEquipments[energyEquipments.length - 1].guid)
+    }
+  }
+
+  async goToNext() {
+    if (this.processEquipments.length != 0) {
+      this.goToProcessEquipment(this.processEquipments[0])
+    } else {
+      if (!this.facility.sidebarPreAssessmentOpen) {
+        this.facility.sidebarPreAssessmentOpen = true;
+        this.facility.sidebarEndUseInventoryOpen = false;
+        await this.facilityIdbService.asyncUpdate(this.facility);
+      }
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/facility-pre-assessment')
+    }
+  }
+
+  goToProcessEquipment(equipment: IdbProcessEquipment) {
+    this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/facility-end-uses/' + equipment.guid);
+  }
+}
diff --git a/src/app/setup-wizard/pre-visit/facility-setup/facility-setup.component.spec.ts b/src/app/setup-wizard/pre-visit/facility-setup/facility-setup.component.spec.ts
index cef50c03..d72ccd09 100644
--- a/src/app/setup-wizard/pre-visit/facility-setup/facility-setup.component.spec.ts
+++ b/src/app/setup-wizard/pre-visit/facility-setup/facility-setup.component.spec.ts
@@ -4,64 +4,17 @@ import { FacilitySetupComponent } from './facility-setup.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { SharedSettingsFormsModule } from 'src/app/shared/shared-settings-forms/shared-settings-forms.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { UserIdbService } from 'src/app/indexed-db/user-idb.service';
-import { SetupWizardService } from '../../setup-wizard.service';
-import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
-import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
-import { BehaviorSubject } from 'rxjs';
-import { IdbFacility, getNewIdbFacility } from 'src/app/models/facility';
-import { IdbCompany, getNewIdbCompany } from 'src/app/models/company';
-import { IdbUser, getNewIdbUser } from 'src/app/models/user';
-import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
-import { IdbOnSiteVisit, getNewIdbOnSiteVisit } from 'src/app/models/onSiteVisit';
-import { PreAssessmentSetupService } from '../pre-assessment-setup/pre-assessment-setup.service';
-import { AssessmentIdbService } from 'src/app/indexed-db/assessment-idb.service';
-import { EnergyEquipmentIdbService } from 'src/app/indexed-db/energy-equipment-idb.service';
 import { SharedFacilityFormsModule } from 'src/app/shared/shared-facility-forms/shared-facility-forms.module';
+import { stubServiceProviders } from 'src/app/spec-helpers/spec-test-service-stub';
 
 describe('FacilitySetupComponent', () => {
   let component: FacilitySetupComponent;
   let fixture: ComponentFixture<FacilitySetupComponent>;
-  let userIdbService: Partial<UserIdbService> = {
-    user: new BehaviorSubject<IdbUser>(getNewIdbUser())
-  }
-  let setupWizardService: Partial<SetupWizardService> = {
-  };
-  let companyIdbService: Partial<CompanyIdbService> = {
-    companies: new BehaviorSubject<Array<IdbCompany>>([]),
-    selectedCompany: new BehaviorSubject<IdbCompany>(getNewIdbCompany(''))
-  };
-  let facilityIdbService: Partial<FacilityIdbService> = {
-    facilities: new BehaviorSubject<Array<IdbFacility>>([]),
-    selectedFacility: new BehaviorSubject<IdbFacility>(getNewIdbFacility('', ''))
-  };
-
-  let onSiteVisitIdbService: Partial<OnSiteVisitIdbService> = {
-    selectedVisit: new BehaviorSubject<IdbOnSiteVisit>(getNewIdbOnSiteVisit('', '', ''))
-  };
-
-  let preAassessmentSetupService: Partial<PreAssessmentSetupService> = {};
-  let assessmentIdbService: Partial<AssessmentIdbService> = {};
-
-  let energyEquipmentIdbService: Partial<CompanyIdbService> = {
-    companies: new BehaviorSubject<Array<IdbCompany>>([]),
-    selectedCompany: new BehaviorSubject<IdbCompany>(getNewIdbCompany(''))
-  };
-
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [FontAwesomeModule, SharedSettingsFormsModule, FormsModule, ReactiveFormsModule, SharedFacilityFormsModule],
       declarations: [FacilitySetupComponent],
-      providers: [
-        { provide: UserIdbService, useValue: userIdbService },
-        { provide: SetupWizardService, useValue: setupWizardService },
-        { provide: CompanyIdbService, useValue: companyIdbService },   
-        { provide: FacilityIdbService, useValue: facilityIdbService },
-        { provide: OnSiteVisitIdbService, useValue: onSiteVisitIdbService },
-        { provide: PreAssessmentSetupService, useValue: preAassessmentSetupService },
-        { provide: AssessmentIdbService, useValue: assessmentIdbService },
-        { provide: EnergyEquipmentIdbService, useValue: energyEquipmentIdbService }
-      ]
+      providers: stubServiceProviders
     })
     .compileComponents();
     
diff --git a/src/app/setup-wizard/pre-visit/facility-setup/facility-setup.component.ts b/src/app/setup-wizard/pre-visit/facility-setup/facility-setup.component.ts
index 7b1c91d8..678f70e9 100644
--- a/src/app/setup-wizard/pre-visit/facility-setup/facility-setup.component.ts
+++ b/src/app/setup-wizard/pre-visit/facility-setup/facility-setup.component.ts
@@ -7,6 +7,10 @@ import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
 import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
 import { FormControl, Validators } from '@angular/forms';
 import { Observable, of, Subscription } from 'rxjs';
+import { ContactIdbService } from 'src/app/indexed-db/contact-idb.service';
+import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
+import { IdbCompany } from 'src/app/models/company';
+import { IdbContact } from 'src/app/models/contact';
 
 @Component({
   selector: 'app-facility-setup',
@@ -28,7 +32,9 @@ export class FacilitySetupComponent implements OnInit {
   routeGuardWarningModal: boolean = false;
 
   constructor(private facilityIdbService: FacilityIdbService, private router: Router,
-    private onSiteVisitIdbService: OnSiteVisitIdbService
+    private onSiteVisitIdbService: OnSiteVisitIdbService,
+    private contactIdbService: ContactIdbService,
+    private companyIdbService: CompanyIdbService
   ) {
 
   }
@@ -36,15 +42,15 @@ export class FacilitySetupComponent implements OnInit {
   ngOnInit() {
     this.facilitySub = this.facilityIdbService.selectedFacility.subscribe(facility => {
       this.facility = facility;
-      if(this.facility){
+      if (this.facility) {
         this.name = new FormControl(this.facility.generalInformation.name, [Validators.required]);
-      }else{
+      } else {
         this.name = new FormControl('', [Validators.required]);
       }
     });
   }
 
-  ngOnDestroy(){
+  ngOnDestroy() {
     this.facilitySub.unsubscribe();
   }
 
@@ -54,14 +60,29 @@ export class FacilitySetupComponent implements OnInit {
     await this.facilityIdbService.asyncUpdate(facility);
   }
 
-  goBack() {
+  async goBack() {
+    let company: IdbCompany = this.companyIdbService.selectedCompany.getValue();
+    if (!company.sidebarContactsOpen) {
+      company.sidebarContactsOpen = true;
+      await this.companyIdbService.asyncUpdate(company);
+    }
+    let contacts: Array<IdbContact> = this.contactIdbService.contacts.getValue()
+    let companyContacts: Array<IdbContact> = contacts.filter(c => { return c.companyId == company.guid });
     let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
-    this.router.navigateByUrl('/setup-wizard/pre-visit/' + onSiteVisit.guid + '/company-contacts');
+    if (companyContacts.length != 0) {
+      this.router.navigateByUrl('/setup-wizard/pre-visit/' + onSiteVisit.guid + '/company-contacts/' + companyContacts[companyContacts.length - 1].guid);
+    } else {
+      this.router.navigateByUrl('/setup-wizard/pre-visit/' + onSiteVisit.guid + '/company-contacts');
+    }
   }
 
-  goToEnergyEquipment() {
+  async goToEnergyEquipment() {
     let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
-    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/kpi-select');
+    if (!this.facility.sidebarKPIsOpen) {
+      this.facility.sidebarKPIsOpen = true;
+      await this.facilityIdbService.asyncUpdate(this.facility);
+    }
+    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/facility-kpi-select');
   }
 
   canDeactivate(): Observable<boolean> {
diff --git a/src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.component.css b/src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.component.css
deleted file mode 100644
index 5d30b811..00000000
--- a/src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.component.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.disabled-input-label{
-    background-color: white;
-    border: none;
-    border-left: var(--bs-border-width) solid var(--bs-border-color);
-}
-
-.utility-row:hover,
- .utility-row:hover .disabled-input-label,
- .utility-row:hover .disabled-input-label-secondary{
-  background-color: #efefef;
-}
-
-.disabled-input-label-secondary{
-    background-color: white;
-    border: none;
-    margin-left: 28px;
-}
\ No newline at end of file
diff --git a/src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.component.html b/src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.component.html
deleted file mode 100644
index a9198688..00000000
--- a/src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.component.html
+++ /dev/null
@@ -1,267 +0,0 @@
-<div class="setup-wizard-content">
-    <div class="row g-0 justify-content-center h-100 w-100 overflow-scroll">
-        <div class="col-10 pt-4 pb-4">
-            <div class="form-paper shadow">
-                <h5>
-                    <fa-icon [icon]="faToolbox"></fa-icon> Pre-Assessments
-                </h5>
-                <hr>
-                <ng-container *ngIf="onSiteVisit">
-                    <div class="d-flex w-100 justify-content-between pb-2">
-                        <div class="p-0">
-                            <div class="row">
-                                <label class="col-sm-6 col-form-label bold" for="visitDate">Assessment Date</label>
-                                <div class="col-sm-6">
-                                    <input name="visitDate" id="visitDate" type="date" class="form-control"
-                                        [(ngModel)]="onSiteVisit.visitDate" name="visitDate" (change)="setVisitDate()">
-                                </div>
-                            </div>
-                        </div>
-                        <div class="p-0">
-                            <button class="btn btn-outline-success btn-sm" (click)="addAssessment()">
-                                <fa-icon [icon]="faPlus"></fa-icon>
-                                Add Pre-Assessment
-                            </button>
-                        </div>
-                    </div>
-                    <ng-template [ngIf]="(onSiteVisit.assessmentIds | assessmentListOnSite: assessments).length != 0"
-                        [ngIfElse]="noAssessmentsBlock">
-                        <div class="accordion" id="assessmentAccordion">
-                            <div class="accordion-item"
-                                *ngFor="let assessment of (onSiteVisit.assessmentIds | assessmentListOnSite: assessments); let assessmentIndex = index;">
-                                <h2 class="accordion-header">
-                                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
-                                        [attr.data-bs-target]="'#'+assessment.guid" aria-expanded="true"
-                                        [attr.aria-controls]="assessment.guid"
-                                        [ngClass]="{'collapsed': accordionGuid != assessment.guid}"
-                                        (click)="toggleBS(assessment.guid)">
-                                        <fa-icon [icon]="faScrewdriverWrench" class="me-1"></fa-icon>
-                                        {{assessment.name}}
-                                    </button>
-                                </h2>
-                                <div [id]="'#'+assessment.guid" class="accordion-collapse collapse"
-                                    data-bs-parent="#assessmentAccordion">
-                                    <div class="accordion-body">
-                                        <div class="row">
-                                            <div class="col-12">
-                                                <form>
-                                                    <div class="row">
-                                                        <label class="col-sm-5 col-form-label"
-                                                            for="{{'assessmentName_'+assessment.guid}}">Assessment
-                                                            Name</label>
-                                                        <div class="col-sm-7">
-                                                            <input name="{{'assessmentName_'+assessment.guid}}"
-                                                                type="text" class="form-control"
-                                                                [(ngModel)]="assessment.name"
-                                                                (input)="saveChanges(assessment)" minlength="1"
-                                                                maxlength="42"
-                                                                id="{{'assessmentName_'+assessment.guid}}">
-                                                        </div>
-                                                    </div>
-
-                                                    <div class="row">
-                                                        <label class="col-sm-5 col-form-label"
-                                                            for="{{'assessmentType_'+assessment.guid}}">Assessment
-                                                            Type</label>
-                                                        <div class="col-sm-7">
-
-                                                            <select name="{{'assessmentType_'+assessment.guid}}"
-                                                                class="form-select"
-                                                                id="{{'assessmentType_'+assessment.guid}}"
-                                                                [(ngModel)]="assessment.assessmentType"
-                                                                (change)="assessmentTypeChange(assessment)">
-                                                                <option *ngFor="let assessmentType of assessmentTypes"
-                                                                    [ngValue]="assessmentType">
-                                                                    {{assessmentType}}
-                                                                </option>
-                                                            </select>
-
-                                                        </div>
-                                                    </div>
-
-                                                    <hr>
-                                                    <h6>Utility Types</h6>
-                                                    <p class="fw-light">Select the utility types that are
-                                                        applicable to this assessment and enter the annual energy
-                                                        use for each type.</p>
-                                                    <ng-container *ngFor="let use of assessment.utilityEnergyUses">
-                                                        <div class="row mb-1 utility-row"
-                                                            *ngIf="assessment.utilityTypes.includes(use.utilityType)">
-                                                            <div class="col-4">
-                                                                <div class="input-group">
-                                                                    <div class="input-group-text">
-                                                                        <input class="form-check-input" type="checkbox"
-                                                                            name="{{'include_utilityType_' + use.utilityType + assessment.guid}}"
-                                                                            id="{{'include_utilityType_' + use.utilityType + assessment.guid}}"
-                                                                            [(ngModel)]="use.include"
-                                                                            (change)="calculateEnergyUseCost(assessment)">
-                                                                    </div>
-                                                                    <input type="text"
-                                                                        class="form-control disabled-input-label"
-                                                                        [value]="use.utilityType" [disabled]="true">
-                                                                </div>
-                                                            </div>
-                                                            <ng-container *ngIf="use.include">
-                                                                <div class="col-8">
-                                                                    <div class="form-group row align-items-center">
-                                                                        <div class="input-group">
-                                                                            <input type="number" class="form-control"
-                                                                                name="{{'energyUse_' + use.utilityType + assessment.guid}}"
-                                                                                id="{{'energyUse_' + use.utilityType + assessment.guid}}"
-                                                                                [(ngModel)]="use.energyUse"
-                                                                                (input)="calculateEnergyUseCost(assessment)">
-                                                                            <select class="input-group-text"
-                                                                                name="{{'energyUnit_' + use.utilityType + assessment.guid}}"
-                                                                                id="{{'energyUnit_' + use.utilityType + assessment.guid}}"
-                                                                                [(ngModel)]="use.energyUnit"
-                                                                                (change)="calculateEnergyUseCost(assessment)">
-                                                                                <option
-                                                                                    *ngFor="let unitOption of (use.utilityType | linkedUnitOptions: 'Energy')"
-                                                                                    [ngValue]="unitOption.value">
-                                                                                    <span
-                                                                                        [innerHTML]="unitOption.value | unitsDisplay"></span>
-                                                                                </option>
-                                                                            </select>
-                                                                        </div>
-                                                                    </div>
-                                                                </div>
-                                                            </ng-container>
-                                                            <ng-container *ngIf="use.include 
-                                                                &&  use.utilityType !== 'Water' && use.utilityType !== 'Waste Water'
-                                                                && !(use.utilityType | isStandardUnit :use.energyUnit : 'Energy')">
-                                                                <div class="col-4">
-                                                                    <div class="input-group">
-                                                                        <input type="text" class="form-control disabled-input-label-secondary" [disabled]="true"
-                                                                        value="{{use.utilityType | utilityHhvDisplay}}">
-                                                                    </div>
-                                                                </div>
-                                                                <div class="col-8">
-                                                                    <div class="input-group">
-                                                                        <input class="form-control" type="number" step="any" min="0"
-                                                                            name="{{'energyHHV_' + use.utilityType + assessment.guid}}"
-                                                                            id="{{'energyHHV_' + use.utilityType + assessment.guid}}"
-                                                                            [(ngModel)]="use.energyHHV"
-                                                                            (change)="calculateEnergyUseCost(assessment)">
-                                                                        <select class="input-group-text" 
-                                                                            name="{{'energyUnitStandard_' + use.utilityType + assessment.guid}}"
-                                                                            id="{{'energyUnitStandard_' + use.utilityType + assessment.guid}}"
-                                                                            [(ngModel)]="use.energyUnitStandard"
-                                                                            (change)="calculateEnergyUseCost(assessment)">
-                                                                            <option *ngFor="let energyUnitOption of energyUnitOptions"
-                                                                                [ngValue]="energyUnitOption.value">
-                                                                                <span [innerHTML]="energyUnitOption.value | unitsDisplay">
-                                                                                </span>/<span [innerHTML]="use.energyUnit| unitsDisplay">
-                                                                                </span>
-                                                                            </option>
-                                                                        </select>
-                                                                    </div>
-                                                                </div>
-                                                            </ng-container>
-                                                        </div>
-                                                    </ng-container>
-                                                    <hr>
-                                                    <div class="row">
-                                                        <label class="col-sm-5 col-form-label"
-                                                            for="{{'energyUse_'+assessment.guid}}">Total
-                                                            Energy
-                                                            Use</label>
-                                                        <div class="col-sm-7" id="{{'energyUse_'+assessment.guid}}">
-                                                            {{assessment.energyUse | number:'1.0-2'}}&nbsp;
-                                                            <span [innerHTML]="companyEnergyUnit | unitsDisplay">
-                                                            </span>
-                                                        </div>
-                                                    </div>
-
-                                                    <div class="row">
-                                                        <label class="col-sm-5 col-form-label"
-                                                            for="{{'cost_'+assessment.guid}}">Annual
-                                                            Utility
-                                                            Costs</label>
-                                                        <div class="col-sm-7" id="{{'cost_'+assessment.guid}}">
-                                                            {{assessment.cost | currency:'USD':'symbol':'1.0-2'}}
-                                                        </div>
-                                                    </div>
-
-                                                    <div class="row">
-                                                        <label class="col-sm-5 col-form-label"
-                                                            for="visitDate">Assessment
-                                                            Date</label>
-                                                        <div id="visitDate" class="col-sm-7">
-                                                            {{assessment.visitDate | date}}
-                                                        </div>
-                                                    </div>
-                                                </form>
-                                            </div>
-                                            <div class="col-12">
-                                                <hr>
-                                            </div>
-                                            <div class="col-12">
-                                                <div class="d-flex justify-content-between">
-                                                    <div class="col-6">
-                                                        <button class="btn btn-sm btn-primary me-1"
-                                                            *ngFor="let contact of assessment.guid | associatedContacts:'assessment': contacts;"
-                                                            (click)="openContactModal(assessment, contact)">
-                                                            <fa-icon [icon]="faUser"></fa-icon>
-                                                            {{contact | contactNameDisplay}}
-                                                        </button>
-                                                        <button class="btn btn-sm btn-secondary"
-                                                            (click)="openContactModal(assessment, undefined)">
-                                                            <fa-icon [icon]="faContactBook"></fa-icon>
-                                                            Stakeholders
-                                                        </button>
-                                                    </div>
-                                                    <div>
-                                                        <button class="btn btn-sm btn-danger"
-                                                            (click)="openDeleteModal(assessment)">
-                                                            <fa-icon [icon]="faTrash"></fa-icon> Delete
-                                                        </button>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </ng-template>
-                    <ng-template #noAssessmentsBlock>
-                        <div class="alert alert-info text-center">
-                            No Pre-Assessments added. Click "Add Pre-Assessment" to prepare a pre-assessment.
-                        </div>
-                    </ng-template>
-                </ng-container>
-            </div>
-        </div>
-    </div>
-</div>
-<nav class="setup-wizard-footer navbar shadow">
-    <div class="container-fluid justify-content-between">
-        <button class="btn nav-btn btn-sm" (click)="goBack()">
-            <fa-icon [icon]="faChevronLeft"></fa-icon>
-            Go Back
-        </button>
-        <button class="btn nav-btn btn-sm" (click)="goToNext()">
-            Review Pre-Visit
-            <fa-icon [icon]="faChevronRight"></fa-icon>
-        </button>
-    </div>
-</nav>
-
-
-<div [ngClass]="{'window-overlay': displayDeleteModal}"></div>
-<div class="popup" [ngClass]="{'open': displayDeleteModal }">
-    <div class="popup-header">Delete Pre-Assessment
-        <button type="button" class="btn-close float-end" aria-label="Close" (click)="closeDeleteModal()"></button>
-    </div>
-    <div class="popup-body">
-        <div class="alert alert-danger">
-            Are you sure you want to delete this pre-assessment? Changes will be lost.
-        </div>
-        <hr>
-    </div>
-    <div class="popup-footer d-flex justify-content-end">
-        <button class="btn btn-secondary me-2" (click)="closeDeleteModal()">Cancel</button>
-        <button class="btn btn-danger" (click)="removeAssessment()"><fa-icon [icon]="faTrash"></fa-icon> Delete
-            Assessment</button>
-    </div>
-</div>
\ No newline at end of file
diff --git a/src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.component.spec.ts b/src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.component.spec.ts
deleted file mode 100644
index 94e14071..00000000
--- a/src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.component.spec.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PreAssessmentSetupComponent } from './pre-assessment-setup.component';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { IdbCompany, getNewIdbCompany } from 'src/app/models/company';
-import { IdbFacility, getNewIdbFacility } from 'src/app/models/facility';
-import { BehaviorSubject } from 'rxjs';
-import { UserIdbService } from 'src/app/indexed-db/user-idb.service';
-import { IdbUser, getNewIdbUser } from 'src/app/models/user';
-import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
-import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
-import { FormsModule } from '@angular/forms';
-import { AssessmentIdbService } from 'src/app/indexed-db/assessment-idb.service';
-import { IdbAssessment } from 'src/app/models/assessment';
-import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
-import { IdbOnSiteVisit, getNewIdbOnSiteVisit } from 'src/app/models/onSiteVisit';
-import { ContactIdbService } from 'src/app/indexed-db/contact-idb.service';
-import { IdbContact } from 'src/app/models/contact';
-import { HelperPipesModule } from 'src/app/shared/helper-pipes/_helper-pipes.module';
-import { DbChangesService } from 'src/app/indexed-db/db-changes.service';
-import { EnergyEquipmentIdbService } from 'src/app/indexed-db/energy-equipment-idb.service';
-import { IdbEnergyEquipment } from 'src/app/models/energyEquipment';
-import { LocalStorageDataService } from 'src/app/shared/shared-services/local-storage-data.service';
-import { ChangeDetectorRef } from '@angular/core';
-import { BootstrapService } from 'src/app/shared/shared-services/bootstrap.service';
-
-describe('PreAssessmentSetupComponent', () => {
-  let component: PreAssessmentSetupComponent;
-  let fixture: ComponentFixture<PreAssessmentSetupComponent>;
-
-  let userIdbService: Partial<UserIdbService> = {
-    user: new BehaviorSubject<IdbUser>(getNewIdbUser())
-  }
-  let companyIdbService: Partial<CompanyIdbService> = {
-    companies: new BehaviorSubject<Array<IdbCompany>>([]),
-    selectedCompany: new BehaviorSubject<IdbCompany>(getNewIdbCompany('')),
-    getByGUID: (guid: string) => (getNewIdbCompany(''))
-  };
-  let facilityIdbService: Partial<FacilityIdbService> = {
-    facilities: new BehaviorSubject<Array<IdbFacility>>([]),
-    selectedFacility: new BehaviorSubject<IdbFacility>(getNewIdbFacility('', ''))
-  };
-  let assessmentIdbService: Partial<AssessmentIdbService> = {
-    assessments: new BehaviorSubject<Array<IdbAssessment>>([])
-  };
-  let onSiteVisitIdbService: Partial<OnSiteVisitIdbService> = {
-    selectedVisit: new BehaviorSubject<IdbOnSiteVisit>(getNewIdbOnSiteVisit('', '', ''))
-  };
-  let contactIdbService: Partial<ContactIdbService> = {
-    contacts: new BehaviorSubject<Array<IdbContact>>([])
-  };
-
-  let energyEquipmentIdbService: Partial<EnergyEquipmentIdbService> = {
-    energyEquipments: new BehaviorSubject<Array<IdbEnergyEquipment>>([])
-  };
-  let dbChangesService: Partial<DbChangesService> = {}
-  let localStorageDataService: Partial<LocalStorageDataService> = {};
-  let cd: Partial<ChangeDetectorRef> = {};
-  let bootstrapService: Partial<BootstrapService> = {};
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [FontAwesomeModule, FormsModule, HelperPipesModule],
-      declarations: [PreAssessmentSetupComponent],
-      providers: [
-        { provide: UserIdbService, useValue: userIdbService },
-        { provide: CompanyIdbService, useValue: companyIdbService },
-        { provide: FacilityIdbService, useValue: facilityIdbService },
-        { provide: AssessmentIdbService, useValue: assessmentIdbService },
-        { provide: OnSiteVisitIdbService, useValue: onSiteVisitIdbService },
-        { provide: ContactIdbService, useValue: contactIdbService },
-        { provide: DbChangesService, useValue: dbChangesService },
-        { provide: EnergyEquipmentIdbService, useValue: energyEquipmentIdbService },
-        { provide: LocalStorageDataService, useValue: localStorageDataService },
-        { provide: ChangeDetectorRef, useValue: cd },
-        { provide: BootstrapService, useValue: bootstrapService }
-      ]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(PreAssessmentSetupComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.component.ts b/src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.component.ts
deleted file mode 100644
index fcc23cc8..00000000
--- a/src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.component.ts
+++ /dev/null
@@ -1,249 +0,0 @@
-import { ChangeDetectorRef, Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { IconDefinition, faChevronLeft, faChevronRight, faContactBook, faPlus, faScrewdriverWrench, faToolbox, faTrash, faUser } from '@fortawesome/free-solid-svg-icons';
-import { IdbAssessment, getNewIdbAssessment } from 'src/app/models/assessment';
-import { IdbContact } from 'src/app/models/contact';
-import { AssessmentIdbService } from 'src/app/indexed-db/assessment-idb.service';
-import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
-import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
-import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
-import { Subscription, firstValueFrom } from 'rxjs';
-import { ContactIdbService } from 'src/app/indexed-db/contact-idb.service';
-import { DbChangesService } from 'src/app/indexed-db/db-changes.service';
-import { IdbEnergyEquipment } from 'src/app/models/energyEquipment';
-import { EnergyEquipmentIdbService } from 'src/app/indexed-db/energy-equipment-idb.service';
-import { AssessmentOptions, AssessmentType, AssessmentTypes } from 'src/app/shared/constants/assessmentTypes';
-import { UtilityOption, UtilityOptions } from 'src/app/shared/constants/utilityTypes';
-import { BootstrapService } from 'src/app/shared/shared-services/bootstrap.service';
-import { LocalStorageDataService } from 'src/app/shared/shared-services/local-storage-data.service';
-import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
-import { ConvertValue } from 'src/app/shared/conversions/convertValue';
-import { UtilityEnergyUse } from 'src/app/models/utilityEnergyUses';
-import { UnitSettings } from 'src/app/models/unitSettings';
-import { EnergyUnitOptions, UnitOption } from 'src/app/shared/constants/unitOptions';
-import { SharedDataService } from 'src/app/shared/shared-services/shared-data.service';
-
-@Component({
-  selector: 'app-pre-assessment-setup',
-  templateUrl: './pre-assessment-setup.component.html',
-  styleUrl: './pre-assessment-setup.component.css'
-})
-export class PreAssessmentSetupComponent {
-
-  faChevronRight: IconDefinition = faChevronRight;
-  faChevronLeft: IconDefinition = faChevronLeft;
-  faScrewdriverWrench: IconDefinition = faScrewdriverWrench;
-  faToolbox: IconDefinition = faToolbox;
-  faPlus: IconDefinition = faPlus;
-  faTrash: IconDefinition = faTrash;
-  faUser: IconDefinition = faUser;
-  faContactBook: IconDefinition = faContactBook;
-
-  assessments: Array<IdbAssessment>;
-  assessmentsSub: Subscription;
-
-  contacts: Array<IdbContact>;
-  contactsSub: Subscription;
-
-  energyEquipmentSub: Subscription;
-  energyEquipmentOptions: Array<IdbEnergyEquipment>;
-
-  convertValue: ConvertValue = new ConvertValue();
-
-  assessmentTypes: Array<AssessmentType> = AssessmentTypes;
-  utilityOptions: Array<UtilityOption> = UtilityOptions;
-
-  displayDeleteModal: boolean = false;
-  assessmentToDelete: IdbAssessment;
-
-  onSiteVisit: IdbOnSiteVisit;
-  onSiteVisitSub: Subscription;
-  isFormChange: boolean = false;
-
-  companySub: Subscription;
-  companyEnergyUnit: string;
-  facilitySub: Subscription;
-  facilityUnitSettings: UnitSettings;
-  energyUnitOptions: Array<UnitOption> = EnergyUnitOptions;
-
-  accordionGuid: string;
-  isAddNew: boolean = false;
-  constructor(private router: Router, private assessmentIdbService: AssessmentIdbService,
-    private companyIdbService: CompanyIdbService,
-    private facilityIdbService: FacilityIdbService,
-    private onSiteVisitIdbService: OnSiteVisitIdbService,
-    private contactIdbService: ContactIdbService,
-    private dbChangesService: DbChangesService,
-    private energyEquipmentIdbService: EnergyEquipmentIdbService,
-    private bootstrapService: BootstrapService,
-    private localStorageDataService: LocalStorageDataService,
-    private cd: ChangeDetectorRef,
-    private sharedDataService: SharedDataService
-  ) {
-  }
-
-  ngOnInit() {
-    this.onSiteVisitSub = this.onSiteVisitIdbService.selectedVisit.subscribe(_onSiteVisit => {
-      this.onSiteVisit = _onSiteVisit;
-    });
-
-    this.contactsSub = this.contactIdbService.contacts.subscribe(_contacts => {
-      this.contacts = _contacts;
-    });
-
-    this.assessmentsSub = this.assessmentIdbService.assessments.subscribe(_assessments => {
-      if (!this.isFormChange) {
-        this.assessments = _assessments;
-      } else {
-        this.isFormChange = false;
-      }
-    });
-
-    this.energyEquipmentSub = this.energyEquipmentIdbService.energyEquipments.subscribe(equipments => {
-      this.energyEquipmentOptions = equipments;
-    });
-
-    this.companySub = this.companyIdbService.selectedCompany.subscribe(_company => {
-      this.companyEnergyUnit = _company.companyEnergyUnit;
-    });
-
-    this.facilitySub = this.facilityIdbService.selectedFacility.subscribe(_facility => {
-      this.facilityUnitSettings = _facility.unitSettings;
-    });
-
-  }
-
-  ngOnDestroy() {
-    this.onSiteVisitSub.unsubscribe();
-    this.contactsSub.unsubscribe();
-    this.assessmentsSub.unsubscribe();
-    this.energyEquipmentSub.unsubscribe();
-    this.companySub.unsubscribe();
-    this.facilitySub.unsubscribe();
-  }
-
-  ngAfterViewInit() {
-    //open the accordion for last viewed neb
-    let lastAssessmentGuid: string = this.localStorageDataService.assessmentAccordionGuid;
-    if (lastAssessmentGuid) {
-      this.toggleBS(lastAssessmentGuid);
-      this.cd.detectChanges();
-    }
-  }
-
-  async assessmentTypeChange(assessment: IdbAssessment) {
-    let utilityTypes = AssessmentOptions.find(
-      _assessmentOption => _assessmentOption.assessmentType == assessment.assessmentType)?.utilityTypes || [];
-    assessment.utilityTypes = utilityTypes; // track all utility types
-    await this.calculateEnergyUseCost(assessment);
-  }
-
-  async calculateEnergyUseCost(assessment: IdbAssessment) {
-    let use = 0, cost = 0;
-    assessment.utilityTypes.forEach(utilityType => {
-      let utilityEnergyUse: UtilityEnergyUse = assessment.utilityEnergyUses.find(
-        _energyUse => _energyUse.utilityType == utilityType);
-      if (utilityEnergyUse.include) {
-        let trimmedType = utilityType.replace(/\s+/g, ''); // Remove spaces
-        let camelCaseType = trimmedType.charAt(0).toLowerCase() + trimmedType.slice(1);
-        let convertedUse = 0, convertedCost = 0;
-        let selectedUtilityOption = this.utilityOptions.find(
-          _option => _option.utilityType == utilityType);
-        let selectedUnitOption = selectedUtilityOption.energyUnitOptions.find(
-          _unitOption => _unitOption.value == utilityEnergyUse.energyUnit);
-        // calculate use
-        if (selectedUtilityOption.isStandardEnergyUnit
-          && selectedUnitOption.isStandard !== false) {
-          convertedUse = this.convertValue.convertValue(
-            utilityEnergyUse.energyUse,
-            utilityEnergyUse.energyUnit,
-            this.companyEnergyUnit).convertedValue;
-        } else {
-          convertedUse = this.convertValue.convertValue(
-            utilityEnergyUse.energyUse * utilityEnergyUse.energyHHV,
-            utilityEnergyUse.energyUnitStandard,
-            this.companyEnergyUnit).convertedValue;
-        }
-        use += convertedUse;
-        // calculate cost
-        convertedCost = this.convertValue.convertValue(
-          utilityEnergyUse.energyUse,
-          utilityEnergyUse.energyUnit,
-          this.facilityUnitSettings[`${camelCaseType}Unit`]).convertedValue;
-        cost += convertedCost * this.facilityUnitSettings[`${camelCaseType}Price`];
-      }
-    });
-    assessment.energyUse = use;
-    assessment.cost = cost;
-    await this.saveChanges(assessment);
-  }
-
-  async saveChanges(assessment: IdbAssessment) {
-    this.isFormChange = true;
-    this.assessmentIdbService.asyncUpdate(assessment);
-  }
-
-  goBack() {
-    let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
-    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/end-uses');
-  }
-
-  goToNext() {
-    let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
-    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/review-pre-visit');
-  }
-
-  async addAssessment() {
-    let assessment: IdbAssessment = getNewIdbAssessment(this.onSiteVisit.userId, this.onSiteVisit.companyId, this.onSiteVisit.facilityId,
-      this.facilityIdbService.getByGUID(this.onSiteVisit.facilityId).unitSettings);
-    assessment.visitDate = this.onSiteVisit.visitDate;
-    await firstValueFrom(this.assessmentIdbService.addWithObservable(assessment));
-    await this.assessmentIdbService.setAssessments();
-    this.onSiteVisit.assessmentIds.push(assessment.guid);
-    await this.onSiteVisitIdbService.asyncUpdate(this.onSiteVisit);
-    this.toggleBS(assessment.guid);
-  }
-
-  openDeleteModal(assessment: IdbAssessment) {
-    this.assessmentToDelete = assessment;
-    this.displayDeleteModal = true;
-  }
-
-  closeDeleteModal() {
-    this.displayDeleteModal = false;
-    this.assessmentToDelete = undefined;
-  }
-
-  async removeAssessment() {
-    await this.dbChangesService.deleteAssessment(this.assessmentToDelete);
-    this.closeDeleteModal();
-  }
-
-  openContactModal(assessment: IdbAssessment, viewContact: IdbContact) {
-    this.sharedDataService.displayContactModal.next({ context: 'assessment', viewContact: viewContact, contextGuid: assessment.guid, companyId: assessment.companyId })
-  }
-
-  closeContactModal() {
-    this.sharedDataService.displayContactModal.next(undefined);
-  }
-
-  async setVisitDate() {
-    for (let i = 0; i < this.assessments.length; i++) {
-      if (this.onSiteVisit.assessmentIds.includes(this.assessments[i].guid)) {
-        this.assessments[i].visitDate = this.onSiteVisit.visitDate;
-        await this.saveChanges(this.assessments[i]);
-      }
-    }
-    await this.onSiteVisitIdbService.asyncUpdate(this.onSiteVisit);
-  }
-
-  toggleBS(assessmentGuid: string) {
-    this.bootstrapService.bsCollapse('#' + assessmentGuid);
-    if (this.accordionGuid != assessmentGuid) {
-      this.accordionGuid = assessmentGuid;
-    } else {
-      this.accordionGuid = undefined;
-    }
-    this.localStorageDataService.setAssessmentAccordionGuid(this.accordionGuid);
-  }
-}
diff --git a/src/app/setup-wizard/pre-visit/pre-assessments/manage-pre-assessments/manage-pre-assessments.component.css b/src/app/setup-wizard/pre-visit/pre-assessments/manage-pre-assessments/manage-pre-assessments.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/setup-wizard/pre-visit/pre-assessments/manage-pre-assessments/manage-pre-assessments.component.html b/src/app/setup-wizard/pre-visit/pre-assessments/manage-pre-assessments/manage-pre-assessments.component.html
new file mode 100644
index 00000000..affbe5eb
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/pre-assessments/manage-pre-assessments/manage-pre-assessments.component.html
@@ -0,0 +1,96 @@
+<div class="setup-wizard-content">
+    <div class="row g-0 justify-content-center h-100 w-100 overflow-scroll">
+        <div class="col-10 pt-4 pb-4">
+            <div class="form-paper shadow">
+                <h5>
+                    <fa-icon [icon]="faList"></fa-icon> Pre-Assessments
+                </h5>
+                <hr>
+                <ng-container *ngIf="onSiteVisit">
+                    <div class="d-flex w-100 justify-content-between pb-2">
+                        <div class="p-0">
+                            <div class="row">
+                                <label class="col-sm-6 col-form-label bold" for="visitDate">Assessment Date</label>
+                                <div class="col-sm-6">
+                                    <input name="visitDate" id="visitDate" type="date" class="form-control"
+                                        [(ngModel)]="onSiteVisit.visitDate" name="visitDate" (change)="setVisitDate()">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-0">
+                            <button class="btn btn-outline-success btn-sm" (click)="addAssessment()">
+                                <fa-icon [icon]="faPlus"></fa-icon>
+                                Add Pre-Assessment
+                            </button>
+                        </div>
+                    </div>
+                    @let onSiteAssessments = (onSiteVisit.assessmentIds | assessmentListOnSite: assessments);
+                    <ng-template [ngIf]="onSiteAssessments.length != 0" [ngIfElse]="noAssessmentsBlock">
+                        <table class="table table-bordered table-hover table-sm">
+                            <thead>
+                                <tr>
+                                    <th class="w-25">
+                                        Name
+                                    </th>
+                                    <th class="w-50">
+                                        Assessment Type
+                                    </th>
+                                    <th class="w-25">
+                                        Stakeholders
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr *ngFor="let assessment of onSiteAssessments">
+                                    <td>
+                                        <a class="click-link" (click)="goToAssessment(assessment)">
+                                            {{assessment.name}}
+                                        </a>
+                                    </td>
+                                    <td>
+                                        <app-single-cell-item [strValue]="assessment.assessmentType"></app-single-cell-item>
+                                    </td>
+                                    <td>
+                                        @let associatedContacts = assessment.guid |
+                                        associatedContacts:'assessment': contacts;
+                                        <ng-template [ngIf]="associatedContacts.length > 0"
+                                            [ngIfElse]="noContactsBlock">
+                                            <span *ngFor="let contact of associatedContacts">
+                                                {{contact | contactNameDisplay}} <br>
+                                            </span>
+                                        </ng-template>
+                                        <ng-template #noContactsBlock>
+                                            &mdash;
+                                        </ng-template>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </ng-template>
+                    <ng-template #noAssessmentsBlock>
+                        <div class="alert alert-info text-center">
+                            No Pre-Assessments added. Click "Add Pre-Assessment" to prepare a pre-assessment.
+                        </div>
+                    </ng-template>
+                </ng-container>
+            </div>
+        </div>
+    </div>
+</div>
+<nav class="setup-wizard-footer navbar shadow">
+    <div class="container-fluid justify-content-between">
+        <button class="btn nav-btn btn-sm" (click)="goBack()">
+            <fa-icon [icon]="faChevronLeft"></fa-icon>
+            Go Back
+        </button>
+        <button class="btn nav-btn btn-sm" (click)="goToNext()">
+            <ng-template [ngIf]="onSiteVisit.assessmentIds.length != 0" [ngIfElse]="reviewVisitBlock">
+                Pre-Assessment Details
+            </ng-template>
+            <ng-template #reviewVisitBlock>
+                Review Pre-Visit
+            </ng-template>
+            <fa-icon [icon]="faChevronRight"></fa-icon>
+        </button>
+    </div>
+</nav>
\ No newline at end of file
diff --git a/src/app/setup-wizard/pre-visit/pre-assessments/manage-pre-assessments/manage-pre-assessments.component.spec.ts b/src/app/setup-wizard/pre-visit/pre-assessments/manage-pre-assessments/manage-pre-assessments.component.spec.ts
new file mode 100644
index 00000000..ffd1bfd6
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/pre-assessments/manage-pre-assessments/manage-pre-assessments.component.spec.ts
@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ManagePreAssessmentsComponent } from './manage-pre-assessments.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { stubServiceProviders } from 'src/app/spec-helpers/spec-test-service-stub';
+import { HelperPipesModule } from 'src/app/shared/helper-pipes/_helper-pipes.module';
+import { FormsModule } from '@angular/forms';
+
+describe('ManagePreAssessmentsComponent', () => {
+  let component: ManagePreAssessmentsComponent;
+  let fixture: ComponentFixture<ManagePreAssessmentsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FontAwesomeModule, HelperPipesModule, FormsModule],
+      declarations: [ManagePreAssessmentsComponent],
+      providers: stubServiceProviders
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ManagePreAssessmentsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/setup-wizard/pre-visit/pre-assessments/manage-pre-assessments/manage-pre-assessments.component.ts b/src/app/setup-wizard/pre-visit/pre-assessments/manage-pre-assessments/manage-pre-assessments.component.ts
new file mode 100644
index 00000000..c0f52134
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/pre-assessments/manage-pre-assessments/manage-pre-assessments.component.ts
@@ -0,0 +1,122 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { faChevronLeft, faChevronRight, faList, faPlus, IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { firstValueFrom, Subscription } from 'rxjs';
+import { AssessmentIdbService } from 'src/app/indexed-db/assessment-idb.service';
+import { ContactIdbService } from 'src/app/indexed-db/contact-idb.service';
+import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
+import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
+import { ProcessEquipmentIdbService } from 'src/app/indexed-db/process-equipment-idb.service';
+import { getNewIdbAssessment, IdbAssessment } from 'src/app/models/assessment';
+import { IdbContact } from 'src/app/models/contact';
+import { IdbFacility } from 'src/app/models/facility';
+import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
+import { IdbProcessEquipment } from 'src/app/models/processEquipment';
+
+@Component({
+  selector: 'app-manage-pre-assessments',
+  templateUrl: './manage-pre-assessments.component.html',
+  styleUrl: './manage-pre-assessments.component.css'
+})
+export class ManagePreAssessmentsComponent {
+
+  faChevronRight: IconDefinition = faChevronRight;
+  faChevronLeft: IconDefinition = faChevronLeft;
+  faList: IconDefinition = faList;
+  faPlus: IconDefinition = faPlus;
+
+  assessments: Array<IdbAssessment>;
+  assessmentsSub: Subscription;
+
+  facility: IdbFacility;
+  facilitySub: Subscription;
+
+  onSiteVisitSub: Subscription;
+  onSiteVisit: IdbOnSiteVisit;
+
+  contacts: Array<IdbContact>;
+  contactsSub: Subscription;
+
+  constructor(private router: Router,
+    private facilityIdbService: FacilityIdbService,
+    private onSiteVisitIdbService: OnSiteVisitIdbService,
+    private contactIdbService: ContactIdbService,
+    private assessmentIdbService: AssessmentIdbService,
+    private processEquipmentIdbService: ProcessEquipmentIdbService
+  ) {
+  }
+
+  ngOnInit() {
+    this.facilitySub = this.facilityIdbService.selectedFacility.subscribe(selectedFacility => {
+      this.facility = selectedFacility;
+    });
+    this.assessmentsSub = this.assessmentIdbService.assessments.subscribe(assessments => {
+      this.assessments = assessments;
+    });
+    this.onSiteVisitSub = this.onSiteVisitIdbService.selectedVisit.subscribe(visit => {
+      this.onSiteVisit = visit;
+    });
+    this.contactsSub = this.contactIdbService.contacts.subscribe(contacts => {
+      this.contacts = contacts;
+    })
+  }
+
+  ngOnDestroy() {
+    this.facilitySub.unsubscribe();
+    this.assessmentsSub.unsubscribe();
+    this.onSiteVisitSub.unsubscribe();
+    this.contactsSub.unsubscribe();
+  }
+
+  async addAssessment() {
+    let assessment: IdbAssessment = getNewIdbAssessment(this.onSiteVisit.userId, this.onSiteVisit.companyId, this.onSiteVisit.facilityId,
+      this.facilityIdbService.getByGUID(this.onSiteVisit.facilityId).unitSettings);
+    assessment.visitDate = this.onSiteVisit.visitDate;
+    await firstValueFrom(this.assessmentIdbService.addWithObservable(assessment));
+    await this.assessmentIdbService.setAssessments();
+    this.onSiteVisit.assessmentIds.push(assessment.guid);
+    await this.onSiteVisitIdbService.asyncUpdate(this.onSiteVisit);
+    this.goToAssessment(assessment);
+  }
+
+  async goBack() {
+    if (!this.facility.sidebarEndUseInventoryOpen) {
+      this.facility.sidebarEndUseInventoryOpen = true;
+      this.facility.sidebarPreAssessmentOpen = false;
+      await this.facilityIdbService.asyncUpdate(this.facility);
+    }
+    let processEquipment: Array<IdbProcessEquipment> = this.processEquipmentIdbService.getFacilityProcessEquipment(this.facility.guid);
+    if (processEquipment.length > 0) {
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/facility-end-uses/' + processEquipment[processEquipment.length - 1].guid);
+    } else {
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/facility-end-uses');
+    }
+  }
+
+  async goToNext() {
+    if (this.onSiteVisit.assessmentIds.length != 0) {
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/facility-pre-assessment/' + this.onSiteVisit.assessmentIds[0]);
+    } else {
+      if (this.facility.sidebarPreAssessmentOpen) {
+        this.facility.sidebarPreAssessmentOpen = false;
+        await this.facilityIdbService.asyncUpdate(this.facility);
+      }
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/review-pre-visit')
+    }
+  }
+
+  goToAssessment(assessment: IdbAssessment) {
+    this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/facility-pre-assessment/' + assessment.guid);
+  }
+
+  async setVisitDate() {
+    for (let i = 0; i < this.assessments.length; i++) {
+      if (this.onSiteVisit.assessmentIds.includes(this.assessments[i].guid)) {
+        this.assessments[i].visitDate = this.onSiteVisit.visitDate;
+        await firstValueFrom(this.assessmentIdbService.updateWithObservable(this.assessments[i]));
+      }
+    }
+    await this.assessmentIdbService.setAssessments();
+    await this.onSiteVisitIdbService.asyncUpdate(this.onSiteVisit);
+  }
+}
diff --git a/src/app/setup-wizard/pre-visit/pre-assessments/pre-assessment-form/pre-assessment-form.component.css b/src/app/setup-wizard/pre-visit/pre-assessments/pre-assessment-form/pre-assessment-form.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/setup-wizard/pre-visit/pre-assessments/pre-assessment-form/pre-assessment-form.component.html b/src/app/setup-wizard/pre-visit/pre-assessments/pre-assessment-form/pre-assessment-form.component.html
new file mode 100644
index 00000000..3517105a
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/pre-assessments/pre-assessment-form/pre-assessment-form.component.html
@@ -0,0 +1,72 @@
+<div class="setup-wizard-content">
+    <div class="row g-0 justify-content-center h-100 w-100 overflow-scroll">
+        <div class="col-10 pt-4 pb-4">
+            <div class="form-paper shadow">
+                <h5>
+                    <fa-icon [icon]="faScrewdriverWrench"></fa-icon>
+                    {{assessment?.name}}
+                </h5>
+                <hr>
+                <app-assessment-details-form [inPreAssessment]="true"></app-assessment-details-form>
+                <hr>
+                <div class="d-flex w-100 justify-content-end">
+                    <div>
+                        <button class="btn btn-danger btn-sm" (click)="openDeleteModal()">
+                            <fa-icon [icon]="faTrash"></fa-icon>
+                            Delete
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<nav class="setup-wizard-footer navbar shadow">
+    <div class="container-fluid justify-content-between">
+        <button class="btn nav-btn btn-sm" (click)="goBack()">
+            <fa-icon [icon]="faChevronLeft"></fa-icon>
+            Go Back
+        </button>
+        <button class="btn nav-btn btn-sm" (click)="goToNext()">
+            <ng-template [ngIf]="assessmentIndex < (this.onSiteVisit.assessmentIds.length -1)"
+                [ngIfElse]="reviewPrevisitBlock">
+                Next Pre-Assessment
+            </ng-template>
+            <ng-template #reviewPrevisitBlock>
+                Review Pre-visit
+            </ng-template>
+            <fa-icon [icon]="faChevronRight"></fa-icon>
+        </button>
+    </div>
+</nav>
+<div [ngClass]="{'window-overlay': routeGuardWarningModal}"></div>
+<div class="popup" [ngClass]="{'open': routeGuardWarningModal }">
+    <div class="popup-body">
+        <div class="alert alert-danger">
+            Please fill the required fields.
+        </div>
+    </div>
+    <div class="popup-footer d-flex justify-content-end">
+        <button class="btn btn-secondary me-2" (click)="closeWarningModal()">OK</button>
+    </div>
+</div>
+
+
+
+<div [ngClass]="{'window-overlay': displayDeleteModal}"></div>
+<div class="popup" [ngClass]="{'open': displayDeleteModal }">
+    <div class="popup-header">Delete Pre-Assessment
+        <button type="button" class="btn-close float-end" aria-label="Close" (click)="closeDeleteModal()"></button>
+    </div>
+    <div class="popup-body">
+        <div class="alert alert-danger">
+            Are you sure you want to delete this pre-assessment? Changes will be lost.
+        </div>
+        <hr>
+    </div>
+    <div class="popup-footer d-flex justify-content-end">
+        <button class="btn btn-secondary btn-sm me-2" (click)="closeDeleteModal()">Cancel</button>
+        <button class="btn btn-danger btn-sm" (click)="removeAssessment()"><fa-icon [icon]="faTrash"></fa-icon> Delete
+            Assessment</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/setup-wizard/pre-visit/pre-assessments/pre-assessment-form/pre-assessment-form.component.spec.ts b/src/app/setup-wizard/pre-visit/pre-assessments/pre-assessment-form/pre-assessment-form.component.spec.ts
new file mode 100644
index 00000000..996f8dd8
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/pre-assessments/pre-assessment-form/pre-assessment-form.component.spec.ts
@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PreAssessmentFormComponent } from './pre-assessment-form.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { stubServiceProviders } from 'src/app/spec-helpers/spec-test-service-stub';
+import { SharedAssessmentFormsModule } from 'src/app/shared/shared-assessment-forms/shared-assessment-forms.module';
+
+describe('PreAssessmentFormComponent', () => {
+  let component: PreAssessmentFormComponent;
+  let fixture: ComponentFixture<PreAssessmentFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FontAwesomeModule, SharedAssessmentFormsModule],
+      declarations: [PreAssessmentFormComponent],
+      providers: stubServiceProviders
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PreAssessmentFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/setup-wizard/pre-visit/pre-assessments/pre-assessment-form/pre-assessment-form.component.ts b/src/app/setup-wizard/pre-visit/pre-assessments/pre-assessment-form/pre-assessment-form.component.ts
new file mode 100644
index 00000000..75e01e34
--- /dev/null
+++ b/src/app/setup-wizard/pre-visit/pre-assessments/pre-assessment-form/pre-assessment-form.component.ts
@@ -0,0 +1,133 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { faChevronLeft, faChevronRight, faScrewdriverWrench, faTrash, IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { Observable, of, Subscription } from 'rxjs';
+import { AssessmentIdbService } from 'src/app/indexed-db/assessment-idb.service';
+import { DbChangesService } from 'src/app/indexed-db/db-changes.service';
+import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
+import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
+import { IdbAssessment } from 'src/app/models/assessment';
+import { IdbFacility } from 'src/app/models/facility';
+import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
+
+@Component({
+  selector: 'app-pre-assessment-form',
+  templateUrl: './pre-assessment-form.component.html',
+  styleUrl: './pre-assessment-form.component.css'
+})
+export class PreAssessmentFormComponent {
+  faChevronLeft: IconDefinition = faChevronLeft;
+  faChevronRight: IconDefinition = faChevronRight;
+  faScrewdriverWrench: IconDefinition = faScrewdriverWrench;
+  faTrash: IconDefinition = faTrash;
+
+  assessmentGuid: string;
+  assessments: Array<IdbAssessment>;
+  assessmentsSub: Subscription;
+  assessment: IdbAssessment;
+  routeGuardWarningModal: boolean = false;
+  displayDeleteModal: boolean = false;
+  assessmentIndex: number;
+
+  onSiteVisitSub: Subscription;
+  onSiteVisit: IdbOnSiteVisit;
+  constructor(private activatedRoute: ActivatedRoute,
+    private router: Router,
+    private onSiteVisitIdbService: OnSiteVisitIdbService,
+    private assessmentIdbService: AssessmentIdbService,
+    private dbChangesService: DbChangesService,
+    private facilityIdbService: FacilityIdbService
+  ) {
+
+  }
+
+  ngOnInit() {
+    this.onSiteVisitSub = this.onSiteVisitIdbService.selectedVisit.subscribe(val => {
+      this.onSiteVisit = val;
+    })
+    this.activatedRoute.params.subscribe(params => {
+      this.assessmentGuid = params['id'];
+      this.setAssessment();
+    });
+    this.assessmentsSub = this.assessmentIdbService.assessments.subscribe(assessments => {
+      this.assessments = assessments;
+      this.setAssessment();
+    });
+  }
+
+  ngOnDestroy() {
+    this.assessmentsSub.unsubscribe();
+    this.onSiteVisitSub.unsubscribe();
+  }
+
+  setAssessment() {
+    if (this.assessments) {
+      this.assessmentIndex = this.onSiteVisit.assessmentIds.findIndex(id => { return id == this.assessmentGuid });
+      this.assessment = this.assessments.find(eq => { return eq.guid == this.assessmentGuid });
+      if (!this.assessment) {
+        this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/facility-pre-assessment')
+      } else {
+        this.assessmentIdbService.selectedAssessment.next(this.assessment);
+      }
+    }
+  }
+
+  async goToNext() {
+    this.assessmentIndex++;
+    if (this.onSiteVisit.assessmentIds[this.assessmentIndex]) {
+      this.goToPreAssessment(this.onSiteVisit.assessmentIds[this.assessmentIndex]);
+    } else {
+      let facility: IdbFacility = this.facilityIdbService.selectedFacility.getValue();
+      if (facility.sidebarPreAssessmentOpen) {
+        facility.sidebarPreAssessmentOpen = false;
+        facility.sidebarOpen = false;
+        await this.facilityIdbService.asyncUpdate(facility);
+      }
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/review-pre-visit')
+    }
+  }
+
+  goBack() {
+    if (this.assessmentIndex == 0) {
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/facility-pre-assessment')
+    } else {
+      this.assessmentIndex--;
+      this.goToPreAssessment(this.onSiteVisit.assessmentIds[this.assessmentIndex])
+    }
+
+  }
+
+  goToPreAssessment(guid: string) {
+    this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/facility-pre-assessment/' + guid)
+
+  }
+
+  canDeactivate(): Observable<boolean> {
+    if (this.assessment && !this.assessment.name) {
+      this.displayWarningModal();
+      return of(false);
+    }
+    return of(true);
+  }
+
+  displayWarningModal() {
+    this.routeGuardWarningModal = true;
+  }
+
+  closeWarningModal() {
+    this.routeGuardWarningModal = false;
+  }
+
+  openDeleteModal() {
+    this.displayDeleteModal = true;
+  }
+
+  closeDeleteModal() {
+    this.displayDeleteModal = false;
+  }
+
+  async removeAssessment() {
+    await this.dbChangesService.deleteAssessment(this.assessment);
+    this.closeDeleteModal();
+  }
+}
diff --git a/src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.service.spec.ts b/src/app/setup-wizard/pre-visit/pre-assessments/pre-assessment-setup.service.spec.ts
similarity index 100%
rename from src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.service.spec.ts
rename to src/app/setup-wizard/pre-visit/pre-assessments/pre-assessment-setup.service.spec.ts
diff --git a/src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.service.ts b/src/app/setup-wizard/pre-visit/pre-assessments/pre-assessment-setup.service.ts
similarity index 100%
rename from src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.service.ts
rename to src/app/setup-wizard/pre-visit/pre-assessments/pre-assessment-setup.service.ts
diff --git a/src/app/setup-wizard/pre-visit/review-pre-visit-setup/review-pre-visit-setup.component.ts b/src/app/setup-wizard/pre-visit/review-pre-visit-setup/review-pre-visit-setup.component.ts
index d149fcf4..1294fa44 100644
--- a/src/app/setup-wizard/pre-visit/review-pre-visit-setup/review-pre-visit-setup.component.ts
+++ b/src/app/setup-wizard/pre-visit/review-pre-visit-setup/review-pre-visit-setup.component.ts
@@ -5,9 +5,10 @@ import { IdbCompany } from 'src/app/models/company';
 import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
 import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
 import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
-import { SetupWizardService } from '../../setup-wizard.service';
 import { Subscription } from 'rxjs';
 import { SharedDataService } from 'src/app/shared/shared-services/shared-data.service';
+import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
+import { IdbFacility } from 'src/app/models/facility';
 
 @Component({
   selector: 'app-review-pre-visit-setup',
@@ -26,7 +27,8 @@ export class ReviewPreVisitSetupComponent {
   printSub: Subscription;
   constructor(private router: Router, private onSiteVisitIdbService: OnSiteVisitIdbService,
     private companyIdbService: CompanyIdbService,
-    private sharedDataService: SharedDataService
+    private sharedDataService: SharedDataService,
+    private facilityIdbService: FacilityIdbService
   ) {
   }
 
@@ -48,12 +50,23 @@ export class ReviewPreVisitSetupComponent {
     this.printSub.unsubscribe();
   }
 
-  goBack() {
+  async goBack() {
+    let facility: IdbFacility = this.facilityIdbService.selectedFacility.getValue();
+    if(!facility.sidebarOpen){
+      facility.sidebarOpen = true;
+      facility.sidebarPreAssessmentOpen = true;
+      await this.facilityIdbService.asyncUpdate(facility);
+    }
     let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
-    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/pre-assessment');
+    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/facility-pre-assessment');
   }
 
-  continue() {
+  async continue() {
+    let facility: IdbFacility = this.facilityIdbService.selectedFacility.getValue();
+    if(facility.sidebarOpen){
+      facility.sidebarOpen = false;
+      await this.facilityIdbService.asyncUpdate(facility);
+    }
     let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
     if(onSiteVisit.assessmentIds.length > 0){
       this.router.navigateByUrl('setup-wizard/data-collection/' + onSiteVisit.guid + '/assessment/' + onSiteVisit.assessmentIds[0]);
diff --git a/src/app/setup-wizard/setup-wizard-sidebar/nav-item-active.pipe.spec.ts b/src/app/setup-wizard/setup-wizard-sidebar/nav-item-active.pipe.spec.ts
new file mode 100644
index 00000000..0fe25ca7
--- /dev/null
+++ b/src/app/setup-wizard/setup-wizard-sidebar/nav-item-active.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { NavItemActivePipe } from './nav-item-active.pipe';
+
+describe('NavItemActivePipe', () => {
+  it('create an instance', () => {
+    const pipe = new NavItemActivePipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/setup-wizard/setup-wizard-sidebar/nav-item-active.pipe.ts b/src/app/setup-wizard/setup-wizard-sidebar/nav-item-active.pipe.ts
new file mode 100644
index 00000000..75b36df7
--- /dev/null
+++ b/src/app/setup-wizard/setup-wizard-sidebar/nav-item-active.pipe.ts
@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'navItemActive'
+})
+export class NavItemActivePipe implements PipeTransform {
+
+  transform(url: string, checkIncludesUrlSegment: string): undefined | 'section-active' {
+    if (url.includes(checkIncludesUrlSegment)) {
+      return 'section-active';
+    }
+    return undefined;
+  }
+}
diff --git a/src/app/setup-wizard/setup-wizard-sidebar/setup-wizard-sidebar.component.css b/src/app/setup-wizard/setup-wizard-sidebar/setup-wizard-sidebar.component.css
index 7cc785df..f35f056c 100644
--- a/src/app/setup-wizard/setup-wizard-sidebar/setup-wizard-sidebar.component.css
+++ b/src/app/setup-wizard/setup-wizard-sidebar/setup-wizard-sidebar.component.css
@@ -38,24 +38,24 @@ a.nav-link, .btn.btn-dark, .link-section-heading{
 
 
 /* Small devices (landscape phones, 576px and up) */
-@media (min-width: 576px) {
+/* @media (min-width: 576px) {
     .nav-item {
         font-size: small;
     }
-}
+} */
 
 /* Medium devices (tablets, 768px and up) */
-@media (min-width: 768px) {
+/* @media (min-width: 768px) {
     .nav-item {
         font-size: medium;
     }
-}
+} */
 /* Large devices (tablets, 992px and up) */
-@media (min-width: 992px) {
+/* @media (min-width: 992px) {
     .nav-item {
         font-size: large;
     }
-}
+} */
 
 
 .nav-link {
@@ -76,7 +76,7 @@ a.nav-link, .btn.btn-dark, .link-section-heading{
 }
 
 .nav-link:hover {
-    background-color: #8DABBE;
+    background-color: #9ec5de;
     color: black;
 }
 
@@ -100,3 +100,27 @@ a.nav-link, .btn.btn-dark, .link-section-heading{
 .nav-link:hover {
     cursor: pointer;
 }
+
+/*NEW*/
+.sidebar-section {
+    border-left: groove 1px black;
+    padding-left: .25rem;
+    margin-left: .5rem;
+    margin-bottom: .25rem;
+}
+
+hr.spacer{
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+    margin-left: .5rem;
+    margin-right: .5rem;
+    border: dashed 1px black;
+}
+
+.sidebar-section.first-section{
+    margin-right: .5rem;
+}
+
+.nav-link.section-active{
+    background-color: #9ec5de;
+}
\ No newline at end of file
diff --git a/src/app/setup-wizard/setup-wizard-sidebar/setup-wizard-sidebar.component.html b/src/app/setup-wizard/setup-wizard-sidebar/setup-wizard-sidebar.component.html
index ce268f15..453e82d1 100644
--- a/src/app/setup-wizard/setup-wizard-sidebar/setup-wizard-sidebar.component.html
+++ b/src/app/setup-wizard/setup-wizard-sidebar/setup-wizard-sidebar.component.html
@@ -4,159 +4,279 @@
     <div class="ps-1 pe-1 w-100 pb-2">
         <div class="text-end toggle-collapse">
             <a class="click-link" (click)="toggleSidebar()">
-                <fa-icon *ngIf="!sidebarOpen" [icon]="faChevronRight"></fa-icon>
-                <fa-icon *ngIf="sidebarOpen" [icon]="faChevronLeft"></fa-icon>
+                <fa-icon *ngIf="!sidebarOpen" [icon]="faChevronCircleRight"></fa-icon>
+                <fa-icon *ngIf="sidebarOpen" [icon]="faChevronCircleLeft"></fa-icon>
             </a>
         </div>
     </div>
     <ng-container *ngIf="onSiteVisit">
-        <div class="ps-1 pe-1 w-100 sidebar-content" [hidden]="!sidebarOpen">
-            <button class="btn btn-dark w-100 text-left" (click)="toggleCollapsePrevisit()">
-                <fa-icon [icon]="faChevronDown" class="pe-1" *ngIf="collapsePreVisit"></fa-icon>
-                <fa-icon [icon]="faChevronUp" class="pe-1" *ngIf="!collapsePreVisit"></fa-icon>
-                Pre-Visit
-            </button>
-            <div [ngClass]="{'collapse': collapsePreVisit}">
-                <div class="nav-item ps-2 link-section-heading">
-                    Company Setup
-                </div>
-                <div class="nav-item">
-                    <a class="nav-link secondary-nav" [routerLink]="'pre-visit/'+onSiteVisit.guid+'/company-setup'"
-                        [routerLinkActive]="['active']">
-                        General Details
-                    </a>
-                </div>
-                <div class="nav-item">
-                    <a class="nav-link secondary-nav" [routerLink]="'pre-visit/'+onSiteVisit.guid+'/company-contacts'"
-                        [routerLinkActive]="['active']">
-                        Stakeholder Contacts
-                    </a>
-                </div>
-                <div class="nav-item ps-2 link-section-heading">
-                    Facility Setup
-                </div>
-                <div class="nav-item">
-                    <a class="nav-link secondary-nav" [routerLink]="'pre-visit/'+onSiteVisit.guid+'/facility-setup'"
-                        [routerLinkActive]="['active']">
-                        General Details
-                    </a>
-                </div>
+        <div class="ps-1 w-100" [hidden]="!sidebarOpen">
+
+            <div class="nav-item">
+                <a class="nav-link" (click)="toggleCollapsePrevisit()"
+                    [ngClass]="routerUrl | navItemActive:'pre-visit'">
+                    <fa-icon class="toggle" [icon]="collapsePreVisit ? faChevronRight : faChevronDown"></fa-icon>
+                    Pre-Visit
+                </a>
+            </div>
+            <div class="sidebar-section first-section" *ngIf="!collapsePreVisit">
                 <div class="nav-item">
-                    <a class="nav-link secondary-nav" [routerLink]="'pre-visit/'+onSiteVisit.guid+'/kpi-select'"
-                        [routerLinkActive]="['active']">
-                        Select KPIs
+                    <a class="nav-link" (click)="toggleCollapseCompany()"
+                        [ngClass]="routerUrl | navItemActive:'company'">
+                        <fa-icon class="toggle" [icon]="company.sidebarOpen ? faChevronDown : faChevronRight"></fa-icon>
+                        Company Setup
                     </a>
                 </div>
+                <div class="sidebar-section" *ngIf="company.sidebarOpen">
+                    <div class="nav-item">
+                        <a class="nav-link" [routerLink]="'pre-visit/'+onSiteVisit.guid+'/company-setup'"
+                            [routerLinkActive]="['active']">
+                            <fa-icon [icon]="faGear"></fa-icon>
+                            General Details
+                        </a>
+                    </div>
+                    <div class="nav-item">
+                        <a class="nav-link" (click)="toggleContactsOpen()"
+                            [ngClass]="routerUrl | navItemActive:'contacts'">
+                            <fa-icon class="toggle"
+                                [icon]="company.sidebarContactsOpen ? faChevronDown : faChevronRight"></fa-icon>
+                            Stakeholder Contacts
+                        </a>
+                    </div>
+                    <div class="sidebar-section" *ngIf="company.sidebarContactsOpen">
+                        <div class="nav-item">
+                            <a class="nav-link" [routerLink]="'pre-visit/'+onSiteVisit.guid+'/company-contacts'"
+                                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">
+                                <fa-icon [icon]="faAddressBook"></fa-icon>
+                                View All Contacts
+                            </a>
+                        </div>
+                        <div class="nav-item"
+                            *ngFor="let contact of company.guid | associatedContacts:'company':contacts">
+                            <a class="nav-link"
+                                [routerLink]="'pre-visit/'+onSiteVisit.guid+'/company-contacts/'+contact.guid"
+                                [routerLinkActive]="['active']">
+                                <fa-icon [icon]="faUser"></fa-icon>
+                                {{contact | contactNameDisplay}}
+                            </a>
+                        </div>
 
-                <div class="nav-item" *ngFor="let kpi of (facility.guid | facilityKpiList: keyPerformanceIndicators)">
-                    <a class="nav-link third-nav"
-                        [routerLink]="'pre-visit/'+onSiteVisit.guid+'/kpi-detail/' + kpi.guid"
-                        [routerLinkActive]="['active']">
-                        <span [innerHTML]="kpi.htmlLabel"></span>
-                    </a>
-                </div>
-                <div class="nav-item">
-                    <a class="nav-link secondary-nav" [routerLink]="'pre-visit/'+onSiteVisit.guid+'/energy-equipment'"
-                        [routerLinkActive]="['active']">
-                        Industrial System Inventory
-                    </a>
+                    </div>
                 </div>
                 <div class="nav-item">
-                    <a class="nav-link secondary-nav" [routerLink]="'pre-visit/'+onSiteVisit.guid+'/end-uses'"
-                        [routerLinkActive]="['active']">
-                        End Use Inventory
+                    <a class="nav-link" (click)="toggleCollapseFacility()"
+                        [ngClass]="routerUrl | navItemActive:'facility'">
+                        <fa-icon class="toggle"
+                            [icon]="facility.sidebarOpen ? faChevronDown : faChevronRight"></fa-icon>
+                        Facility Setup
                     </a>
                 </div>
-                <div class="nav-item">
-                    <a class="nav-link" [routerLink]="'pre-visit/'+onSiteVisit.guid+'/pre-assessment'"
-                        [routerLinkActive]="['active']">
-                        Pre-Assessments
-                    </a>
+                <div class="sidebar-section" *ngIf="facility.sidebarOpen">
+                    <div class="nav-item">
+                        <a class="nav-link" [routerLink]="'pre-visit/'+onSiteVisit.guid+'/facility-setup'"
+                            [routerLinkActive]="['active']">
+                            <fa-icon [icon]="faGear"></fa-icon>
+                            General Details
+                        </a>
+                    </div>
+                    <div class="nav-item">
+                        <a class="nav-link" (click)="toggleKPIsOpen()" [ngClass]="routerUrl | navItemActive:'kpi'">
+                            <fa-icon class="toggle"
+                                [icon]="facility.sidebarKPIsOpen ? faChevronDown : faChevronRight"></fa-icon>
+                            Key Performance Indicators
+                        </a>
+                    </div>
+                    <div class="sidebar-section" *ngIf="facility.sidebarKPIsOpen">
+                        <div class="nav-item">
+                            <a class="nav-link" [routerLink]="'pre-visit/'+onSiteVisit.guid+'/facility-kpi-select'"
+                                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">
+                                <fa-icon [icon]="faMagnifyingGlassPlus"></fa-icon>
+                                Select KPIs
+                            </a>
+                        </div>
+                        <div class="nav-item"
+                            *ngFor="let kpi of (facility.guid | facilityKpiList: keyPerformanceIndicators)">
+                            <a class="nav-link"
+                                [routerLink]="'pre-visit/'+onSiteVisit.guid+'/facility-kpi-detail/' + kpi.guid"
+                                [routerLinkActive]="['active']">
+                                <fa-icon [icon]="faBullseye" class="pe-1"></fa-icon>
+                                <span [innerHTML]="kpi.htmlLabel"></span>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="nav-item">
+                        <a class="nav-link" (click)="toggleSystemInventoryOpen()"
+                            [ngClass]="routerUrl | navItemActive:'energy-equipment'">
+                            <fa-icon class="toggle"
+                                [icon]="facility.sidebarSystemInventoryOpen ? faChevronDown : faChevronRight"></fa-icon>
+                            Industrial System Inventory
+                        </a>
+                    </div>
+                    <div class="sidebar-section" *ngIf="facility.sidebarSystemInventoryOpen">
+                        <div class="nav-item">
+                            <a class="nav-link"
+                                [routerLink]="'pre-visit/'+onSiteVisit.guid+'/facility-energy-equipment'"
+                                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">
+                                <fa-icon [icon]="faList"></fa-icon>
+                                View Inventory
+                            </a>
+                        </div>
+                        <div class="nav-item"
+                            *ngFor="let energyEquipment of (facility.guid | energyEquipmentList:'facility':energyEquipments)">
+                            <a class="nav-link"
+                                [routerLink]="'pre-visit/'+onSiteVisit.guid+'/facility-energy-equipment/' + energyEquipment.guid"
+                                [routerLinkActive]="['active']">
+                                <fa-icon [icon]="faCube" class="pe-1"></fa-icon>
+                                {{energyEquipment.equipmentName}}
+                            </a>
+                        </div>
+                    </div>
+
+                    <div class="nav-item">
+                        <a class="nav-link" (click)="toggleEndUseInventoryOpen()"
+                            [ngClass]="routerUrl | navItemActive:'end-uses'">
+                            <fa-icon class="toggle"
+                                [icon]="facility.sidebarEndUseInventoryOpen ? faChevronDown : faChevronRight"></fa-icon>
+                            End Use Inventory
+                        </a>
+                    </div>
+                    <div class="sidebar-section" *ngIf="facility.sidebarEndUseInventoryOpen">
+                        <div class="nav-item">
+                            <a class="nav-link" [routerLink]="'pre-visit/'+onSiteVisit.guid+'/facility-end-uses'"
+                                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">
+                                <fa-icon [icon]="faList"></fa-icon>
+                                View Inventory
+                            </a>
+                        </div>
+                        <div class="nav-item"
+                            *ngFor="let energyEquipment of (facility.guid | processEquipmentList:'facility':processEquipments)">
+                            <a class="nav-link"
+                                [routerLink]="'pre-visit/'+onSiteVisit.guid+'/facility-end-uses/' + energyEquipment.guid"
+                                [routerLinkActive]="['active']">
+                                <fa-icon [icon]="faSplotch" class="pe-1"></fa-icon>
+                                {{energyEquipment.equipmentName}}
+                            </a>
+                        </div>
+                    </div>
+
+
+
+
+                    <div class="nav-item">
+                        <a class="nav-link" (click)="togglePreAssessmentOpen()"
+                            [ngClass]="routerUrl | navItemActive:'pre-assessment'">
+                            <fa-icon class="toggle"
+                                [icon]="facility.sidebarPreAssessmentOpen ? faChevronDown : faChevronRight"></fa-icon>
+                            Pre-Assessments
+                        </a>
+                    </div>
+                    <div class="sidebar-section" *ngIf="facility.sidebarPreAssessmentOpen">
+                        <div class="nav-item">
+                            <a class="nav-link" [routerLink]="'pre-visit/'+onSiteVisit.guid+'/facility-pre-assessment'"
+                                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">
+                                <fa-icon [icon]="faList"></fa-icon>
+                                View Assessments
+                            </a>
+                        </div>
+                        <div class="nav-item" *ngFor="let assessmentGuid of onSiteVisit.assessmentIds">
+                            <a class="nav-link"
+                                [routerLink]="'pre-visit/'+onSiteVisit.guid+'/facility-pre-assessment/' + assessmentGuid"
+                                [routerLinkActive]="['active']">
+                                <fa-icon [icon]="faScrewdriverWrench" class="pe-1"></fa-icon>
+                                {{assessmentGuid | assessmentNameDisplay: assessments}}
+                            </a>
+                        </div>
+                    </div>
                 </div>
+
                 <div class="nav-item">
                     <a class="nav-link" [routerLink]="'pre-visit/'+onSiteVisit.guid+'/review-pre-visit'"
                         routerLink="review-pre-visit" [routerLinkActive]="['active']">
+                        <fa-icon [icon]="faFileCircleCheck" class="pe-1"></fa-icon>
                         Review Pre-Visit
                     </a>
                 </div>
             </div>
-        </div>
-        <div class="p-2 w-100 sidebar-content">
-            <hr class="my-1">
-        </div>
-
-        <div class="ps-1 pe-1 w-100 sidebar-content" [hidden]="!sidebarOpen">
-            <button class="btn btn-dark w-100 text-left" (click)="toggleCollapseDataCollection()">
-                <fa-icon [icon]="faChevronDown" class="pe-1" *ngIf="collapseDataCollection"></fa-icon>
-                <fa-icon [icon]="faChevronUp" class="pe-1" *ngIf="!collapseDataCollection"></fa-icon>
-                Data Collection
-            </button>
-            <div [ngClass]="{'collapse': collapseDataCollection}">
+            <div class="w-100">
+                <hr class="spacer">
+            </div>
+            <div class="nav-item">
+                <a class="nav-link" (click)="toggleCollapseDataCollection()"
+                    [ngClass]="routerUrl | navItemActive:'data-collection'">
+                    <fa-icon class="toggle" [icon]="collapseDataCollection ? faChevronRight : faChevronDown"></fa-icon>
+                    Data Collection
+                </a>
+            </div>
+            <div class="sidebar-section" *ngIf="!collapseDataCollection">
                 <div class="nav-item">
                     <a class="nav-link" [routerLink]="'data-collection/'+onSiteVisit.guid+'/manage-assessments/'"
                         [routerLinkActive]="['active']">
+                        <fa-icon [icon]="faList"></fa-icon>
                         Manage Assessments
                     </a>
                 </div>
                 <ng-container *ngFor="let assessmentGuid of onSiteVisit.assessmentIds">
+                    @let assessment = (assessmentGuid | assessmentItem: assessments);
+
                     <div class="nav-item">
-                        <a class="nav-link"
-                            [routerLink]="'data-collection/'+onSiteVisit.guid+'/assessment/'+assessmentGuid"
-                            [routerLinkActive]="['active']">
-                            {{assessmentGuid | assessmentNameDisplay: assessments}}
-                        </a>
-                    </div>
-                    <div class="nav-item">
-                        <a class="nav-link secondary-nav"
-                            [routerLink]="'data-collection/'+onSiteVisit.guid+'/assessment/'+assessmentGuid+'/details'"
-                            [routerLinkActive]="['active']">
-                            Details
-                        </a>
-                    </div>
-                    <div class="nav-item">
-                        <a class="nav-link secondary-nav"
-                            [routerLink]="'data-collection/'+onSiteVisit.guid+'/assessment/'+assessmentGuid+'/energy-opportunities'"
-                            [routerLinkActive]="['active']">
-                            Energy Efficiency Opportunities
-                        </a>
-                    </div>
-                    <div class="nav-item">
-                        <a class="nav-link secondary-nav"
-                            [routerLink]="'data-collection/'+onSiteVisit.guid+'/assessment/'+assessmentGuid+'/nebs'"
-                            [routerLinkActive]="['active']">
-                            NEBs
+                        <a class="nav-link" (click)="toggleAssessmentSidebarOpen(assessment)"
+                            [ngClass]="routerUrl | navItemActive:'/assessment/'+assessmentGuid">
+                            <fa-icon class="toggle"
+                                [icon]="assessment.sidebarOpen ? faChevronDown : faChevronRight"></fa-icon>
+                            {{assessment.name}}
                         </a>
                     </div>
-                    <div class="nav-item">
-                        <a class="nav-link secondary-nav"
-                            [routerLink]="'data-collection/'+onSiteVisit.guid+'/assessment/'+assessmentGuid+'/results'"
-                            [routerLinkActive]="['active']">
-                            Results
-                        </a>
+                    <div class="sidebar-section" *ngIf="assessment.sidebarOpen">
+                        <div class="nav-item">
+                            <a class="nav-link"
+                                [routerLink]="'data-collection/'+onSiteVisit.guid+'/assessment/'+assessmentGuid+'/details'"
+                                [routerLinkActive]="['active']">
+                                <fa-icon [icon]="faScrewdriverWrench"></fa-icon>
+                                Details
+                            </a>
+                        </div>
+                        <div class="nav-item">
+                            <a class="nav-link"
+                                [routerLink]="'data-collection/'+onSiteVisit.guid+'/assessment/'+assessmentGuid+'/energy-opportunities'"
+                                [routerLinkActive]="['active']">
+                                <fa-icon [icon]="faFileLines"></fa-icon>
+                                Energy Efficiency Opportunities
+                            </a>
+                        </div>
+                        <div class="nav-item">
+                            <a class="nav-link"
+                                [routerLink]="'data-collection/'+onSiteVisit.guid+'/assessment/'+assessmentGuid+'/nebs'"
+                                [routerLinkActive]="['active']">
+                                <fa-icon [icon]="faWeightHanging"></fa-icon>
+                                NEBs
+                            </a>
+                        </div>
+                        <div class="nav-item">
+                            <a class="nav-link"
+                                [routerLink]="'data-collection/'+onSiteVisit.guid+'/assessment/'+assessmentGuid+'/results'"
+                                [routerLinkActive]="['active']">
+                                <fa-icon [icon]="faChartPie"></fa-icon>
+                                Results
+                            </a>
+                        </div>
                     </div>
                 </ng-container>
-                <!--TODO: Issue #226-->
-                <!-- <div class="nav-item">
-                    <a class="nav-link" [routerLink]="'data-collection/'+onSiteVisit.guid+'/review-data-collection'"
-                        [routerLinkActive]="['active']">
-                        Preliminary Results
-                    </a>
-                </div> -->
             </div>
-            <div class="p-2 w-100">
-                <hr class="my-1">
+            <div class="w-100">
+                <hr class="spacer">
             </div>
-        </div>
-        <div class="ps-1 pe-1 w-100 sidebar-content" [hidden]="!sidebarOpen">
-            <button class="btn btn-dark w-100 text-left" (click)="toggleCollapseDataEvaluation()">
-                <fa-icon [icon]="faChevronDown" class="pe-1" *ngIf="collapseDataEvaluation"></fa-icon>
-                <fa-icon [icon]="faChevronUp" class="pe-1" *ngIf="!collapseDataEvaluation"></fa-icon>
-                Data Evaluation
-            </button>
-            <div [ngClass]="{'collapse': collapseDataEvaluation}">
+            <div class="nav-item">
+                <a class="nav-link" (click)="toggleCollapseDataEvaluation()"
+                    [ngClass]="routerUrl | navItemActive:'data-evaluation'">
+                    <fa-icon class="toggle" [icon]="collapseDataEvaluation ? faChevronRight : faChevronDown"></fa-icon>
+                    Data Evaluation
+                </a>
+            </div>
+            <div class="sidebar-section" *ngIf="!collapseDataEvaluation">
                 <div class="nav-item">
                     <a class="nav-link" [routerLink]="'data-evaluation/'+onSiteVisit.guid+'/follow-up'"
                         [routerLinkActive]="['active']">
+                        <fa-icon [icon]="faPersonWalkingArrowLoopLeft"></fa-icon>
                         Follow-up
                     </a>
                 </div>
@@ -165,6 +285,7 @@
                         <a class="nav-link"
                             [routerLink]="'data-evaluation/'+onSiteVisit.guid+'/assessment-report/'+assessmentGuid"
                             [routerLinkActive]="['active']">
+                            <fa-icon [icon]="faChartPie"></fa-icon>
                             {{assessmentGuid | assessmentNameDisplay: assessments}} Report
                         </a>
                     </div>
@@ -172,22 +293,27 @@
                 <div class="nav-item">
                     <a class="nav-link" [routerLink]="'data-evaluation/'+onSiteVisit.guid+'/visit-report'"
                         [routerLinkActive]="['active']">
+                        <fa-icon [icon]="faChartColumn"></fa-icon>
                         Rollup Report
                     </a>
                 </div>
             </div>
-            <div class="p-2 w-100">
-                <hr class="my-1">
+
+
+            <div class="w-100">
+                <hr class="spacer">
+            </div>
+            <div class="nav-item">
+                <a class="nav-link bold" (click)="openStartOverModal()">
+                    <fa-icon [icon]="faFolderOpen"></fa-icon>
+                    Return to Portfolio</a>
+            </div>
+
+            <div class="w-100">
+                <hr class="spacer">
             </div>
         </div>
     </ng-container>
-    <div class="ps-1 pe-1 w-100 sidebar-content" [hidden]="!sidebarOpen">
-        <div class="nav-item">
-            <a class="nav-link bold" (click)="openStartOverModal()">
-                <fa-icon [icon]="faFolderOpen"></fa-icon>
-                Return to Portfolio</a>
-        </div>
-    </div>
 </div>
 
 <div [ngClass]="{'window-overlay': displayStartOverModal}"></div>
diff --git a/src/app/setup-wizard/setup-wizard-sidebar/setup-wizard-sidebar.component.spec.ts b/src/app/setup-wizard/setup-wizard-sidebar/setup-wizard-sidebar.component.spec.ts
index 2e19eb1e..4a8d759f 100644
--- a/src/app/setup-wizard/setup-wizard-sidebar/setup-wizard-sidebar.component.spec.ts
+++ b/src/app/setup-wizard/setup-wizard-sidebar/setup-wizard-sidebar.component.spec.ts
@@ -3,50 +3,19 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SetupWizardSidebarComponent } from './setup-wizard-sidebar.component';
 import { RouterTestingModule } from '@angular/router/testing';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { SetupWizardService } from '../setup-wizard.service';
-import { BehaviorSubject } from 'rxjs';
-import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
-import { AssessmentIdbService } from 'src/app/indexed-db/assessment-idb.service';
-import { IdbAssessment } from 'src/app/models/assessment';
-import { IdbOnSiteVisit, getNewIdbOnSiteVisit } from 'src/app/models/onSiteVisit';
-import { KeyPerformanceIndicatorsIdbService } from 'src/app/indexed-db/key-performance-indicators-idb.service';
-import { IdbKeyPerformanceIndicator } from 'src/app/models/keyPerformanceIndicator';
 import { HelperPipesModule } from 'src/app/shared/helper-pipes/_helper-pipes.module';
-import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
-import { getNewIdbFacility, IdbFacility } from 'src/app/models/facility';
+import { stubServiceProviders } from 'src/app/spec-helpers/spec-test-service-stub';
+import { NavItemActivePipe } from './nav-item-active.pipe';
 
 describe('SetupWizardSidebarComponent', () => {
   let component: SetupWizardSidebarComponent;
   let fixture: ComponentFixture<SetupWizardSidebarComponent>;
 
-  let setupWizardService: Partial<SetupWizardService> = {
-    sidebarOpen: new BehaviorSubject<boolean>(true),
-    helpPanelOpen: new BehaviorSubject<boolean>(true)
-  };
-  let onSiteVisitIdbService: Partial<OnSiteVisitIdbService> = {
-    selectedVisit: new BehaviorSubject<IdbOnSiteVisit>(getNewIdbOnSiteVisit('', '', ''))
-  };
-  let assessmentIdbService: Partial<AssessmentIdbService> = {
-    assessments: new BehaviorSubject<Array<IdbAssessment>>([])
-  };
-  let facilityIdbService: Partial<FacilityIdbService> = {
-    selectedFacility: new BehaviorSubject<IdbFacility>(getNewIdbFacility('', ''))
-  };
-  let keyPerformanceIndicatorService: Partial<KeyPerformanceIndicatorsIdbService> = {
-    keyPerformanceIndicators: new BehaviorSubject<Array<IdbKeyPerformanceIndicator>>([])
-  };
-
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [RouterTestingModule, FontAwesomeModule, HelperPipesModule],
-      declarations: [SetupWizardSidebarComponent],
-      providers: [
-        { provide: SetupWizardService, useValue: setupWizardService },
-        { provide: OnSiteVisitIdbService, useValue: onSiteVisitIdbService },
-        { provide: AssessmentIdbService, useValue: assessmentIdbService },
-        { provide: KeyPerformanceIndicatorsIdbService, useValue: keyPerformanceIndicatorService },
-        { provide: FacilityIdbService, useValue: facilityIdbService },
-      ]
+      declarations: [SetupWizardSidebarComponent, NavItemActivePipe],
+      providers: stubServiceProviders
     })
       .compileComponents();
 
diff --git a/src/app/setup-wizard/setup-wizard-sidebar/setup-wizard-sidebar.component.ts b/src/app/setup-wizard/setup-wizard-sidebar/setup-wizard-sidebar.component.ts
index f464f530..80144664 100644
--- a/src/app/setup-wizard/setup-wizard-sidebar/setup-wizard-sidebar.component.ts
+++ b/src/app/setup-wizard/setup-wizard-sidebar/setup-wizard-sidebar.component.ts
@@ -1,8 +1,8 @@
 import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
-import { IconDefinition, faChevronDown, faChevronUp, faFolderOpen, faCircleExclamation, faChevronCircleRight, faChevronCircleLeft } from '@fortawesome/free-solid-svg-icons';
+import { IconDefinition, faChevronDown, faFolderOpen, faCircleExclamation, faChevronCircleRight, faChevronCircleLeft, faGear, faChevronRight, faUser, faAddressBook, faMagnifyingGlassPlus, faBullseye, faList, faSplotch, faCube, faFileCircleCheck, faScrewdriverWrench, faFileLines, faWeightHanging, faChartPie, faPersonWalkingArrowLoopLeft, faChartColumn } from '@fortawesome/free-solid-svg-icons';
 import { SetupWizardService } from '../setup-wizard.service';
-import { Subscription } from 'rxjs';
+import { firstValueFrom, Subscription } from 'rxjs';
 import { IdbAssessment } from 'src/app/models/assessment';
 import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
 import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
@@ -11,6 +11,14 @@ import { KeyPerformanceIndicatorsIdbService } from 'src/app/indexed-db/key-perfo
 import { IdbKeyPerformanceIndicator } from 'src/app/models/keyPerformanceIndicator';
 import { IdbFacility } from 'src/app/models/facility';
 import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
+import { IdbCompany } from 'src/app/models/company';
+import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
+import { IdbContact } from 'src/app/models/contact';
+import { ContactIdbService } from 'src/app/indexed-db/contact-idb.service';
+import { EnergyEquipmentIdbService } from 'src/app/indexed-db/energy-equipment-idb.service';
+import { IdbEnergyEquipment } from 'src/app/models/energyEquipment';
+import { IdbProcessEquipment } from 'src/app/models/processEquipment';
+import { ProcessEquipmentIdbService } from 'src/app/indexed-db/process-equipment-idb.service';
 
 @Component({
   selector: 'app-setup-wizard-sidebar',
@@ -24,9 +32,25 @@ export class SetupWizardSidebarComponent implements OnInit, OnDestroy {
   faFolderOpen: IconDefinition = faFolderOpen;
   faCircleExclamation: IconDefinition = faCircleExclamation;
   faChevronDown: IconDefinition = faChevronDown;
-  faChevronUp: IconDefinition = faChevronUp;
-  faChevronRight: IconDefinition = faChevronCircleRight;
-  faChevronLeft: IconDefinition = faChevronCircleLeft;
+  faChevronRight: IconDefinition = faChevronRight;
+
+  faChevronCircleRight: IconDefinition = faChevronCircleRight;
+  faChevronCircleLeft: IconDefinition = faChevronCircleLeft;
+  faGear: IconDefinition = faGear;
+  faUser: IconDefinition = faUser;
+  faAddressBook: IconDefinition = faAddressBook;
+  faMagnifyingGlassPlus: IconDefinition = faMagnifyingGlassPlus;
+  faBullseye: IconDefinition = faBullseye;
+  faList: IconDefinition = faList;
+  faCube: IconDefinition = faCube;
+  faSplotch: IconDefinition = faSplotch;
+  faFileCircleCheck: IconDefinition = faFileCircleCheck;
+  faScrewdriverWrench: IconDefinition = faScrewdriverWrench;
+  faFileLines: IconDefinition = faFileLines;
+  faWeightHanging: IconDefinition = faWeightHanging;
+  faChartPie: IconDefinition = faChartPie;
+  faPersonWalkingArrowLoopLeft: IconDefinition = faPersonWalkingArrowLoopLeft;
+  faChartColumn: IconDefinition = faChartColumn;
 
   displayStartOverModal: boolean;
 
@@ -41,6 +65,7 @@ export class SetupWizardSidebarComponent implements OnInit, OnDestroy {
 
   facilitySub: Subscription;
   facility: IdbFacility;
+
   keyPerformanceIndicators: Array<IdbKeyPerformanceIndicator>;
   keyPerformanceIndicatorsSub: Subscription;
 
@@ -50,11 +75,27 @@ export class SetupWizardSidebarComponent implements OnInit, OnDestroy {
 
   routerSub: Subscription;
 
+  company: IdbCompany;
+  companySub: Subscription;
+
+  contacts: Array<IdbContact>;
+  contactsSub: Subscription;
+
+  energyEquipmentsSub: Subscription;
+  energyEquipments: Array<IdbEnergyEquipment>;
+
+  processEquipments: Array<IdbProcessEquipment>;
+  processEquipmentSub: Subscription;
+  routerUrl: string;
   constructor(private router: Router, private setupWizardService: SetupWizardService,
     private onSiteVisitIdbService: OnSiteVisitIdbService,
     private assessmentIdbService: AssessmentIdbService,
     private facilityIdbService: FacilityIdbService,
-    private keyPerformanceIndicatorIdbService: KeyPerformanceIndicatorsIdbService
+    private keyPerformanceIndicatorIdbService: KeyPerformanceIndicatorsIdbService,
+    private companyIdbService: CompanyIdbService,
+    private contactIdbService: ContactIdbService,
+    private energyEquipmentIdbService: EnergyEquipmentIdbService,
+    private processEquipmentIdbService: ProcessEquipmentIdbService
   ) {
 
   }
@@ -90,6 +131,20 @@ export class SetupWizardSidebarComponent implements OnInit, OnDestroy {
     this.keyPerformanceIndicatorsSub = this.keyPerformanceIndicatorIdbService.keyPerformanceIndicators.subscribe(_keyPerformanceIndicators => {
       this.keyPerformanceIndicators = _keyPerformanceIndicators;
     });
+
+    this.companySub = this.companyIdbService.selectedCompany.subscribe(val => {
+      this.company = val;
+    });
+    this.contactsSub = this.contactIdbService.contacts.subscribe(contacts => {
+      this.contacts = contacts;
+    });
+
+    this.energyEquipmentsSub = this.energyEquipmentIdbService.energyEquipments.subscribe(energyEquipments => {
+      this.energyEquipments = energyEquipments;
+    });
+    this.processEquipmentSub = this.processEquipmentIdbService.processEquipments.subscribe(equipments => {
+      this.processEquipments = equipments;
+    })
   }
 
   ngOnDestroy() {
@@ -99,9 +154,14 @@ export class SetupWizardSidebarComponent implements OnInit, OnDestroy {
     this.facilitySub.unsubscribe();
     this.keyPerformanceIndicatorsSub.unsubscribe();
     this.routerSub.unsubscribe();
+    this.companySub.unsubscribe();
+    this.contactsSub.unsubscribe();
+    this.energyEquipmentsSub.unsubscribe();
+    this.processEquipmentSub.unsubscribe();
   }
 
   setDisplaySidebar() {
+    this.routerUrl = this.router.url;
     this.checkCollapsePrevisit();
     this.checkCollapseDataCollection();
     this.checkCollapseDataEvaluation();
@@ -162,4 +222,57 @@ export class SetupWizardSidebarComponent implements OnInit, OnDestroy {
     }
   }
 
+  async toggleCollapseCompany() {
+    this.company.sidebarOpen = !this.company.sidebarOpen;
+    await firstValueFrom(this.companyIdbService.updateWithObservable(this.company));
+    await this.companyIdbService.setCompanies();
+    this.companyIdbService.selectedCompany.next(this.company);
+  }
+
+  async toggleContactsOpen() {
+    this.company.sidebarContactsOpen = !this.company.sidebarContactsOpen;
+    await firstValueFrom(this.companyIdbService.updateWithObservable(this.company));
+    await this.companyIdbService.setCompanies();
+    this.companyIdbService.selectedCompany.next(this.company);
+  }
+
+  async toggleCollapseFacility() {
+    this.facility.sidebarOpen = !this.facility.sidebarOpen;
+    await firstValueFrom(this.facilityIdbService.updateWithObservable(this.facility));
+    await this.facilityIdbService.setFacilities();
+    this.facilityIdbService.selectedFacility.next(this.facility);
+  }
+
+  async toggleKPIsOpen() {
+    this.facility.sidebarKPIsOpen = !this.facility.sidebarKPIsOpen;
+    await firstValueFrom(this.facilityIdbService.updateWithObservable(this.facility));
+    await this.facilityIdbService.setFacilities();
+    this.facilityIdbService.selectedFacility.next(this.facility);
+  }
+  async toggleSystemInventoryOpen() {
+    this.facility.sidebarSystemInventoryOpen = !this.facility.sidebarSystemInventoryOpen;
+    await firstValueFrom(this.facilityIdbService.updateWithObservable(this.facility));
+    await this.facilityIdbService.setFacilities();
+    this.facilityIdbService.selectedFacility.next(this.facility);
+  }
+
+  async toggleEndUseInventoryOpen() {
+    this.facility.sidebarEndUseInventoryOpen = !this.facility.sidebarEndUseInventoryOpen;
+    await firstValueFrom(this.facilityIdbService.updateWithObservable(this.facility));
+    await this.facilityIdbService.setFacilities();
+    this.facilityIdbService.selectedFacility.next(this.facility);
+  }
+
+  async togglePreAssessmentOpen() {
+    this.facility.sidebarPreAssessmentOpen = !this.facility.sidebarPreAssessmentOpen;
+    await firstValueFrom(this.facilityIdbService.updateWithObservable(this.facility));
+    await this.facilityIdbService.setFacilities();
+    this.facilityIdbService.selectedFacility.next(this.facility);
+  }
+
+  async toggleAssessmentSidebarOpen(assessment: IdbAssessment) {
+    assessment.sidebarOpen = !assessment.sidebarOpen;
+    await firstValueFrom(this.assessmentIdbService.updateWithObservable(assessment));
+    await this.assessmentIdbService.setAssessments();
+  }
 }
diff --git a/src/app/setup-wizard/setup-wizard.component.html b/src/app/setup-wizard/setup-wizard.component.html
index f0a84665..b52a1673 100644
--- a/src/app/setup-wizard/setup-wizard.component.html
+++ b/src/app/setup-wizard/setup-wizard.component.html
@@ -1,12 +1,13 @@
-<div (mousemove)="drag($event)" (mouseup)="stopResizing($event)" #pageContent (mouseleave)="stopResizing($event)"
-    [ngClass]="{'d-flex w-100 h-100': !print}">
+<div (mousemove)="dragMouse($event)" (mouseup)="stopResizing()" (touchmove)="dragTouch($event)"
+    (touchend)="stopResizing()" #pageContent (mouseleave)="stopResizing()" [ngClass]="{'d-flex w-100 h-100': !print}">
     <ng-container *ngIf="!print">
         <div class="d-flex" [ngStyle]="{'width.px': sidebarWidth}">
             <div class="w-100">
                 <app-setup-wizard-sidebar
                     (emitToggleCollapse)="toggleCollapseSidebar($event)"></app-setup-wizard-sidebar>
             </div>
-            <div class="resize-handle pe-1 ps-1" (mousedown)="startResizingSidebar($event)">
+            <div class="resize-handle pe-1 ps-1" (mousedown)="startResizingSidebarMouse($event)"
+                (touchstart)="startResizingSidebarTouch($event)">
                 <div class="h-100 d-flex align-items-center">
                     <div>
                         <fa-icon [icon]="faGripVertical"></fa-icon>
@@ -20,7 +21,8 @@
     </div>
     <ng-container *ngIf="!print">
         <div class="d-flex" [ngStyle]="{'width.px': helpWidth}">
-            <div class="resize-handle ps-1 pe-1" (mousedown)="startResizingHelp($event)">
+            <div class="resize-handle ps-1 pe-1" (mousedown)="startResizingHelpMouse($event)"
+                (touchstart)="startResizingHelpTouch($event)">
                 <div class="h-100 d-flex align-items-center">
                     <div>
                         <fa-icon class="mt-auto" [icon]="faGripVertical"></fa-icon>
@@ -34,9 +36,6 @@
         </div>
     </ng-container>
 </div>
-
-
-
 <app-contact-modal *ngIf="displayContactModal" (emitCancelContact)="closeContactModal()"
     [contextGuid]="displayContactModal.contextGuid" [contactContext]="displayContactModal.context"
     [selectedContact]="displayContactModal.viewContact"
diff --git a/src/app/setup-wizard/setup-wizard.component.spec.ts b/src/app/setup-wizard/setup-wizard.component.spec.ts
index a6f47a7f..ede398ea 100644
--- a/src/app/setup-wizard/setup-wizard.component.spec.ts
+++ b/src/app/setup-wizard/setup-wizard.component.spec.ts
@@ -8,6 +8,7 @@ import { SetupWizardSidebarComponent } from './setup-wizard-sidebar/setup-wizard
 import { SetupWizardHelpPanelComponent } from './setup-wizard-help-panel/setup-wizard-help-panel.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { HelperPipesModule } from '../shared/helper-pipes/_helper-pipes.module';
+import { NavItemActivePipe } from './setup-wizard-sidebar/nav-item-active.pipe';
 
 describe('SetupWizardComponent', () => {
   let component: SetupWizardComponent;
@@ -17,7 +18,7 @@ describe('SetupWizardComponent', () => {
 
     await TestBed.configureTestingModule({
       imports: [RouterTestingModule, ContactModalModule, FontAwesomeModule, HelperPipesModule],
-      declarations: [SetupWizardComponent, SetupWizardSidebarComponent, SetupWizardHelpPanelComponent],
+      declarations: [SetupWizardComponent, SetupWizardSidebarComponent, SetupWizardHelpPanelComponent, NavItemActivePipe],
       providers: stubServiceProviders
     })
       .compileComponents();
diff --git a/src/app/setup-wizard/setup-wizard.component.ts b/src/app/setup-wizard/setup-wizard.component.ts
index 9d4d7244..f33b14ea 100644
--- a/src/app/setup-wizard/setup-wizard.component.ts
+++ b/src/app/setup-wizard/setup-wizard.component.ts
@@ -59,25 +59,45 @@ export class SetupWizardComponent {
     this.sharedDataService.displayContactModal.next(undefined);
   }
 
-  startResizingSidebar(event: MouseEvent): void {
+  startResizingSidebarTouch(event: TouchEvent): void {
+    this.startingCursorX = event.touches[0].clientX;
+    this.isDraggingSidebar = true;
+  }
+
+  startResizingSidebarMouse(event: MouseEvent): void {
     this.startingCursorX = event.clientX;
     this.isDraggingSidebar = true;
   }
 
-  startResizingHelp(event: MouseEvent): void {
+  startResizingHelpTouch(event: TouchEvent): void {
+    this.startingCursorX = event.touches[0].clientX;
+    this.isDraggingHelp = true;
+  }
+
+  startResizingHelpMouse(event: MouseEvent): void {
     this.startingCursorX = event.clientX;
     this.isDraggingHelp = true;
   }
 
-  stopResizing($event: MouseEvent) {
+  stopResizing() {
     this.isDraggingSidebar = false;
     this.isDraggingHelp = false;
+    this.setupWizardService.setHelpWidth(this.helpWidth);
+    this.setupWizardService.setSidebarWidth(this.sidebarWidth);
   }
 
-  drag(event: MouseEvent) {
+  dragTouch(event: TouchEvent) {
+    this.drag(event.touches[0].clientX);
+  }
+
+  dragMouse(event: MouseEvent) {
+    this.drag(event.clientX);
+  }
+
+  drag(clientX: number) {
     if (this.isDraggingSidebar) {
-      if (event.clientX > 50) {
-        this.sidebarWidth = event.clientX;
+      if (clientX > 50) {
+        this.sidebarWidth = clientX;
         this.setupWizardService.sidebarOpen.next(true);
       } else {
         this.sidebarWidth = 50;
@@ -86,7 +106,7 @@ export class SetupWizardComponent {
       this.setContentWidth();
     }
     if (this.isDraggingHelp) {
-      let helpWidth: number = (window.innerWidth - event.clientX)
+      let helpWidth: number = (window.innerWidth - clientX)
       if (helpWidth > 50) {
         this.helpWidth = helpWidth;
         this.setupWizardService.helpPanelOpen.next(true);
@@ -106,6 +126,7 @@ export class SetupWizardComponent {
     } else {
       this.sidebarWidth = 50;
     }
+    this.setupWizardService.setSidebarWidth(this.sidebarWidth);
     this.setContentWidth();
   }
 
@@ -116,14 +137,15 @@ export class SetupWizardComponent {
     } else {
       this.helpWidth = 50;
     }
+    this.setupWizardService.setHelpWidth(this.helpWidth);
     this.setContentWidth();
   }
 
   setContentWidth() {
     let contentWidth: number = (window.innerWidth - this.helpWidth - this.sidebarWidth);
-    if(contentWidth < 600){
+    if (contentWidth < 600) {
       this.contentWidth = 600;
-    }else{
+    } else {
       this.contentWidth = contentWidth;
     }
   }
diff --git a/src/app/setup-wizard/setup-wizard.module.ts b/src/app/setup-wizard/setup-wizard.module.ts
index 73826593..108ca547 100644
--- a/src/app/setup-wizard/setup-wizard.module.ts
+++ b/src/app/setup-wizard/setup-wizard.module.ts
@@ -9,9 +9,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { SharedSettingsFormsModule } from '../shared/shared-settings-forms/shared-settings-forms.module';
 import { HelperPipesModule } from '../shared/helper-pipes/_helper-pipes.module';
 import { SetupWizardSidebarComponent } from './setup-wizard-sidebar/setup-wizard-sidebar.component';
-import { CompanyContactsSetupComponent } from './pre-visit/company-contacts-setup/company-contacts-setup.component';
-import { FacilityProcessEquipmentSetupComponent } from './pre-visit/facility-process-equipment-setup/facility-process-equipment-setup.component';
-import { PreAssessmentSetupComponent } from './pre-visit/pre-assessment-setup/pre-assessment-setup.component';
 import { ReviewPreVisitSetupComponent } from './pre-visit/review-pre-visit-setup/review-pre-visit-setup.component';
 import { ContactModalModule } from '../shared/contact-modal/contact-modal.module';
 import { ReviewOnSiteComponent } from './data-collection/review-on-site/review-on-site.component';
@@ -33,7 +30,6 @@ import { VisitReportComponent } from './data-evaluation/visit-report/visit-repor
 import { ReportsModule } from '../shared/reports/reports.module';
 import { AssessmentEvaluationComponent } from './data-evaluation/assessment-evaluation/assessment-evaluation.component';
 import { OnSiteAssessmentResultsComponent } from './data-collection/on-site-assessment/on-site-assessment-results/on-site-assessment-results.component';
-import { FacilityEnergyEquipmentSetupComponent } from './pre-visit/facility-energy-equipment-setup/facility-energy-equipment-setup.component';
 import { PrimaryKpiBadgeModule } from "../shared/primary-kpi-badge/primary-kpi-badge.module";
 import { SetupWizardHelpPanelModule } from './setup-wizard-help-panel/setup-wizard-help-panel.module';
 import { LabelWithTooltipModule } from '../shared/label-with-tooltip/label-with-tooltip.module';
@@ -42,10 +38,18 @@ import { SharedAssessmentFormsModule } from '../shared/shared-assessment-forms/s
 import { SharedCompanyFormsModule } from "../shared/shared-company-forms/shared-company-forms.module";
 import { SharedFacilityFormsModule } from '../shared/shared-facility-forms/shared-facility-forms.module';
 import { AssessmentEnergyOpportunitiesFormComponent } from './data-collection/on-site-assessment/assessment-energy-opportunities-form/assessment-energy-opportunities-form.component';
-import { CompanyContactsSetupFormComponent } from './pre-visit/company-contacts-setup/company-contacts-setup-form/company-contacts-setup-form.component';
 import { SystemInventorySummaryComponent } from './pre-visit/review-pre-visit-setup/system-inventory-summary/system-inventory-summary.component';
 import { FacilityKpiDetailsComponent } from './pre-visit/facility-kpi-details/facility-kpi-details.component';
 import { FacilityKpiSelectComponent } from './pre-visit/facility-kpi-select/facility-kpi-select.component';
+import { ManageCompanyContactsComponent } from './pre-visit/company-contacts/manage-company-contacts/manage-company-contacts.component';
+import { CompanyContactDetailsFormComponent } from './pre-visit/company-contacts/company-contact-details-form/company-contact-details-form.component';
+import { ManageEnergyEquipmentComponent } from './pre-visit/facility-energy-equipment/manage-energy-equipment/manage-energy-equipment.component';
+import { FacilityEnergyEquipmentFormComponent } from './pre-visit/facility-energy-equipment/facility-energy-equipment-form/facility-energy-equipment-form.component';
+import { ManageProcessEquipmentComponent } from './pre-visit/facility-process-equipment/manage-process-equipment/manage-process-equipment.component';
+import { FacilityProcessEquipmentFormComponent } from './pre-visit/facility-process-equipment/facility-process-equipment-form/facility-process-equipment-form.component';
+import { ManagePreAssessmentsComponent } from './pre-visit/pre-assessments/manage-pre-assessments/manage-pre-assessments.component';
+import { PreAssessmentFormComponent } from './pre-visit/pre-assessments/pre-assessment-form/pre-assessment-form.component';
+import { NavItemActivePipe } from './setup-wizard-sidebar/nav-item-active.pipe';
 
 @NgModule({
   declarations: [
@@ -53,9 +57,6 @@ import { FacilityKpiSelectComponent } from './pre-visit/facility-kpi-select/faci
     CompanySetupComponent,
     FacilitySetupComponent,
     SetupWizardSidebarComponent,
-    CompanyContactsSetupComponent,
-    FacilityProcessEquipmentSetupComponent,
-    PreAssessmentSetupComponent,
     ReviewPreVisitSetupComponent,
     ReviewOnSiteComponent,
     CompanyDetailsSummaryComponent,
@@ -76,10 +77,17 @@ import { FacilityKpiSelectComponent } from './pre-visit/facility-kpi-select/faci
     VisitReportComponent,
     AssessmentEvaluationComponent,
     OnSiteAssessmentResultsComponent,
-    FacilityEnergyEquipmentSetupComponent,
     AssessmentEnergyOpportunitiesFormComponent,
-    CompanyContactsSetupFormComponent,
-    SystemInventorySummaryComponent
+    SystemInventorySummaryComponent,
+    ManageCompanyContactsComponent,
+    CompanyContactDetailsFormComponent,
+    ManageEnergyEquipmentComponent,
+    FacilityEnergyEquipmentFormComponent,
+    ManageProcessEquipmentComponent,
+    FacilityProcessEquipmentFormComponent,
+    ManagePreAssessmentsComponent,
+    PreAssessmentFormComponent,
+    NavItemActivePipe
   ],
   imports: [
     CommonModule,
diff --git a/src/app/setup-wizard/setup-wizard.service.ts b/src/app/setup-wizard/setup-wizard.service.ts
index 4bc33162..1b144033 100644
--- a/src/app/setup-wizard/setup-wizard.service.ts
+++ b/src/app/setup-wizard/setup-wizard.service.ts
@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { LocalStorageService } from 'ngx-webstorage';
 import { BehaviorSubject } from 'rxjs';
 
 @Injectable({
@@ -10,8 +11,36 @@ export class SetupWizardService {
   helpPanelOpen: BehaviorSubject<boolean>;
   helpWidth: number = 200;
   sidebarWidth: number = 200;
-  constructor(  ) {
-    this.sidebarOpen = new BehaviorSubject<boolean>(true);
-    this.helpPanelOpen = new BehaviorSubject<boolean>(false);
+  constructor(private localStorageService: LocalStorageService) {
+    this.helpWidth = this.localStorageService.retrieve("helpWidth");
+    if (!this.helpWidth) {
+      this.helpWidth = 200;
+    }
+    if (this.helpWidth == 50) {
+      this.helpPanelOpen = new BehaviorSubject<boolean>(false);
+    } else {
+      this.helpPanelOpen = new BehaviorSubject<boolean>(true);
+    }
+
+    this.sidebarWidth = this.localStorageService.retrieve("sidebarWidth");
+    if (!this.sidebarWidth) {
+      this.sidebarWidth = 200;
+    }
+    if (this.sidebarWidth == 50) {
+      this.sidebarOpen = new BehaviorSubject<boolean>(false);
+    } else {
+      this.sidebarOpen = new BehaviorSubject<boolean>(true);
+    }
+  }
+
+  setHelpWidth(val: number) {
+    this.helpWidth = val;
+    this.localStorageService.store("helpWidth", val);
   }
+
+  setSidebarWidth(val: number) {
+    this.sidebarWidth = val;
+    this.localStorageService.store("sidebarWidth", val);
+  }
+
 }
\ No newline at end of file
diff --git a/src/app/shared/helper-pipes/_helper-pipes.module.ts b/src/app/shared/helper-pipes/_helper-pipes.module.ts
index b91296dc..ce4ae4f3 100644
--- a/src/app/shared/helper-pipes/_helper-pipes.module.ts
+++ b/src/app/shared/helper-pipes/_helper-pipes.module.ts
@@ -37,6 +37,8 @@ import { AssociatedPerformanceMetricImpactsPipe } from './associated-performance
 import { KpmLabelPipe } from './kpm-label.pipe';
 import { NebTotalSavingsPipe } from './neb-total-savings.pipe';
 import { FacilityKpiListPipe } from './facility-kpi-list.pipe';
+import { ProcessEquipmentListPipe } from './process-equipment-list.pipe';
+import { AssessmentItemPipe } from './assessment-item.pipe';
 
 @NgModule({
   declarations: [
@@ -76,7 +78,9 @@ import { FacilityKpiListPipe } from './facility-kpi-list.pipe';
     AssociatedPerformanceMetricImpactsPipe,
     KpmLabelPipe,
     NebTotalSavingsPipe,
-    FacilityKpiListPipe
+    FacilityKpiListPipe,
+    ProcessEquipmentListPipe,
+    AssessmentItemPipe
   ],
   imports: [
     CommonModule
@@ -118,7 +122,9 @@ import { FacilityKpiListPipe } from './facility-kpi-list.pipe';
     AssociatedPerformanceMetricImpactsPipe,
     KpmLabelPipe,
     NebTotalSavingsPipe,
-    FacilityKpiListPipe
+    FacilityKpiListPipe,
+    ProcessEquipmentListPipe,
+    AssessmentItemPipe
   ]
 })
 export class HelperPipesModule { }
diff --git a/src/app/shared/helper-pipes/assessment-item.pipe.spec.ts b/src/app/shared/helper-pipes/assessment-item.pipe.spec.ts
new file mode 100644
index 00000000..6420541e
--- /dev/null
+++ b/src/app/shared/helper-pipes/assessment-item.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { AssessmentItemPipe } from './assessment-item.pipe';
+
+describe('AssessmentItemPipe', () => {
+  it('create an instance', () => {
+    const pipe = new AssessmentItemPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/helper-pipes/assessment-item.pipe.ts b/src/app/shared/helper-pipes/assessment-item.pipe.ts
new file mode 100644
index 00000000..8be1abc4
--- /dev/null
+++ b/src/app/shared/helper-pipes/assessment-item.pipe.ts
@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { IdbAssessment } from 'src/app/models/assessment';
+
+@Pipe({
+  name: 'assessmentItem'
+})
+export class AssessmentItemPipe implements PipeTransform {
+
+  transform(assessmentGuid: string, assessments: Array<IdbAssessment>): IdbAssessment {
+    return assessments.find(a => {return a.guid == assessmentGuid});
+  }
+
+}
diff --git a/src/app/shared/helper-pipes/process-equipment-list.pipe.spec.ts b/src/app/shared/helper-pipes/process-equipment-list.pipe.spec.ts
new file mode 100644
index 00000000..56039afd
--- /dev/null
+++ b/src/app/shared/helper-pipes/process-equipment-list.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { ProcessEquipmentListPipe } from './process-equipment-list.pipe';
+
+describe('ProcessEquipmentListPipe', () => {
+  it('create an instance', () => {
+    const pipe = new ProcessEquipmentListPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/helper-pipes/process-equipment-list.pipe.ts b/src/app/shared/helper-pipes/process-equipment-list.pipe.ts
new file mode 100644
index 00000000..3cc7b5ca
--- /dev/null
+++ b/src/app/shared/helper-pipes/process-equipment-list.pipe.ts
@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { IdbProcessEquipment } from 'src/app/models/processEquipment';
+
+@Pipe({
+  name: 'processEquipmentList'
+})
+export class ProcessEquipmentListPipe implements PipeTransform {
+
+transform(contextGuid: string, context: 'facility' | 'company', allEquipments: Array<IdbProcessEquipment>): Array<IdbProcessEquipment> {
+    if (context == 'facility') {
+      return allEquipments.filter(equipment => {
+        return equipment.facilityId == contextGuid;
+      });
+    } else if (context == 'company') {
+      return allEquipments.filter(equipment => {
+        return equipment.companyId == contextGuid;
+      });
+    }
+    return [];
+  }
+
+}
diff --git a/src/app/shared/shared-assessment-forms/assessment-details-form/assessment-details-form.component.html b/src/app/shared/shared-assessment-forms/assessment-details-form/assessment-details-form.component.html
index b5fed9a6..468e3251 100644
--- a/src/app/shared/shared-assessment-forms/assessment-details-form/assessment-details-form.component.html
+++ b/src/app/shared/shared-assessment-forms/assessment-details-form/assessment-details-form.component.html
@@ -1,9 +1,14 @@
 <form *ngIf="assessment">
     <div class="row">
-        <label class="col-sm-5 col-form-label" for="assessmentName">Assessment Name</label>
+        <label class="col-sm-5 col-form-label" for="assessmentName">Assessment Name <span
+                class="required-asterisk">*</span></label>
         <div class="col-sm-7">
             <input name="assessmentName" type="text" class="form-control" [(ngModel)]="assessment.name"
-                (input)="saveChanges()" minlength="1" maxlength="42" id="assessmentName" [disabled]="isDisabled">
+                (input)="saveChanges()" minlength="1" maxlength="42" id="assessmentName" [disabled]="isDisabled"
+                required>
+            <div class="alert alert-danger p-1" *ngIf="!assessment.name">
+                Assessment name required.
+            </div>
         </div>
     </div>
 
@@ -128,47 +133,49 @@ <h6>Utility Types</h6>
             {{assessment.cost | currency:'USD':'symbol':'1.0-2'}}
         </div>
     </div>
-
-    <div class="row">
-        <label class="col-sm-5 col-form-label">Assessment
-            Date</label>
-        <div class="col-sm-7">
-            {{assessment.visitDate | date}}
+    <ng-container *ngIf="!inPreAssessment">
+        <div class="row">
+            <label class="col-sm-5 col-form-label">Assessment
+                Date</label>
+            <div class="col-sm-7">
+                {{assessment.visitDate | date}}
+            </div>
         </div>
-    </div>
-    <hr>
-    <div class="row">
-        <label class="col-sm-5 col-form-label" for="implementationCost">Implementation Cost</label>
-        <div class="col-sm-7">
-            <div class="input-group">
-                <input name="implementationCost" type="number" class="form-control"
-                    [(ngModel)]="assessment.implementationCost" (input)="saveChanges()" id="implementationCost"
-                    [disabled]="isDisabled">
-                <span class="input-group-text">&dollar;</span>
+        <hr>
+        <div class="row">
+            <label class="col-sm-5 col-form-label" for="implementationCost">Implementation Cost</label>
+            <div class="col-sm-7">
+                <div class="input-group">
+                    <input name="implementationCost" type="number" class="form-control"
+                        [(ngModel)]="assessment.implementationCost" (input)="saveChanges()" id="implementationCost"
+                        [disabled]="isDisabled">
+                    <span class="input-group-text">&dollar;</span>
+                </div>
             </div>
         </div>
-    </div>
-    <div class="row">
-        <label class="col-sm-5 col-form-label" for="energySavings">Annual Energy Savings</label>
-        <div class="col-sm-7">
-            <div class="input-group">
-                <input name="energySavings" type="number" class="form-control" [(ngModel)]="assessment.energySavings"
-                    (input)="saveChanges()" id="energySavings" [disabled]="isDisabled">
-                <span class="input-group-text" [innerHTML]="numberOfTrackedUtilities === 1?
+        <div class="row">
+            <label class="col-sm-5 col-form-label" for="energySavings">Annual Energy Savings</label>
+            <div class="col-sm-7">
+                <div class="input-group">
+                    <input name="energySavings" type="number" class="form-control"
+                        [(ngModel)]="assessment.energySavings" (input)="saveChanges()" id="energySavings"
+                        [disabled]="isDisabled">
+                    <span class="input-group-text" [innerHTML]="numberOfTrackedUtilities === 1?
                      (trackedEnergyUnit | unitsDisplay) + '/yr': (companyEnergyUnit | unitsDisplay) + '/yr'"></span>
+                </div>
             </div>
         </div>
-    </div>
-    <div class="row">
-        <label class="col-sm-5 col-form-label" for="costSavings">Annual Cost Savings</label>
-        <div class="col-sm-7">
-            <div class="input-group">
-                <input name="costSavings" type="number" class="form-control" [(ngModel)]="assessment.costSavings"
-                    (input)="saveChanges()" id="costSavings" [disabled]="isDisabled">
-                <span class="input-group-text">&dollar;</span>
+        <div class="row">
+            <label class="col-sm-5 col-form-label" for="costSavings">Annual Cost Savings</label>
+            <div class="col-sm-7">
+                <div class="input-group">
+                    <input name="costSavings" type="number" class="form-control" [(ngModel)]="assessment.costSavings"
+                        (input)="saveChanges()" id="costSavings" [disabled]="isDisabled">
+                    <span class="input-group-text">&dollar;</span>
+                </div>
             </div>
         </div>
-    </div>
+    </ng-container>
 </form>
 <hr class="d-md-none d-lg-block">
 <h5>
diff --git a/src/app/shared/shared-assessment-forms/assessment-details-form/assessment-details-form.component.ts b/src/app/shared/shared-assessment-forms/assessment-details-form/assessment-details-form.component.ts
index 11a721cb..3cdddf90 100644
--- a/src/app/shared/shared-assessment-forms/assessment-details-form/assessment-details-form.component.ts
+++ b/src/app/shared/shared-assessment-forms/assessment-details-form/assessment-details-form.component.ts
@@ -32,6 +32,8 @@ import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
 export class AssessmentDetailsFormComponent {
   @Input()
   isDisabled: boolean;
+  @Input()
+  inPreAssessment: boolean;
 
   faPeopleGroup: IconDefinition = faPeopleGroup;
   faUser: IconDefinition = faUser;
diff --git a/src/app/shared/shared-assessment-forms/neb-forms-accordion/neb-setup-form/performance-metric-impact-form/performance-metric-impact-form.component.ts b/src/app/shared/shared-assessment-forms/neb-forms-accordion/neb-setup-form/performance-metric-impact-form/performance-metric-impact-form.component.ts
index 7cc5b2a8..15e4b899 100644
--- a/src/app/shared/shared-assessment-forms/neb-forms-accordion/neb-setup-form/performance-metric-impact-form/performance-metric-impact-form.component.ts
+++ b/src/app/shared/shared-assessment-forms/neb-forms-accordion/neb-setup-form/performance-metric-impact-form/performance-metric-impact-form.component.ts
@@ -105,7 +105,7 @@ export class PerformanceMetricImpactFormComponent {
   goToMetric() {
     this.showDropdownMenu = false;
     let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
-    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/kpi-detail/' + this.keyPerformanceMetricImpact.kpiGuid)
+    this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/facility-kpi-detail/' + this.keyPerformanceMetricImpact.kpiGuid)
   }
 
   async savePerformanceMetric() {
diff --git a/src/app/shared/shared-company-forms/company-contacts-form/company-contacts-form.component.ts b/src/app/shared/shared-company-forms/company-contacts-form/company-contacts-form.component.ts
index 185d5342..2e1e08d8 100644
--- a/src/app/shared/shared-company-forms/company-contacts-form/company-contacts-form.component.ts
+++ b/src/app/shared/shared-company-forms/company-contacts-form/company-contacts-form.component.ts
@@ -16,9 +16,6 @@ import { ToastNotificationsService } from 'src/app/core-components/toast-notific
 export class CompanyContactsFormComponent {
   @Input({ required: true })
   contactGuid: string;
-  @Output('emitInitialized')
-  emitInitialized = new EventEmitter<boolean>();
-
 
   faTrash: IconDefinition = faTrash;
   faUser: IconDefinition = faUser;
@@ -48,11 +45,6 @@ export class CompanyContactsFormComponent {
     }
 
   }
-  ngAfterViewInit() {
-    //emit after intialized. 
-    //When adding new nebs this will trigger the form to open
-    this.emitInitialized.emit(true);
-  }
 
   async saveChanges() {
     this.contact = this.companyContactsFormService.updateIdbContactFromForm(this.contactForm, this.contact);
diff --git a/src/app/shared/shared-company-forms/company-setup-form/company-setup-form.component.ts b/src/app/shared/shared-company-forms/company-setup-form/company-setup-form.component.ts
index 743455b8..c1e079c0 100644
--- a/src/app/shared/shared-company-forms/company-setup-form/company-setup-form.component.ts
+++ b/src/app/shared/shared-company-forms/company-setup-form/company-setup-form.component.ts
@@ -11,10 +11,10 @@ import { IdbEnergyEquipment } from 'src/app/models/energyEquipment';
 import { IdbEnergyOpportunity } from 'src/app/models/energyOpportunity';
 import { IdbFacility } from 'src/app/models/facility';
 import { FacilitySetupService } from 'src/app/setup-wizard/pre-visit/facility-setup/facility-setup.service';
-import { PreAssessmentSetupService } from 'src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.service';
 import { AssessmentEnergyOpportunitiesFormService } from '../../../setup-wizard/data-collection/on-site-assessment/assessment-energy-opportunities-form/assessment-energy-opportunities-form.service';
-import { FacilityEnergyEquipmentSetupService } from 'src/app/setup-wizard/pre-visit/facility-energy-equipment-setup/facility-energy-equipment-setup.service';
 import { EnergyEquipmentIdbService } from 'src/app/indexed-db/energy-equipment-idb.service';
+import { FacilityEnergyEquipmentSetupService } from 'src/app/setup-wizard/pre-visit/facility-energy-equipment/facility-energy-equipment-setup.service';
+import { PreAssessmentSetupService } from 'src/app/setup-wizard/pre-visit/pre-assessments/pre-assessment-setup.service';
 
 @Component({
   selector: 'app-company-setup-form',
diff --git a/src/app/shared/shared-facility-forms/energy-equipment-form/energy-equipment-form.component.html b/src/app/shared/shared-facility-forms/energy-equipment-form/energy-equipment-form.component.html
index c947ba70..072b1e4c 100644
--- a/src/app/shared/shared-facility-forms/energy-equipment-form/energy-equipment-form.component.html
+++ b/src/app/shared/shared-facility-forms/energy-equipment-form/energy-equipment-form.component.html
@@ -3,22 +3,21 @@
         <form>
             <div class="row">
                 <label class="col-sm-5 col-form-label" for="equipmentName">Equipment
-                    Name</label>
+                    Name <span class="required-asterisk">*</span></label>
                 <div class="col-sm-7">
                     <input name="equipmentName" type="text" class="form-control"
-                        [(ngModel)]="energyEquipment.equipmentName"
-                        id="equipmentName" (input)="saveChanges()">
+                        [(ngModel)]="energyEquipment.equipmentName" id="equipmentName" (input)="saveChanges()" required>
+                    <div class="alert alert-danger p-1" *ngIf="!energyEquipment.equipmentName">
+                        Equipment name required.
+                    </div>
                 </div>
             </div>
             <div class="row">
                 <label class="col-sm-5 col-form-label" for="equipmentType">Industrial System</label>
                 <div class="col-sm-7">
-                    <select name="equipmentType" class="form-select"
-                        id="equipmentType"
-                        [(ngModel)]="energyEquipment.equipmentType"
-                        (change)="industrialSystemChange()">
-                        <option *ngFor="let option of equipmentTypes"
-                            [ngValue]="option">
+                    <select name="equipmentType" class="form-select" id="equipmentType"
+                        [(ngModel)]="energyEquipment.equipmentType" (change)="industrialSystemChange()">
+                        <option *ngFor="let option of equipmentTypes" [ngValue]="option">
                             {{option}}
                         </option>
                     </select>
@@ -29,23 +28,22 @@
                     Type</label>
                 <div class="col-sm-7">
                     <select name="utilityType" class="form-select" id="utilityType"
-                        [(ngModel)]="energyEquipment.utilityType"
-                        (change)="utilityTypeChange()">
-                        <option *ngFor="let option of energyEquipment.equipmentType | linkedUtilityOptions : 'equipment'"
+                        [(ngModel)]="energyEquipment.utilityType" (change)="utilityTypeChange()">
+                        <option
+                            *ngFor="let option of energyEquipment.equipmentType | linkedUtilityOptions : 'equipment'"
                             [ngValue]="option">
                             {{option}}
                         </option>
                     </select>
                 </div>
             </div>
-            
+
             <div class="row">
                 <div class="col-sm-5 d-flex">
                     <label class="col-form-label me-2" for="size">Total Size</label>
                     <div class="form-check form-switch" *ngIf="energyEquipment.utilityType === 'Other Fuels'">
-                        <input class="form-check-input" type="checkbox"
-                            role="switch" id="calculationMode" name="calculationMode"
-                            [(ngModel)]="energyEquipment.autoCalculate"
+                        <input class="form-check-input" type="checkbox" role="switch" id="calculationMode"
+                            name="calculationMode" [(ngModel)]="energyEquipment.autoCalculate"
                             (change)="updateEnergyCalculations()">
                         <label class="form-check-label" for="calculationMode">
                             Auto Calculate
@@ -54,16 +52,13 @@
                 </div>
                 <div class="col-sm-7">
                     <div class="input-group">
-                        <input type="number" id="size" name="size" step="0.001"
-                            [ngClass]="(energyEquipment.utilityType === 'Other Fuels' && energyEquipment.autoCalculate) ?
-                                 'form-control-plaintext' : 'form-control'"
-                            [(ngModel)]="energyEquipment.size"
-                            [readOnly]="energyEquipment.autoCalculate"
-                            (input)="calculateAnnualEnergyUse()">
+                        <input type="number" id="size" name="size" step="0.001" [ngClass]="(energyEquipment.utilityType === 'Other Fuels' && energyEquipment.autoCalculate) ?
+                                 'form-control-plaintext' : 'form-control'" [(ngModel)]="energyEquipment.size"
+                            [readOnly]="energyEquipment.autoCalculate" (input)="calculateAnnualEnergyUse()">
                         <select class="input-group-text" id="sizeUnit" name="sizeUnit"
-                            [(ngModel)]="energyEquipment.sizeUnit"
-                            (change)="updateEnergyCalculations()">
-                            <option *ngFor="let option of (energyEquipment.equipmentType === 'Process Cooling' ?
+                            [(ngModel)]="energyEquipment.sizeUnit" (change)="updateEnergyCalculations()">
+                            <option
+                                *ngFor="let option of (energyEquipment.equipmentType === 'Process Cooling' ?
                                 processCoolingUnitOptions : (energyEquipment.utilityType | linkedUnitOptions: 'Power'))"
                                 [ngValue]="option.value">
                                 <span [innerHTML]="option.value | unitsDisplay"></span>
@@ -78,15 +73,11 @@
                         id="fuelConsumptionLabel">Fuel Consumption</label>
                     <div class="col-sm-7">
                         <div class="input-group">
-                            <input type="number" class="form-control" id="fuelConsumption"
-                                name="fuelConsumption"
-                                [(ngModel)]="energyEquipment.fuelConsumption"
-                                (input)="updateEnergyCalculations()">
+                            <input type="number" class="form-control" id="fuelConsumption" name="fuelConsumption"
+                                [(ngModel)]="energyEquipment.fuelConsumption" (input)="updateEnergyCalculations()">
                             <select class="input-group-text" id="fuelUnit" name="fuelUnit"
-                                [(ngModel)]="energyEquipment.fuelVolumeUnit"
-                                (change)="updateEnergyCalculations()">
-                                <option *ngFor="let option of fuelVolumeUnitOptions"
-                                    [ngValue]="option.value">
+                                [(ngModel)]="energyEquipment.fuelVolumeUnit" (change)="updateEnergyCalculations()">
+                                <option *ngFor="let option of fuelVolumeUnitOptions" [ngValue]="option.value">
                                     <span [innerHTML]="option.value | unitsDisplay: 'hr'"></span>
                                 </option>
                             </select>
@@ -98,14 +89,12 @@
                     <div class="col-sm-7">
                         <div class="input-group">
                             <input type="number" class="form-control" name="heatingValue" id="heatingValue"
-                                [(ngModel)]="energyEquipment.fuelHHV"
-                                (input)="updateEnergyCalculations()">
+                                [(ngModel)]="energyEquipment.fuelHHV" (input)="updateEnergyCalculations()">
                             <select class="input-group-text" id="heatingUnit" name="heatingUnit"
-                                [(ngModel)]="energyEquipment.fuelEnergyUnit"
-                                (change)="updateEnergyCalculations()">
-                                <option *ngFor="let option of fuelEnergyUnitOptions"
-                                    [ngValue]="option.value">
-                                    <span [innerHTML]="option.value | unitsDisplay: (energyEquipment.fuelVolumeUnit | unitsDisplay)"></span>
+                                [(ngModel)]="energyEquipment.fuelEnergyUnit" (change)="updateEnergyCalculations()">
+                                <option *ngFor="let option of fuelEnergyUnitOptions" [ngValue]="option.value">
+                                    <span
+                                        [innerHTML]="option.value | unitsDisplay: (energyEquipment.fuelVolumeUnit | unitsDisplay)"></span>
                                 </option>
                             </select>
                         </div>
@@ -113,16 +102,12 @@
                 </div>
             </div>
             <div class="row">
-                <label class="col-sm-5 col-form-label"
-                    for="operatingHours">Operating
+                <label class="col-sm-5 col-form-label" for="operatingHours">Operating
                     Hours</label>
                 <div class="col-sm-7">
                     <div class="input-group">
-                        <input type="number" class="form-control"
-                            id="operatingHours"
-                            name="operatingHours"
-                            [(ngModel)]="energyEquipment.operatingHours"
-                            (input)="calculateAnnualEnergyUse()">
+                        <input type="number" class="form-control" id="operatingHours" name="operatingHours"
+                            [(ngModel)]="energyEquipment.operatingHours" (input)="calculateAnnualEnergyUse()">
                         <span class="input-group-text">Hrs/yr</span>
                     </div>
                 </div>
@@ -132,55 +117,42 @@
                     Factor</label>
                 <div class="col-sm-7">
                     <div class="input-group">
-                        <input type="number" class="form-control" name="loadFactor"
-                            id="loadFactor"
-                            [(ngModel)]="energyEquipment.loadFactor"
-                            (input)="calculateAnnualEnergyUse()">
+                        <input type="number" class="form-control" name="loadFactor" id="loadFactor"
+                            [(ngModel)]="energyEquipment.loadFactor" (input)="calculateAnnualEnergyUse()">
                         <span class="input-group-text">&percnt;</span>
                     </div>
                 </div>
             </div>
             <div class="row">
-                <label class="col-sm-5 col-form-label"
-                    for="efficiency">Efficiency</label>
+                <label class="col-sm-5 col-form-label" for="efficiency">Efficiency</label>
                 <div class="col-sm-7">
                     <div class="input-group">
-                        <input type="number" class="form-control"
-                            id="efficiency"
-                            name="efficiency"
-                            [(ngModel)]="energyEquipment.efficiency"
-                            (input)="calculateAnnualEnergyUse()">
+                        <input type="number" class="form-control" id="efficiency" name="efficiency"
+                            [(ngModel)]="energyEquipment.efficiency" (input)="calculateAnnualEnergyUse()">
                         <span class="input-group-text">&percnt;</span>
                     </div>
                 </div>
             </div>
             <div class="row">
-                <label class="col-sm-5 col-form-label"
-                    for="numberOfEquipment">Number of Equipment</label>
+                <label class="col-sm-5 col-form-label" for="numberOfEquipment">Number of Equipment</label>
                 <div class="col-sm-7">
                     <div class="input-group">
-                        <input type="number" class="form-control"
-                            id="numberOfEquipment"
-                            name="numberOfEquipment"
-                            [(ngModel)]="energyEquipment.numberOfEquipment"
-                            (input)="calculateAnnualEnergyUse()">
+                        <input type="number" class="form-control" id="numberOfEquipment" name="numberOfEquipment"
+                            [(ngModel)]="energyEquipment.numberOfEquipment" (input)="calculateAnnualEnergyUse()">
                     </div>
                 </div>
             </div>
             <div class="row">
                 <label class="col-sm-5 col-form-label" for="notes">Notes</label>
                 <div class="col-sm-7">
-                    <textarea class="form-control" name="notes"
-                        id="notes"
-                        [(ngModel)]="energyEquipment.notes"
+                    <textarea class="form-control" name="notes" id="notes" [(ngModel)]="energyEquipment.notes"
                         (input)="saveChanges()" rows="4"></textarea>
                 </div>
             </div>
             <div class="row">
                 <label class="col-sm-5 col-form-label">Annual Energy Use</label>
                 <div class="col-sm-7">
-                    <span class="d-flex justify-content-center bold"
-                    id="energyUse" name="energyUse">
+                    <span class="d-flex justify-content-center bold" id="energyUse" name="energyUse">
                         {{energyEquipment.annualEnergyUse | number:'1.0-2'}}
                         {{companyEnergyUnit | unitsDisplay}}
                         <div *ngIf="companyEnergyUnit !== energyEquipment.facilityUtilityUnit">
@@ -204,15 +176,13 @@
                     <fa-icon [icon]="faUser"></fa-icon>
                     {{contact | contactNameDisplay}}
                 </button>
-                <button class="btn btn-sm btn-secondary"
-                    (click)="openContactModal(undefined)">
+                <button class="btn btn-sm btn-secondary" (click)="openContactModal(undefined)">
                     <fa-icon [icon]="faContactBook"></fa-icon>
                     Stakeholders
                 </button>
             </div>
             <div>
-                <button class="btn btn-sm btn-danger"
-                    (click)="openDeleteModal()">
+                <button class="btn btn-sm btn-danger" (click)="openDeleteModal()">
                     <fa-icon [icon]="faTrash"></fa-icon> Delete
                 </button>
             </div>
diff --git a/src/app/shared/shared-facility-forms/kpi-search-form/kpi-list/kpi-list.component.ts b/src/app/shared/shared-facility-forms/kpi-search-form/kpi-list/kpi-list.component.ts
index efe08577..63a86425 100644
--- a/src/app/shared/shared-facility-forms/kpi-search-form/kpi-list/kpi-list.component.ts
+++ b/src/app/shared/shared-facility-forms/kpi-search-form/kpi-list/kpi-list.component.ts
@@ -115,7 +115,7 @@ export class KpiListComponent {
       this.router.navigateByUrl('portfolio/company/' + kpi.companyId + '/performance-indicators/details/' + kpi.guid);
     } else {
       let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
-      this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/kpi-detail/' + kpi.guid);
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/facility-kpi-detail/' + kpi.guid);
     }
   }
 
diff --git a/src/app/shared/shared-facility-forms/process-equipment-form/process-equipment-form.component.html b/src/app/shared/shared-facility-forms/process-equipment-form/process-equipment-form.component.html
index 1e9aa38f..28792105 100644
--- a/src/app/shared/shared-facility-forms/process-equipment-form/process-equipment-form.component.html
+++ b/src/app/shared/shared-facility-forms/process-equipment-form/process-equipment-form.component.html
@@ -1,11 +1,15 @@
-<div class="row">
+<div class="row" *ngIf="processEquipment">
     <div class="col-12">
         <form>
             <div class="row">
-                <label class="col-sm-5 col-form-label" for="equipmentName">End Use Name</label>
+                <label class="col-sm-5 col-form-label" for="equipmentName">End Use Name <span
+                        class="required-asterisk">*</span></label>
                 <div class="col-sm-7">
                     <input name="equipmentName" type="text" class="form-control"
                         [(ngModel)]="processEquipment.equipmentName" id="equipmentName" (input)="saveChanges()">
+                    <div class="alert alert-danger p-1" *ngIf="!processEquipment.equipmentName">
+                        End use name required.
+                    </div>
                 </div>
             </div>
 
diff --git a/src/app/shared/shared-settings-forms/units-form/units-form.component.spec.ts b/src/app/shared/shared-settings-forms/units-form/units-form.component.spec.ts
index 6713da3d..749c8d08 100644
--- a/src/app/shared/shared-settings-forms/units-form/units-form.component.spec.ts
+++ b/src/app/shared/shared-settings-forms/units-form/units-form.component.spec.ts
@@ -10,11 +10,11 @@ import { SetupWizardService } from 'src/app/setup-wizard/setup-wizard.service';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { HelperPipesModule } from '../../helper-pipes/_helper-pipes.module';
-import { PreAssessmentSetupService } from 'src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.service';
 import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
 import { AssessmentIdbService } from 'src/app/indexed-db/assessment-idb.service';
 import { EnergyOpportunityIdbService } from 'src/app/indexed-db/energy-opportunity-idb.service';
 import { EnergyEquipmentIdbService } from 'src/app/indexed-db/energy-equipment-idb.service';
+import { PreAssessmentSetupService } from 'src/app/setup-wizard/pre-visit/pre-assessments/pre-assessment-setup.service';
 
 describe('UnitsFormComponent', () => {
   let component: UnitsFormComponent;
diff --git a/src/app/shared/shared-settings-forms/units-form/units-form.component.ts b/src/app/shared/shared-settings-forms/units-form/units-form.component.ts
index 057018ca..7b725c63 100644
--- a/src/app/shared/shared-settings-forms/units-form/units-form.component.ts
+++ b/src/app/shared/shared-settings-forms/units-form/units-form.component.ts
@@ -6,7 +6,6 @@ import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
 import { IdbFacility } from 'src/app/models/facility';
 import { IconDefinition, faGear } from '@fortawesome/free-solid-svg-icons';
 import { SharedSettingsFormsService } from '../shared-settings-forms.service';
-import { PreAssessmentSetupService } from 'src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.service';
 import { IdbAssessment } from 'src/app/models/assessment';
 import { AssessmentIdbService } from 'src/app/indexed-db/assessment-idb.service';
 import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
@@ -14,7 +13,8 @@ import { UtilityOptions } from '../../constants/utilityTypes';
 import { ConvertValue } from '../../conversions/convertValue';
 import { IdbEnergyEquipment } from 'src/app/models/energyEquipment';
 import { EnergyEquipmentIdbService } from 'src/app/indexed-db/energy-equipment-idb.service';
-import { FacilityEnergyEquipmentSetupService } from 'src/app/setup-wizard/pre-visit/facility-energy-equipment-setup/facility-energy-equipment-setup.service';
+import { FacilityEnergyEquipmentSetupService } from 'src/app/setup-wizard/pre-visit/facility-energy-equipment/facility-energy-equipment-setup.service';
+import { PreAssessmentSetupService } from 'src/app/setup-wizard/pre-visit/pre-assessments/pre-assessment-setup.service';
 
 @Component({
   selector: 'app-units-form',
@@ -48,7 +48,7 @@ export class UnitsFormComponent implements OnInit, OnDestroy{
     private preAssessmentSetupService: PreAssessmentSetupService,
     private assessmentIdbService: AssessmentIdbService,
     private energyEquipmentIdbService: EnergyEquipmentIdbService,
-    private facilityEnergyEquipmentSetupService: FacilityEnergyEquipmentSetupService,
+    private facilityEnergyEquipmentSetupService: FacilityEnergyEquipmentSetupService
   ) {
   }
 
diff --git a/src/styles.css b/src/styles.css
index 0c12ab6a..ea092b86 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -81,6 +81,7 @@
 
 .neb-container .overflow-scroll {
     overflow-y: auto !important;
+    overflow-x: auto !important;
 }
 
 .neb-container ::-webkit-scrollbar {