diff --git a/backend/package-lock.json b/backend/package-lock.json
index 8021123d..a5c7c871 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "ccof-backend",
+  "name": "ofm-backend",
   "version": "0.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "ccof-backend",
+      "name": "ofm-backend",
       "version": "0.0.1",
       "license": "Apache-2.0",
       "dependencies": {
diff --git a/backend/src/components/user.js b/backend/src/components/user.js
index 1c12925e..a6439acf 100644
--- a/backend/src/components/user.js
+++ b/backend/src/components/user.js
@@ -1,236 +1,138 @@
-'use strict';
-const {getSessionUser, getHttpHeader, minify, getUserGuid, getUserName, getLabelFromValue, postOperation, isIdirUser, getOperation} = require('./utils');
-const config = require('../config/index');
-const ApiError = require('./error');
-const axios = require('axios');
-const HttpStatus = require('http-status-codes');
-const log = require('../components/logger');
-const { APPLICATION_STATUS_CODES, CCFRI_STATUS_CODES, ECEWE_STATUS_CODES, CCOF_STATUS_CODES, CCOF_APPLICATION_TYPES, ORGANIZATION_PROVIDER_TYPES, CHANGE_REQUEST_TYPES} = require('../util/constants');
-const { UserProfileFacilityMappings, UserProfileOrganizationMappings, UserProfileBaseFundingMappings, UserProfileApplicationMappings, UserProfileCCFRIMappings, UserProfileECEWEMappings /* lint error: , UserProfileChangeRequestNewFacilityMappings*/} = require('../util/mapping/Mappings');
-
-const { MappableObjectForFront } = require('../util/mapping/MappableObject');
-const _ = require ('lodash');
-
+'use strict'
+const { getSessionUser, getUserName, getHttpHeader, minify, getUserGuid, isIdirUser } = require('./utils')
+const config = require('../config/index')
+const ApiError = require('./error')
+const axios = require('axios')
+const HttpStatus = require('http-status-codes')
+const log = require('../components/logger')
+// TODO... const { ORGANIZATION_PROVIDER_TYPES} = require('../util/constants')
+const { UserProfileMappings, UserProfileOrganizationMappings, UserProfileFacilityPermissionMappings, UserProfileFacilityMappings } = require('../util/mapping/Mappings')
+
+const { MappableObjectForFront } = require('../util/mapping/MappableObject')
+const _ = require('lodash')
 
 async function getUserInfo(req, res) {
-
-  const userInfo = getSessionUser(req);
+  const userInfo = getSessionUser(req)
   if (!userInfo || !userInfo.jwt || !userInfo._json) {
     return res.status(HttpStatus.UNAUTHORIZED).json({
-      message: 'No session data'
-    });
+      message: 'No session data',
+    })
   }
-  const isIdir = isIdirUser(req);
-  const queryUserName = req.params?.queryUserName;
-  const userName = getUserName(req);
+  const isIdir = isIdirUser(req)
+  const queryUserName = req.params?.queryUserName
+  const userName = getUserName(req)
 
   // if is idir user (ministry user), make sure they are a user in dynamics
+  // TODO commented out until we focus on IDIR login and weather this code is relevant
   if (isIdir) {
-    let response = await getDynamicsUserByEmail(req);
+    let response = await getDynamicsUserByEmail(req)
     if (response.value?.length > 0 && response.value[0].systemuserid) {
-      log.verbose(`Ministry user: [${req.session.passport.user._json.display_name}] logged in.`);
+      log.verbose(`Ministry user: [${req.session.passport.user._json.display_name}] logged in.`)
     } else {
-      log.info(`Ministry user: [${req.session.passport.user._json.display_name}] attempted to log in but is not part of Dynamics.`);
+      log.info(`Ministry user: [${req.session.passport.user._json.display_name}] attempted to log in but is not part of Dynamics.`)
       return res.status(HttpStatus.UNAUTHORIZED).json({
-        message: 'Not Authorized'
-      });
+        message: 'Not Authorized',
+      })
     }
   }
   let resData = {
-    displayName: (queryUserName)? userName + '-' + queryUserName : userName,
+    // TODO i thing this has to do with impersonate... displayName: (queryUserName)? userName + '-' + queryUserName : userName,
     userName: userName,
-    email: req.session.passport.user._json.email,
     isMinistryUser: isIdir,
     serverTime: new Date(),
     //TODO: unreadMessages is hardcoded. Remove this with API values when built out!
     unreadMessages: false,
-  };
-  let userResponse = undefined;
+  }
+  let userResponse = undefined
   if (isIdir) {
     if (queryUserName) {
       try {
-        log.info(`Ministry user [${userName}] is impersonating with username: [${queryUserName}].`);
+        log.info(`Ministry user [${userName}] is impersonating with username: [${queryUserName}].`)
         // dynamics api requires a userID. if userID not found then it wil use the query name
         // put a random userID so that we only search by queryname
-        userResponse = await getUserProfile(null, queryUserName);
+        userResponse = await getUserProfile(null, queryUserName)
         if (userResponse === null) {
-          return res.status(HttpStatus.NOT_FOUND).json({message: 'No user found with that BCeID UserName'});
+          return res.status(HttpStatus.NOT_FOUND).json({ message: 'No user found with that BCeID UserName' })
         }
       } catch (e) {
-        log.error('getUserProfile Error', e.response ? e.response.status : e.message);
-        throw new ApiError(HttpStatus.INTERNAL_SERVER_ERROR, {message: 'API Get error'}, e);
+        log.error('getUserProfile Error', e.response ? e.response.status : e.message)
+        throw new ApiError(HttpStatus.INTERNAL_SERVER_ERROR, { message: 'API Get error' }, e)
       }
     } else {
       //If not looking for a username, return from here since ministry staff should not have an account
-      return res.status(HttpStatus.OK).json(resData);
+      return res.status(HttpStatus.OK).json(resData)
     }
   } else {
     //Not an idir user, so just get the guid from the header
-    const userGuid = getUserGuid(req);
-    log.verbose('User Guid is: ', userGuid);
-    userResponse = await getUserProfile(userGuid, userName );
+    const userGuid = getUserGuid(req)
+    log.verbose('User Guid is: ', userGuid)
+    userResponse = await getUserProfile(userGuid)
   }
 
   if (log.isVerboseEnabled) {
-    log.verbose('getUserProfile response:',minify(userResponse));
+    log.verbose('getUserProfile response:', minify(userResponse))
   }
 
   if (userResponse === null) {
-    creatUser(req);
-    return res.status(HttpStatus.OK).json(resData);
-  }
-  if (userResponse === {}){
-    // If no data back, then no associated Organization/Facilities, return empty orgination data
-    return res.status(HttpStatus.OK).json(resData);
+    // If no data back, then no associated User Roles/Organization/Facilities/
+    return res.status(HttpStatus.UNAUTHORIZED).json(resData)
   }
 
-  let organization = new MappableObjectForFront(userResponse, UserProfileOrganizationMappings).data;
+  let user = new MappableObjectForFront(userResponse, UserProfileMappings).data
+  let organization = new MappableObjectForFront(userResponse.organization, UserProfileOrganizationMappings).data
+  resData.facilityPermission = parseFacilityPermissions(userResponse)
 
-  let application = new MappableObjectForFront(userResponse.application, UserProfileApplicationMappings).data;
-  application.organizationProviderType = getLabelFromValue(application.organizationProviderType, ORGANIZATION_PROVIDER_TYPES);
-  application.applicationStatus = getLabelFromValue(application.applicationStatus, APPLICATION_STATUS_CODES, 'NEW');
-  application.applicationType = getLabelFromValue(application.applicationType, CCOF_APPLICATION_TYPES);
-  application.ccofProgramYearId = userResponse.application?.ccof_ProgramYear?.ccof_program_yearid;
-  application.ccofProgramYearName = userResponse.application?.ccof_ProgramYear?.ccof_name;
-  application.ccofApplicationStatus = getLabelFromValue(application.ccofStatus, CCOF_STATUS_CODES, 'NEW');
-
-
-  resData.facilityList = parseFacilityData(userResponse);
   let results = {
     ...resData,
+    ...user,
     ...organization,
-    ...application,
-  };
-  return res.status(HttpStatus.OK).json(results);
+  }
+  log.verbose('getUserInfo response:', results)
+  return res.status(HttpStatus.OK).json(results)
 }
 
-async function getUserProfile(userGuid, userName) {
+async function getUserProfile(userGuid) {
   try {
-    let url = undefined;
+    let url = undefined
     if (userGuid) {
-      url = config.get('dynamicsApi:apiEndpoint') + `/api/ProviderProfile?userId=${userGuid}&userName=${userName}`;
-    } else {
-      url = config.get('dynamicsApi:apiEndpoint') + `/api/ProviderProfile?userName=${userName}`;
+      url = config.get('dynamicsApi:apiEndpoint') + `/api/ProviderProfile?userId=${userGuid}`
     }
-
-    log.verbose('UserProfile Url is', url);
-    const response = await axios.get(url, getHttpHeader());
-    return response.data;
+    log.verbose('UserProfile Url is', url)
+    let response = undefined
+    response = await axios.get(url, getHttpHeader())
+    log.verbose('getUserProfile response:', response.data)
+    return response.data
   } catch (e) {
     if (e.response?.status == '404') {
-      log.verbose('response ', e.response.data);
+      log.verbose('response ', e.response.data)
       if (e.response?.data?.startsWith('User not found')) {
-        return null;
+        return null
       }
-      return {};
+      return {}
     }
-    log.error('getUserProfile Error', e.response ? e.response.status : e.message);
-    throw e;
+    log.error('getUserProfile Error', e.response ? e.response.status : e.message)
+    throw e
   }
 }
 
-function updateFacilityWithChangeRequestDetails(changeRequestList, returnValue, facilityId) {
-  for (const changeRequest of changeRequestList) {
-    //todo -mk check statuscode
-    let changeActionNewFacilityList = changeRequest?.ccof_change_action_change_request?.filter(item =>item.ccof_changetype === CHANGE_REQUEST_TYPES.NEW_FACILITY);
-    for (const changeActionNewFacility of changeActionNewFacilityList) {
-      let result = changeActionNewFacility?.ccof_change_request_new_facility_change_act.find(item => item['_ccof_facility_value'] === facilityId);
-      if (result) {
-        returnValue.changeRequestId = changeRequest?.ccof_change_requestid;
-        returnValue.unlockCcfri = result?.ccof_unlock_ccfri;
-        returnValue.unlockNmf = result?.ccof_unlock_nmf_rfi;
-        returnValue.unlockRfi = result?.ccof_unlock_rfi;
-
+function parseFacilityPermissions(userResponse) {
+  const facilityList = Object.entries(userResponse.facility_permission)
+    .map(([key, value]) => {
+      // Only add facilities that have portal access
+      if (value.ofm_portal_access === true) {
+        const facilityPermission = new MappableObjectForFront(value, UserProfileFacilityPermissionMappings).data
+        const facility = new MappableObjectForFront(value.facility, UserProfileFacilityMappings).data
+        const combinedData = { ...facilityPermission, ...facility }
+        if (!_.isEmpty(combinedData)) {
+          return combinedData
+        }
       }
-    }
-  }
-}
-
-function parseFacilityData(userResponse) {
-  let facilityMap  = new Map(userResponse.facilities?.map((m) => [m['accountid'], new MappableObjectForFront(m, UserProfileFacilityMappings).data]));
-
-  if (userResponse.application) {
-    facilityMap.forEach((value, key, map) => {
-      let ccfriInfo = userResponse.application.ccof_applicationccfri_Application_ccof_ap?.find(item => item['_ccof_facility_value'] === key);
-      ccfriInfo = new MappableObjectForFront(ccfriInfo, UserProfileCCFRIMappings).data;
-      let eceweInfo = userResponse.application.ccof_ccof_application_ccof_applicationecewe_application?.find(item => item['_ccof_facility_value'] === key);
-      eceweInfo = new MappableObjectForFront(eceweInfo, UserProfileECEWEMappings).data;
-      let baseFunding = userResponse.application.ccof_application_basefunding_Application?.find(item => item['_ccof_facility_value'] === key);
-      baseFunding = new MappableObjectForFront(baseFunding, UserProfileBaseFundingMappings).data;
-      let changeRequestList = userResponse.application.ccof_ccof_change_request_Application_ccof_appl;
-      let returnValue = {
-        ...value,
-        ...ccfriInfo,
-        ...eceweInfo,
-        ...baseFunding,
-      };
-      updateFacilityWithChangeRequestDetails(changeRequestList, returnValue, key);
-      map.set(key, returnValue);
-    });
-  }
-  let facilityList = [];
-  facilityMap.forEach((facility) => {
-    if (!_.isEmpty(facility)) {
-      facility.ccofBaseFundingStatus = getLabelFromValue(facility.ccofBaseFundingStatus, CCOF_STATUS_CODES);
-      facility.ccfriStatus = getLabelFromValue(facility.ccfriStatus, CCFRI_STATUS_CODES, 'NOT STARTED');
-      facility.eceweStatus = getLabelFromValue(facility.eceweStatus, ECEWE_STATUS_CODES, 'NOT STARTED');
-      facilityList.push(facility);
-    }
-  });
-  return facilityList;
-}
-
-async function getDynamicsUserByEmail(req) {
-  let email = req.session.passport.user._json.email;
-  if (!email) {
-    //If for some reason, an email is not associated with the IDIR, just use IDR@gov.bc.ca
-    email = `${req.session.passport.user._json.idir_username}@gov.bc.ca`;
-  }
-  // eslint-disable-next-line quotes,
-  email.includes("'") ? email = email.replace("'", "''") : email;
-  try {
-    let response = await getOperation(`systemusers?$select=firstname,domainname,lastname&$filter=internalemailaddress eq '${email}'`);
-    return response;
-  } catch (e) {
-    log.error('getDynamicsUserByEmail Error', e.response ? e.response.status : e.message);
-    throw new ApiError(HttpStatus.INTERNAL_SERVER_ERROR, {message: 'API Get error'}, e);
-  }
-}
-
-async function creatUser(req) {
-  log.info('No user found, creating BCeID User: ', getUserName(req));
-  let given_name = req.session.passport.user._json.given_name;
-  let family_name = req.session.passport.user._json.family_name;
-  let firstname = undefined;
-  let lastname = undefined;
-  try {
-    if (!family_name && given_name && given_name.split(' ').length > 1) {
-      //If for some reason we don't have a last name from SSO, see if firstname has 2 words
-      firstname = given_name.split(' ').slice(0, -1).join(' ');
-      lastname = given_name.split(' ').slice(-1).join(' ');
-    } else if (!given_name && family_name && family_name.split(' ').length > 1) {
-      //If for some reason we don't have a firstname name from SSO, see if lastname has 2 words
-      firstname = family_name.split(' ').slice(0, -1).join(' ');
-      lastname = family_name.split(' ').slice(-1).join(' ');
-    } else {
-      firstname = given_name;
-      lastname = family_name;
-    }
-
-    let payload = {
-      ccof_userid: getUserGuid(req),
-      firstname: firstname,
-      lastname: lastname,
-      emailaddress1: req.session.passport.user._json.email,
-      ccof_username: getUserName(req)
-    };
-    postOperation('contacts', payload);
-  } catch (e) {
-    log.error('Error when creating user: ', e);
-    throw new ApiError(HttpStatus.INTERNAL_SERVER_ERROR, {message: 'Error while creating a new BCeID User'}, e);
-  }
+      return null
+    })
+    .filter((facility) => facility !== null)
+  return facilityList
 }
 
 module.exports = {
   getUserInfo,
-};
+}
diff --git a/backend/src/util/mapping/Mappings.js b/backend/src/util/mapping/Mappings.js
index 90664a02..9ad8ebe4 100644
--- a/backend/src/util/mapping/Mappings.js
+++ b/backend/src/util/mapping/Mappings.js
@@ -1,34 +1,39 @@
-const OrganizationMappings = [
-  { back: 'ccof_facilitystartdate', front: 'yearBeganOperation' },
-  { back: 'name', front: 'legalName' },
-  { back: 'address1_name', front: 'address1' }, //Address
-  { back: 'address1_city', front: 'city1' },
-  { back: 'address1_postalcode', front: 'postalCode1' },
-  { back: 'address2_name', front: 'address2' }, //Mailing Address
-  { back: 'address2_city', front: 'city2' },
-  { back: 'address2_postalcode', front: 'postalCode2' },
-  { back: 'address1_primarycontactname', front: 'contactName' },
-  { back: 'ccof_position', front: 'position' },
-  { back: 'telephone1', front: 'phone' },
+const UserProfileMappings = [
+  { back: 'contactid', front: 'contactId' },
+  { back: 'ccof_userid', front: 'userId' },
+  { back: 'ccof_username', front: 'username' },
   { back: 'emailaddress1', front: 'email' },
-  { back: 'ccof_instructionnumber', front: 'incNumber' },//incorporation number
-  { back: 'ccof_typeoforganization', front: 'organizationType' },
-  { back: 'ccof_formcomplete', front: 'isOrganizationComplete' },
-  { back: 'ccof_is_mailing_address_same', front: 'isSameAsMailing'}
-];
+  { back: 'ofm_first_name', front: 'firstName' },
+  { back: 'ofm_last_name', front: 'lastName' },
+  { back: 'ofm_portal_role', front: 'roles' },
+]
 
-const ProgramYearMappings = [
-  { back: 'ccof_program_yearid', front: 'programYearId' },
-  { back: 'ccof_name', front: 'name' },
-  { back: 'statuscode', front: 'status' },
-  { back: 'ccof_programyearnumber', front: 'order' },
-  { back: '_ccof_previousyear_value', front: 'previousYearId' },
-  { back: 'ccof_intakeperiodstart', front: 'intakeStart' },
-  { back: 'ccof_intakeperiodend', front: 'intakeEnd' },
-  { back: 'ccof_declarationbstart', front: 'declarationbStart' },
-];
+const UserProfileOrganizationMappings = [
+  { back: 'accountid', front: 'organizationId' },
+  { back: 'accountnumber', front: 'organizationAccountNumber' },
+  { back: 'ccof_accounttype', front: 'organizationAccountType' },
+  { back: 'name', front: 'organizationName' },
+  { back: 'statecode', front: 'organizationStateCode' },
+  { back: 'statuscode', front: 'organizationStatus' },
+]
+
+const UserProfileFacilityPermissionMappings = [
+  { back: 'statecode', front: 'stateCode' },
+  { back: 'statuscode', front: 'statusCode' },
+]
+
+const UserProfileFacilityMappings = [
+  { back: 'accountid', front: 'facilityId' },
+  { back: 'accountnumber', front: 'facilityAccountNumber' },
+  { back: 'name', front: 'facilityName' },
+  { back: 'ccof_accounttype', front: 'facilityType' },
+  { back: 'statecode', front: 'facilityStateCode' },
+  { back: 'statuscode', front: 'facilityStatusCode' },
+]
 
 module.exports = {
-  OrganizationMappings,
-  ProgramYearMappings
-};
+  UserProfileMappings,
+  UserProfileOrganizationMappings,
+  UserProfileFacilityPermissionMappings,
+  UserProfileFacilityMappings,
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 000f6e4a..3d34d0c6 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,7 +11,6 @@
         "@bcgov/bc-sans": "^2.0.0",
         "@js-joda/core": "^5.5.3",
         "axios": "^1.4.0",
-        "happy-dom": "^12.8.0",
         "http-status-codes": "^2.2.0",
         "lodash": "^4.17.21",
         "moment": "^2.29.4",
@@ -27,12 +26,14 @@
       },
       "devDependencies": {
         "@mdi/font": "^7.2.96",
+        "@pinia/testing": "^0.1.3",
         "@rushstack/eslint-patch": "^1.3.2",
         "@vitejs/plugin-vue": "^4.3.1",
         "@vue/test-utils": "^2.4.1",
         "eslint": "^8.46.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-vue": "^9.16.1",
+        "happy-dom": "^12.8.0",
         "prettier": "^3.0.0",
         "vite": "^4.4.9",
         "vitest": "^0.34.6"
@@ -625,6 +626,47 @@
       "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
       "dev": true
     },
+    "node_modules/@pinia/testing": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@pinia/testing/-/testing-0.1.3.tgz",
+      "integrity": "sha512-D2Ds2s69kKFaRf2KCcP1NhNZEg5+we59aRyQalwRm7ygWfLM25nDH66267U3hNvRUOTx8ofL24GzodZkOmB5xw==",
+      "dev": true,
+      "dependencies": {
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "pinia": ">=2.1.5"
+      }
+    },
+    "node_modules/@pinia/testing/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz",
@@ -1514,7 +1556,8 @@
     "node_modules/css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true
     },
     "node_modules/cssesc": {
       "version": "3.0.0",
@@ -1671,6 +1714,7 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -2158,6 +2202,7 @@
       "version": "12.8.0",
       "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-12.8.0.tgz",
       "integrity": "sha512-ReeZgCPuebuH1sc7NcTthMIyQVEb1NJyvs+p1gOHC1LwccIAKPWyRTNVmKhfyW5ft1Di+sPsOCuVFulF5IeVxw==",
+      "dev": true,
       "dependencies": {
         "css.escape": "^1.5.1",
         "entities": "^4.5.0",
@@ -2184,6 +2229,7 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -3206,7 +3252,8 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
     },
     "node_modules/sass": {
       "version": "1.66.1",
@@ -3900,6 +3947,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
       "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       }
@@ -3986,6 +4034,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
       "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+      "dev": true,
       "dependencies": {
         "iconv-lite": "0.6.3"
       },
@@ -3997,6 +4046,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
       "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       }
@@ -4398,6 +4448,24 @@
       "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
       "dev": true
     },
+    "@pinia/testing": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@pinia/testing/-/testing-0.1.3.tgz",
+      "integrity": "sha512-D2Ds2s69kKFaRf2KCcP1NhNZEg5+we59aRyQalwRm7ygWfLM25nDH66267U3hNvRUOTx8ofL24GzodZkOmB5xw==",
+      "dev": true,
+      "requires": {
+        "vue-demi": ">=0.14.5"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+          "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+          "dev": true,
+          "requires": {}
+        }
+      }
+    },
     "@rushstack/eslint-patch": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz",
@@ -5124,7 +5192,8 @@
     "css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true
     },
     "cssesc": {
       "version": "3.0.0",
@@ -5238,7 +5307,8 @@
     "entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true
     },
     "es-module-lexer": {
       "version": "1.3.0",
@@ -5588,6 +5658,7 @@
       "version": "12.8.0",
       "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-12.8.0.tgz",
       "integrity": "sha512-ReeZgCPuebuH1sc7NcTthMIyQVEb1NJyvs+p1gOHC1LwccIAKPWyRTNVmKhfyW5ft1Di+sPsOCuVFulF5IeVxw==",
+      "dev": true,
       "requires": {
         "css.escape": "^1.5.1",
         "entities": "^4.5.0",
@@ -5611,6 +5682,7 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       }
@@ -6316,7 +6388,8 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
     },
     "sass": {
       "version": "1.66.1",
@@ -6709,7 +6782,8 @@
     "webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
-      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g=="
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true
     },
     "webpack": {
       "version": "5.88.2",
@@ -6771,6 +6845,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
       "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+      "dev": true,
       "requires": {
         "iconv-lite": "0.6.3"
       }
@@ -6778,7 +6853,8 @@
     "whatwg-mimetype": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
-      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q=="
+      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "dev": true
     },
     "which": {
       "version": "2.0.2",
diff --git a/frontend/package.json b/frontend/package.json
index 1f745fd1..2487afe4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,6 +24,7 @@
     "rfdc": "^1.3.0",
     "sass": "^1.66.1",
     "sass-loader": "^13.3.2",
+    "vite-plugin-vuetify": "^1.0.2",
     "vue": "^3.3.4",
     "vue-meta": "^3.0.0-alpha.7",
     "vue-router": "^4.2.4",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 4d9439a0..f3ff61ef 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,11 +1,13 @@
 <!-- eslint-disable vue/no-reserved-component-names -->
 <template>
   <v-app id="app">
-    <TheHeader />
-    <TheSnackBar />
-    <TheNavBar v-if="pageTitle && isAuthenticated && showNavBar" :title="pageTitle" />
-    <v-main class="align-start">
+    <div class="header">
+      <TheHeader />
+      <TheSnackBar />
+      <TheNavBar v-if="pageTitle && isAuthenticated && showNavBar" :title="pageTitle" />
       <TheEnvBar />
+    </div>
+    <v-main class="align-start">
       <TheModalIdle v-if="isAuthenticated" class="align-start px-8 mb-0" />
       <TheMenu v-if="isAuthenticated" />
       <router-view class="align-start px-8 mb-0" />
@@ -62,7 +64,7 @@ export default {
   async created() {
     //this.setLoading(true);
     this.getJwtToken()
-      .then(() => Promise.all([this.getConfig()]))
+      //TODO commented out during sprint 1, might need in later sprint...then(() => Promise.all([this.getConfig()]))
       .catch((e) => {
         if (!e.response || e.response.status !== HttpStatus.UNAUTHORIZED) {
           this.logout()
@@ -100,9 +102,24 @@ export default {
 </script>
 
 <style>
+.header {
+  /* background-color: #036;
+  border-bottom: 2px solid #fcba19;
+  padding: 0 65px 0 65px;
+  color: #fff;
+  display: flex;
+  height: 65px;
+  top: 0px;
+  position: fixed;
+  width: 100%; */
+  position: fixed;
+  width: 100%;
+  z-index: 1002;
+}
 #toTopBtn {
   opacity: 0.5;
 }
+
 #toTopBtn:hover {
   opacity: 1;
 }
@@ -138,6 +155,7 @@ html {
 .v-alert .v-icon {
   padding-left: 0;
 }
+
 .full-height {
   height: 100%;
 }
diff --git a/frontend/src/assets/images/login-header-img-resized.jpg b/frontend/src/assets/images/login-header-img-resized.jpg
new file mode 100644
index 00000000..f3ce0ed0
Binary files /dev/null and b/frontend/src/assets/images/login-header-img-resized.jpg differ
diff --git a/frontend/src/common/apiService.js b/frontend/src/common/apiService.js
index 8e86ce15..45346ef3 100644
--- a/frontend/src/common/apiService.js
+++ b/frontend/src/common/apiService.js
@@ -1,59 +1,62 @@
-import axios from 'axios';
-import {Routes} from '@/utils/constants';
-import AuthService from '@/common/authService';
+import AuthService from '@/common/authService'
+import { Routes } from '@/utils/constants'
+import axios from 'axios'
 
 // Buffer concurrent requests while refresh token is being acquired
-let failedQueue = [];
+let failedQueue = []
 
 function processQueue(error, token = null) {
-  failedQueue.forEach(prom => {
+  failedQueue.forEach((prom) => {
     if (error) {
-      prom.reject(error);
+      prom.reject(error)
     } else {
-      prom.resolve(token);
+      prom.resolve(token)
     }
-  });
+  })
 
-  failedQueue = [];
+  failedQueue = []
 }
 
 // Create new non-global axios instance and intercept strategy
-const apiAxios = axios.create();
-const intercept = apiAxios.interceptors.response.use(config => config, error => {
-  const originalRequest = error.config;
-  if (error.response.status !== 401) {
-    return Promise.reject(error);
-  }
-  axios.interceptors.response.eject(intercept);
-  return new Promise((resolve, reject) => {
-    AuthService.refreshAuthToken(localStorage.getItem('jwtToken'))
-      .then(response => {
-        if (response.jwtFrontend) {
-          localStorage.setItem('jwtToken', response.jwtFrontend);
-          apiAxios.defaults.headers.common['Authorization'] = `Bearer ${response.jwtFrontend}`;
-          originalRequest.headers['Authorization'] = `Bearer ${response.jwtFrontend}`;
-        }
-        processQueue(null, response.jwtFrontend);
-        resolve(axios(originalRequest));
-      })
-      .catch(e => {
-        processQueue(e, null);
-        localStorage.removeItem('jwtToken');
-        window.location = '/token-expired';
-        reject(e);
-      });
-  });
-});
+const apiAxios = axios.create()
+const intercept = apiAxios.interceptors.response.use(
+  (config) => config,
+  (error) => {
+    const originalRequest = error.config
+    if (error.response.status !== 401) {
+      return Promise.reject(error)
+    }
+    axios.interceptors.response.eject(intercept)
+    return new Promise((resolve, reject) => {
+      AuthService.refreshAuthToken(localStorage.getItem('jwtToken'))
+        .then((response) => {
+          if (response.jwtFrontend) {
+            localStorage.setItem('jwtToken', response.jwtFrontend)
+            apiAxios.defaults.headers.common['Authorization'] = `Bearer ${response.jwtFrontend}`
+            originalRequest.headers['Authorization'] = `Bearer ${response.jwtFrontend}`
+          }
+          processQueue(null, response.jwtFrontend)
+          resolve(axios(originalRequest))
+        })
+        .catch((e) => {
+          processQueue(e, null)
+          localStorage.removeItem('jwtToken')
+          window.location = '/token-expired'
+          reject(e)
+        })
+    })
+  },
+)
 
 function getCodes(url) {
   return async function getCodesHandler(query) {
     try {
-      return await apiAxios.get(url, query);
+      return await apiAxios.get(url, query)
     } catch (e) {
-      console.log(`Failed to get from Nodejs API - ${e}`);
-      throw e;
+      console.log(`Failed to get from Nodejs API - ${e}`)
+      throw e
     }
-  };
+  }
 }
 
 export default {
@@ -65,66 +68,22 @@ export default {
   //Adds required headers to the Auth request
   setAuthHeader(token) {
     if (token) {
-      apiAxios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+      apiAxios.defaults.headers.common['Authorization'] = `Bearer ${token}`
     } else {
-      delete apiAxios.defaults.headers.common['Authorization'];
+      delete apiAxios.defaults.headers.common['Authorization']
     }
   },
-  getGenderCodes: getCodes(Routes.student.GENDER_CODE_URL),
-  getDemogCodes: getCodes(Routes.student.DEMOG_CODE_URL),
-  getStatusCodes: getCodes(Routes.student.STATUS_CODE_URL),
-  getGradeCodes: getCodes(Routes.student.GRADE_CODE_URL),
-  getDocumentTypeCodesFromStudentApi: getCodes(Routes.student.DOC_TYPE_CODES_URL),
-  getPossibleMatchReasonCodes: getCodes(Routes.penMatch.POSSIBLE_MATCH_REASON_CODES),
-  getHistoryActivityCodes: getCodes(Routes.student.HISTORY_ACTIVITY_CODE_URL),
-  getPenRequestBatchStudentStatusCodes: getCodes(Routes.penRequestBatch.STUDENT_STATUS_CODE_URL),
-  getPenRequestBatchStudentInfoMacroCodes: getCodes(Routes.penRequestBatch.STUDENT_INFO_MACROS_URL),
-  getPrbValidationFieldCodes: getCodes(Routes.penRequestBatch.PRB_VALIDATION_FIELD_CODE_URL),
-  getPrbValidationIssueSeverityCodes: getCodes(Routes.penRequestBatch.PRB_VALIDATION_ISSUE_SEVERITY_CODE_URL),
-  getPrbValidationIssueTypeCodes: getCodes(Routes.penRequestBatch.PRB_VALIDATION_ISSUE_TYPE_CODE_URL),
-  getMincodeSchoolNames: getCodes(Routes.cache.SCHOOL_DATA_URL),
-  getActiveSchools: getCodes(`${Routes.cache.SCHOOL_DATA_URL}?active=true`),
-  getActiveDistricts: getCodes(`${Routes.cache.DISTRICT_DATA_URL}?active=true`),
-  getSchools:getCodes(Routes.cache.SCHOOL_DATA_URL),
-  getDistricts:getCodes(Routes.cache.DISTRICT_DATA_URL),
-  getAuthorities:getCodes(Routes.cache.AUTHORITY_DATA_URL),
-  getActiveAuthorities:getCodes(`${Routes.cache.AUTHORITY_DATA_URL}?active=true`),
-  getFedProvSchoolCodes: getCodes(`${Routes.SCHOOL_DATA_URL}/fedProvSchoolCodes`),
-  getExchangeStatuses: getCodes(`${Routes.edx.STATUSES_URL}`),
-  getMinistryTeams: getCodes(`${Routes.edx.USERS_URL}/ministryTeams`),
-  getValidSchoolIDsForMessaging: getCodes(Routes.edx.VALID_USERS_FOR_MESSAGING),
-  getValidDistrictIDsForMessaging: getCodes(Routes.edx.VALID_DISTRICT_USERS_FOR_MESSAGING),
-  getEdxRoles: getCodes(`${Routes.edx.USERS_URL}/roles`),
-  getFileRequirements: getCodes(Routes.edx.EXCHANGE_FILE_REQUIREMENTS_URL),
-  getFacilityTypeCodes: getCodes(Routes.cache.FACILITY_TYPES_URL),
-  getSchoolCategoryTypeCodes: getCodes(Routes.cache.SCHOOL_CATEGORY_TYPES_URL),
-  getSchoolOrganizationTypeCodes: getCodes(Routes.cache.SCHOOL_ORGANIZATION_TYPES_URL),
-  getSchoolReportingRequirementTypeCodes: getCodes(
-    Routes.cache.SCHOOL_REPORTING_REQUIREMENT_TYPES_URL
-  ),
-  getSchoolNeighborhoodLearningCodes: getCodes(Routes.cache.SCHOOL_NEIGHBORHOOD_LEARNING_TYPES_URL),
-  getAuthorityTypeCodes: getCodes(Routes.cache.AUTHORITY_TYPES_URL),
-  getInstituteGradeCodes: getCodes(Routes.cache.GRADE_TYPES_URL),
-  getInstituteProvinceCodes: getCodes(Routes.cache.PROVINCES_URL),
-  getInstituteCountryCodes: getCodes(Routes.cache.COUNTRIES_URL),
-  getSchoolApiMincodeSchoolNames: getCodes(Routes.SCHOOL_DATA_URL),
-  getSchoolCategoryFacilityTypes: getCodes(Routes.cache.SCHOOL_CATEGORY_FACILITY_TYPE_URL),
-  getAllActiveFacilityTypeCodes: getCodes(`${Routes.cache.FACILITY_TYPES_URL}?active=true`),
-  getAllActiveSchoolCategoryTypeCodes: getCodes(`${Routes.cache.SCHOOL_CATEGORY_TYPES_URL}?active=true`),
-  getAllActiveSchoolOrganizationTypeCodes: getCodes(`${Routes.cache.SCHOOL_ORGANIZATION_TYPES_URL}?active=true`),
-  getAllActiveSchoolNeighborhoodLearningCodes: getCodes(`${Routes.cache.SCHOOL_NEIGHBORHOOD_LEARNING_TYPES_URL}?active=true`),
-  getAllActiveAuthorityTypeCodes: getCodes(`${Routes.cache.AUTHORITY_TYPES_URL}?active=true`),
-  getAllActiveInstituteGradeCodes: getCodes(`${Routes.cache.GRADE_TYPES_URL}?active=true`),
-  getAllActiveInstituteProvinceCodes: getCodes(`${Routes.cache.PROVINCES_URL}?active=true`),
-  getAllActiveInstituteCountryCodes: getCodes(`${Routes.cache.COUNTRIES_URL}?active=true`),
-  getAllFundingGroups: getCodes(`${Routes.sdc.FUNDING_DATA_URL}`),
+  // TODO jstorey not sure if we are going to want to get codes this way...
+  //getAllActiveInstituteProvinceCodes: getCodes(`${Routes.cache.PROVINCES_URL}?active=true`),
+  //getAllActiveInstituteCountryCodes: getCodes(`${Routes.cache.COUNTRIES_URL}?active=true`),
+
   async getConfig() {
     try {
-      const response = await apiAxios.get(Routes.CONFIG);
-      return response;
+      const response = await apiAxios.get(Routes.CONFIG)
+      return response
     } catch (e) {
-      console.log(`Failed to do get from Nodejs getConfig API - ${e}`);
-      throw e;
+      console.log(`Failed to do get from Nodejs getConfig API - ${e}`)
+      throw e
     }
   },
-};
+}
diff --git a/frontend/src/components/TheEnvBar.vue b/frontend/src/components/TheEnvBar.vue
index 89a7f870..dbd81010 100644
--- a/frontend/src/components/TheEnvBar.vue
+++ b/frontend/src/components/TheEnvBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-app-bar class="env-bar" v-if="bannerColor !== ''" :color="bannerColor" height="20">
+  <v-app-bar class="env-bar" v-if="bannerColor !== ''" :color="bannerColor" height="20" style="margin-top: 2px; position: relative">
     <div>
       <h3 class="envBanner">{{ bannerEnvironment }} Environment</h3>
     </div>
diff --git a/frontend/src/components/TheHeader.vue b/frontend/src/components/TheHeader.vue
index d7100f59..2a563916 100644
--- a/frontend/src/components/TheHeader.vue
+++ b/frontend/src/components/TheHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app-bar absolute color="rgb(0, 51, 102)" class="pl-10 pr-10 sysBar" style="z-index: 1002">
     <!-- Navbar content -->
-    <v-container class="mx-auto" :class="{ sizingForIconXLScreen: xl }">
+    <v-container class="ma-0" :class="{ sizingForIconXLScreen: xl }" style="width: 100%" :fluid="true">
       <v-row class="justify-space-between">
         <a tabindex="-1" href="/">
           <img tabindex="-1" src="@/assets/images/bc-gov-logo.svg" class="logo" alt="B.C. Government Logo" />
@@ -15,7 +15,7 @@
           </v-row>
         </v-row>
         <v-spacer></v-spacer>
-        <div v-if="isAuthenticated && user" class="mt-5">
+        <!-- <div v-if="isAuthenticated && userInfo" class="mt-5">
           <v-btn @click="goToMessagePage()" id="mail_box_button" rounded class="mr-5 elevation-0" dark>
             <v-badge color="red" class="pt-0" :content="unreadMessageCount" bottom right overlap offset-x="8" offset-y="28">
               <v-icon aria-hidden="false" icon="mdi-email-outline" size="40" color="white" />
@@ -24,10 +24,8 @@
           <v-menu name="user_options" offset-y>
             <template #activator="{ props }">
               <v-chip v-bind="props" tabindex="0" pill color="#003366" dark class="mt-1">
-                <v-avatar left color="info">
-                  {{ user.userName[0] }}
-                </v-avatar>
-                <span class="display-name pl-1">{{ user.userName }}</span>
+                <v-avatar left color="info"></v-avatar>
+                <span class="display-name pl-1"></span>
               </v-chip>
             </template>
             <v-list dark style="background-color: #003366; color: white">
@@ -35,6 +33,9 @@
               <v-list-item :href="routes.LOGOUT" id="logout_button" style="min-height: 4vh" title="Logout" />
             </v-list>
           </v-menu>
+        </div> -->
+        <div class="logout" v-if="isAuthenticated">
+          <v-btn :href="routes.LOGOUT" variant="plain" class="logout-link">Log out</v-btn>
         </div>
       </v-row>
     </v-container>
@@ -42,7 +43,7 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'pinia'
+import { mapState } from 'pinia'
 import { Routes } from '@/utils/constants'
 import { useAuthStore } from '@/stores/auth'
 
@@ -50,16 +51,8 @@ export default {
   data() {
     return {
       routes: Routes,
-      user: null,
     }
   },
-  created() {
-    useAuthStore()
-      .getUserInfo()
-      .then(() => {
-        this.user = this.userInfo
-      })
-  },
   computed: {
     ...mapState(useAuthStore, ['userInfo', 'isAuthenticated']),
     unreadMessageCount() {
@@ -79,10 +72,6 @@ export default {
       return this.$vuetify.display.xs
     },
   },
-  methods: {
-    ...mapActions(useAuthStore, ['getUserInfo']),
-    useAuthStore,
-  },
 }
 </script>
 
@@ -106,6 +95,26 @@ a {
   height: 77px;
 }
 
+.logout {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  float: right;
+}
+
+.logout-link {
+  text-decoration: underline;
+  font-size: 1rem;
+  line-height: 2.25rem;
+  color: #ffffff;
+  cursor: pointer;
+  opacity: 1;
+}
+
+.logout-link:hover {
+  text-decoration: none;
+}
+
 .verticalLine {
   border-left: 1px solid #dfb433;
   height: 50px;
@@ -135,10 +144,12 @@ a {
 .v-chip .v-chip__content {
   padding-right: 12px;
 }
+
 .v-chip .v-chip__content:hover {
   background: rgba(255, 255, 255, 0.05);
   border-radius: 15px;
 }
+
 .v-chip .v-chip__content:active {
   background: rgba(255, 255, 255, 0.5);
 }
diff --git a/frontend/src/components/TheMenu.vue b/frontend/src/components/TheMenu.vue
index 881c76bc..6f01fa02 100644
--- a/frontend/src/components/TheMenu.vue
+++ b/frontend/src/components/TheMenu.vue
@@ -1,23 +1,28 @@
 <template>
-  <v-navigation-drawer style="width: 200px; z-index: 0" permanent>
-    <AppMenuItem icon="mdi-home-outline" :to="{ name: 'home' }">Home</AppMenuItem>
-    <AppMenuItem>
-      <v-badge color="red" :content="unreadMessageCount" offset-x="14" offset-y="20">
-        <v-icon class="menu-email-icon" aria-hidden="false" icon="mdi-email-outline" size="30" />
-      </v-badge>
-      Messaging
-    </AppMenuItem>
-    <AppMenuItem icon="mdi-text-box-outline">Reporting</AppMenuItem>
-    <AppMenuItem icon="mdi-currency-usd">Funding</AppMenuItem>
-    <AppMenuItem icon="mdi-account-group-outline">Enrollment</AppMenuItem>
-  </v-navigation-drawer>
+  <div v-if="isAuthenticated && userInfo">
+    <v-navigation-drawer style="z-index: 0" :permanent="true">
+      <AppMenuItem icon="mdi-home-outline" :to="{ name: 'home' }">Home</AppMenuItem>
+      <AppMenuItem>
+        <v-badge color="red" :content="unreadMessageCount" offset-x="14" offset-y="20">
+          <v-icon class="menu-email-icon" aria-hidden="false" icon="mdi-email-outline" size="30" />
+        </v-badge>
+        Messaging
+      </AppMenuItem>
+      <AppMenuItem icon="mdi-text-box-outline">Reporting</AppMenuItem>
+      <AppMenuItem icon="mdi-currency-usd">Funding</AppMenuItem>
+      <AppMenuItem icon="mdi-account-group-outline">Enrollment</AppMenuItem>
+    </v-navigation-drawer>
+  </div>
 </template>
 
 <script>
+import { mapState } from 'pinia'
+import { useAuthStore } from '@/stores/auth'
 import AppMenuItem from '@/components/ui/AppMenuItem.vue'
 export default {
   components: { AppMenuItem },
   computed: {
+    ...mapState(useAuthStore, ['userInfo', 'isAuthenticated']),
     unreadMessageCount() {
       return Math.floor(Math.random() * 10)
     },
diff --git a/frontend/src/components/TheModalIdle.vue b/frontend/src/components/TheModalIdle.vue
index 574e639b..4631bd2e 100644
--- a/frontend/src/components/TheModalIdle.vue
+++ b/frontend/src/components/TheModalIdle.vue
@@ -26,15 +26,16 @@ export default {
     async checkAndLogoutUserOnSessionExpiry() {
       if (this.isAuthenticated) {
         try {
-          const response = await ApiService.apiAxios.get(Routes.SESSION_REMAINING_TIME);
-          if (response.data > 0) {
-            const timeOutValue = parseInt(response.data) + 200; // add 200 ms
-            setTimeout(() => {
-              this.checkAndLogoutUserOnSessionExpiry();
-            }, timeOutValue);
-          } else {
-            window.location = document.getElementById('logout_href').href;
-          }
+          //TODO uncommented in sprint 1... leave incase we need.
+          /*        const response = await ApiService.apiAxios.get(Routes.SESSION_REMAINING_TIME);
+                    if (response.data > 0) {
+                      const timeOutValue = parseInt(response.data) + 200; // add 200 ms
+                      setTimeout(() => {
+                        this.checkAndLogoutUserOnSessionExpiry();
+                      }, timeOutValue);
+                    } else {
+                      window.location = document.getElementById('logout_href').href;
+                    } */
         } catch (e) {
           window.location = document.getElementById('logout_href').href
         }
diff --git a/frontend/src/components/ui/AppButton.vue b/frontend/src/components/ui/AppButton.vue
index 7606c052..ca3a21ed 100644
--- a/frontend/src/components/ui/AppButton.vue
+++ b/frontend/src/components/ui/AppButton.vue
@@ -1,11 +1,12 @@
 <template>
   <v-btn class="BC-Gov-PrimaryButton" v-bind="$attrs">
     <slot />
+    <v-icon v-if="$attrs.icon">{{ $attrs.icon }}</v-icon>
   </v-btn>
 </template>
 <script>
 export default {
-  inheritAttrs: false,
+  inheritAttrs: true,
 }
 </script>
 <style scoped>
@@ -14,8 +15,10 @@ export default {
   border: none;
   border-radius: 4px;
   color: white;
-  margin: 8px; /* ma-2 */
-  padding: 0 12px; /* px-3 */
+  margin: 8px;
+  /* ma-2 */
+  padding: 0 12px;
+  /* px-3 */
   /* padding: 12px 32px;
   text-align: center;
   text-decoration: none;
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 09ff9464..3e405663 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,16 +1,16 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
-import { useAppStore } from '@/stores/app'
-import { useAuthStore } from '@/stores/auth'
-import { PAGE_TITLES } from '@/utils/constants'
 import BackendSessionExpiredView from '@/views/BackendSessionExpiredView.vue'
 import ErrorView from '@/views/ErrorView.vue'
 import HomeView from '@/views/HomeView.vue'
 import LoginView from '@/views/LoginView.vue'
 import LogoutView from '@/views/LogoutView.vue'
+import { PAGE_TITLES } from '@/utils/constants'
 import SessionExpiredView from '@/views/SessionExpiredView.vue'
 import UnAuthorizedPageView from '@/views/UnAuthorizedPageView.vue'
 import UnAuthorizedView from '@/views/UnAuthorizedView.vue'
+import { useAppStore } from '@/stores/app'
+import { useAuthStore } from '@/stores/auth'
 
 const router = createRouter({
   history: createWebHistory(),
@@ -178,52 +178,40 @@ router.beforeEach((to, _from, next) => {
     appStore.setPageTitle('')
   }
 
-  const aStore = useAuthStore()
-  // this section is to handle the backend session expiry, where frontend vue session is still valid.
-  if (to.meta.requiresAuth && aStore.isAuthenticated) {
-    validateAndExecute('/token-expired', to)
-  } else if (to.meta.requiresAuth) {
-    validateAndExecute('login', to)
-  } else {
-    next()
-  }
-
-  function validateAndExecute(nextRouteInError, to) {
-    const authStore = useAuthStore()
+  const authStore = useAuthStore()
+  if (to.meta.requiresAuth) {
     authStore
       .getJwtToken()
       .then(() => {
         if (!authStore.isAuthenticated) {
-          next(nextRouteInError)
-          return
-        }
-        if (!to.meta.role) {
-          next()
+          next('/token-expired')
           return
         }
         authStore
           .getUserInfo()
           .then(() => {
-            if (!authStore.isAuthorizedUser) {
+            if (!authStore.userHasRoles) {
               next('unauthorized')
               return
             }
-            const hasRole = Object.prototype.hasOwnProperty.call(authStore, to.meta.role) && authStore[to.meta.role]
-            if (!hasRole) {
-              next('unauthorized-page')
-              return
-            }
             next()
           })
-          .catch((e) => {
-            console.log('Unable to get user info: ' + e)
+          .catch((error) => {
+            if (error.response?.status == '401') {
+              next('unauthorized')
+              return
+            }
             next('error')
           })
       })
-      .catch(() => {
-        console.log('Unable to get token')
-        next(nextRouteInError)
+      .catch((err) => {
+        if (!authStore.userInfo) {
+          next('/login')
+        }
+        next('/token-expired')
       })
+  } else {
+    next()
   }
 })
 
diff --git a/frontend/src/stores/auth.js b/frontend/src/stores/auth.js
index f5945318..42238d75 100644
--- a/frontend/src/stores/auth.js
+++ b/frontend/src/stores/auth.js
@@ -1,5 +1,5 @@
 import ApiService from '@/common/apiService'
-import AuthService from '@/common/authService';
+import AuthService from '@/common/authService'
 import { Routes } from '@/utils/constants'
 import { defineStore } from 'pinia'
 
@@ -9,23 +9,21 @@ export const useAuthStore = defineStore('auth', {
     acronyms: [],
     isAuthenticated: localStorage.getItem('jwtToken') !== null,
     isAuthorizedUser: localStorage.getItem('isAuthorizedUser') !== null,
-    userInfo: false,
+    impersonateId: null,
+    userInfo: null,
     isValidChildCareProviderUser: localStorage.getItem('iisValidChildCareProviderUser') !== null,
     isValdProgramUser: localStorage.getItem('isValdProgramUser') !== null,
-    isValidFinancialOpsUser: localStorage.getItem('isValidFinancialOpsUser') !== null
+    isValidFinancialOpsUser: localStorage.getItem('isValidFinancialOpsUser') !== null,
   }),
   getters: {
-    acronymsGet: (state) => state.acronyms,
-    isAuthenticatedGet: (state) => state.isAuthenticated,
-    jwtTokenGet: () => localStorage.getItem('jwtToken'),
-    userInfoGet: (state) => state.userInfo,
+    userHasRoles: (state) => state.userInfo && state.userInfo.roles && state.userInfo.roles.length > 0,
     //TODO: 3 temp roles ('CCP_ROLE', 'OPS_ROLE', 'PCM_ROLE') were created in auth.js (loosely
     //based on OFM requirements) for the purpose of achieving a 1st draft of the frontend that
     //will render a home screen and menu with minimal errors given no authorization/backend integration.
     //Thus the following related code is only temporarly and expected to be replaced...
     CCP_ROLE: (state) => state.isValidChildCareProviderUser,
     OPS_ROLE: (state) => state.isValdProgramUser,
-    PCM_ROLE: (state) => state.isValidFinancialOpsUser
+    PCM_ROLE: (state) => state.isValidFinancialOpsUser,
   },
   actions: {
     //sets Json web token and determines whether user is authenticated
@@ -63,7 +61,16 @@ export const useAuthStore = defineStore('auth', {
         this.userInfo = null
       }
     },
-      // TODO: Temp placeholder code for OFM authorization role processing...
+    async setImpersonateId(impersonateId) {
+      if (impersonateId) {
+        this.impersonateId = impersonateId
+        localStorage.setItem('impersonateId', impersonateId)
+      } else {
+        this.impersonateId = impersonateId
+        localStorage.removeItem('impersonateId')
+      }
+    },
+    // TODO: Temp placeholder code for OFM authorization role processing...
     async setChildCareProviderUser(isValidChildCareProviderUser) {
       if (isValidChildCareProviderUser) {
         this.isValidChildCareProviderUser = true
@@ -73,7 +80,7 @@ export const useAuthStore = defineStore('auth', {
         localStorage.removeItem('isValidChildCareProviderUser')
       }
     },
-      // TODO: Temp placeholder code for OFM authorization role processing...
+    // TODO: Temp placeholder code for OFM authorization role processing...
     async setProgramUser(isValdProgramUser) {
       if (isValdProgramUser) {
         this.isValdProgramUser = true
@@ -83,7 +90,7 @@ export const useAuthStore = defineStore('auth', {
         localStorage.removeItem('isValdProgramUser')
       }
     },
-      // TODO: Temp placeholder code for OFM authorization role processing...
+    // TODO: Temp placeholder code for OFM authorization role processing...
     async setFinancialOpsUser(isValidFinancialOpsUser) {
       if (isValidFinancialOpsUser) {
         this.isValidFinancialOpsUser = true
@@ -101,11 +108,9 @@ export const useAuthStore = defineStore('auth', {
     },
     async getUserInfo() {
       const token = localStorage.getItem('jwtToken')
-
       if (!token) {
         await this.getJwtToken()
       }
-
       if (localStorage.getItem('jwtToken')) {
         const response = await ApiService.apiAxios.get(Routes.USER)
         await this.setUserInfo(response.data)
@@ -130,15 +135,15 @@ export const useAuthStore = defineStore('auth', {
     },
     async setAuthorizations(response) {
       if (response.jwtFrontend) {
-        await this.setJwtToken(response.jwtFrontend);
+        await this.setJwtToken(response.jwtFrontend)
       }
-      ApiService.setAuthHeader(response.jwtFrontend);
-
+      ApiService.setAuthHeader(response.jwtFrontend)
       await this.setAuthorizedUser(response.isAuthorizedUser)
+
       // TODO: Temp placeholder code for OFM authorization role processing...
       await this.setChildCareProviderUser(true)
       await this.setProgramUser(true)
       await this.setFinancialOpsUser(true)
-    }
-  }
+    },
+  },
 })
diff --git a/frontend/src/utils/common.js b/frontend/src/utils/common.js
index 09b411d5..0ca202b8 100644
--- a/frontend/src/utils/common.js
+++ b/frontend/src/utils/common.js
@@ -1,272 +1,17 @@
 'use strict'
 
+import { DateTimeFormatter, LocalDate } from '@js-joda/core'
 import { filter, isPlainObject, sortBy } from 'lodash'
-import rfdc from 'rfdc/default'
 
 import ApiService from '@/common/apiService'
-import { PEN_REQ_BATCH_STUDENT_REQUEST_CODES, Routes } from '@/utils/constants'
 import { getDateFormatter } from '@/utils/format'
-import { DateTimeFormatter, LocalDate } from '@js-joda/core'
-
-// import {gmpRequestStore} from '@/store/modules/gmpRequest';
-// import {umpRequestStore} from '@/store/modules/umpRequest';
-
-export function constructPenMatchObjectFromStudent(student) {
-  return {
-    pen: student.submittedPen,
-    localID: student.localID,
-    surname: student.legalLastName,
-    givenName: student.legalFirstName,
-    middleName: student.legalMiddleNames,
-    usualSurname: student.usualLastName,
-    usualGiven: student.usualFirstName,
-    usualMiddleName: student.usualMiddleNames,
-    dob: student.dob,
-    sex: student.genderCode,
-    enrolledGradeCode: student.gradeCode,
-    mincode: student.mincode.replace(/\s/g, ''),
-    postal: student.postalCode,
-  }
-}
-
-export function constructPenMatchObjectFromNominalRollStudent(nominalRollStudent) {
-  return {
-    surname: nominalRollStudent?.surname,
-    givenName: nominalRollStudent?.givenNames,
-    dob: nominalRollStudent?.birthDate?.replace(/-/g, ''),
-    sex: nominalRollStudent?.gender,
-    enrolledGradeCode: nominalRollStudent?.grade,
-    mincode: nominalRollStudent?.mincode,
-  }
-}
-
-export function getPossibleMatches(penMatch) {
-  return new Promise((resolve, reject) => {
-    ApiService.apiAxios
-      .post('/api/penMatches/', penMatch)
-      .then((response) => {
-        if (
-          response.data &&
-          response.data.matchingRecords &&
-          response.data.matchingRecords.length > 0
-        ) {
-          const studentIDs = response.data.matchingRecords
-            .map((matchingRecord) => {
-              return matchingRecord.studentID
-            })
-            .join()
-          const params = {
-            params: {
-              studentIDs: studentIDs,
-            },
-          }
-          ApiService.apiAxios
-            .get(Routes.student.GET_ALL_STUDENTS_BY_IDS, params)
-            .then((result) => {
-              var ordered = orderStudentsAccordingToPenMatch(result.data, studentIDs)
-              resolve({
-                penStatus: response.data.penStatus,
-                data: ordered,
-              })
-            })
-            .catch((error) => {
-              reject(error)
-            })
-        } else {
-          resolve({
-            penStatus: response.data.penStatus,
-            data: [],
-          })
-        }
-      })
-      .catch((error) => {
-        reject(error)
-      })
-  })
-}
-
-function orderStudentsAccordingToPenMatch(array, order) {
-  return array.sort(function (a, b) {
-    return order.indexOf(a['studentID']) - order.indexOf(b['studentID'])
-  })
-}
+import rfdc from 'rfdc/default'
 
 export function deepCloneObject(objectToBeCloned) {
   const cloned = rfdc(objectToBeCloned)
   return cloned
 }
 
-export function getDemogValidationResults(student) {
-  return new Promise((resolve, reject) => {
-    ApiService.apiAxios
-      .post(Routes.penServices.VALIDATE_DEMOGRAPHICS, student)
-      .then((response) => {
-        resolve(response.data)
-      })
-      .catch((error) => {
-        reject(error)
-      })
-  })
-}
-
-/**
- * this function will only return the below structure
- String possibleMatchID;
- String studentID;
- String matchedStudentID;
- String matchReasonCode;
- <b>if student demographics information is needed, use the method getMatchedRecordssWithDemographicsByStudent.</b>
- * @param studentID
- * @returns {Promise<*[]>|Promise<unknown>}
- */
-export function getMatchedRecordsByStudent(studentID) {
-  if (studentID) {
-    return new Promise((resolve, reject) => {
-      ApiService.apiAxios
-        .get(`${Routes.penMatch.POSSIBLE_MATCHES}/${studentID}`)
-        .then((response) => {
-          resolve(response.data)
-        })
-        .catch((error) => {
-          reject(error)
-        })
-    })
-  } else {
-    return Promise.resolve([]) // resolve blank array if student id is not present.
-  }
-}
-
-/**
- * this function will return the demog details of matched students
- *
- <b>if student demographics information is not needed, use the method getMatchedRecordsByStudent.</b>
- * @param studentID
- * @param includingQueriedStudent
- * @returns {Promise<*[]>|Promise<unknown>}
- */
-export async function getMatchedRecordssWithDemographicsByStudent(
-  studentID,
-  includingQueriedStudent = false,
-) {
-  if (studentID) {
-    const possibleMatches = await ApiService.apiAxios.get(
-      `${Routes.penMatch.POSSIBLE_MATCHES}/${studentID}`,
-    )
-    const matchedStudentIDs = possibleMatches.data.map((match) => match.matchedStudentID)
-    const studentIDs = (
-      includingQueriedStudent ? [studentID, ...matchedStudentIDs] : matchedStudentIDs
-    ).join()
-
-    const params = {
-      params: {
-        studentIDs,
-      },
-    }
-    const { data: result } = await ApiService.apiAxios.get(
-      Routes.student.GET_ALL_STUDENTS_BY_IDS,
-      params,
-    )
-    let matchedIndex = -1
-
-    result.forEach((item, index) => {
-      if (item.studentID === studentID) {
-        item.matchedToStudent = true
-        item.iconValue = 'mdi-file-check'
-        matchedIndex = index
-      } else {
-        item.possibleMatchedToStudent = true
-        item.iconValue = 'mdi-account-multiple'
-      }
-    })
-
-    return matchedIndex > 0
-      ? [result[matchedIndex], ...result.slice(0, matchedIndex), ...result.slice(matchedIndex + 1)]
-      : result
-  } else {
-    return [] // resolve blank array if student id is not present.
-  }
-}
-
-export function updatePossibleMatchResultsBasedOnCurrentStatus(
-  prbStudent,
-  possibleMatches,
-  matchedStudentRecords,
-) {
-  if (
-    (prbStudent?.penRequestBatchStudentStatusCode ===
-      PEN_REQ_BATCH_STUDENT_REQUEST_CODES.MATCHEDUSR ||
-      prbStudent?.penRequestBatchStudentStatusCode ===
-        PEN_REQ_BATCH_STUDENT_REQUEST_CODES.MATCHEDSYS ||
-      prbStudent?.penRequestBatchStudentStatusCode ===
-        PEN_REQ_BATCH_STUDENT_REQUEST_CODES.NEWPENSYS ||
-      prbStudent?.penRequestBatchStudentStatusCode ===
-        PEN_REQ_BATCH_STUDENT_REQUEST_CODES.NEWPENUSR) &&
-    possibleMatches &&
-    possibleMatches.length > 0
-  ) {
-    let matchedRecordNumber = 3.0
-    let newPossibleRecordNumber = 2.0
-    possibleMatches.forEach((item, index) => {
-      if (item.studentID === prbStudent?.studentID) {
-        item.matchedToStudent = true
-        item.iconValue = 'mdi-file-check'
-        item.recordNum = 1 // it is expected to be executed only once
-      } else if (
-        matchedStudentRecords &&
-        filter(matchedStudentRecords, ['matchedStudentID', item.studentID]).length > 0
-      ) {
-        item.possibleMatchedToStudent = true
-        matchedRecordNumber += 0.1
-        item.iconValue = 'mdi-account-multiple'
-        item.recordNum = matchedRecordNumber
-      } else {
-        item.iconValue = 'mdi-account-plus'
-        newPossibleRecordNumber += 0.01
-        item.recordNum = newPossibleRecordNumber
-        item.newPossibleMatch = true
-      }
-      possibleMatches[index] = item
-    })
-    return sortBy(possibleMatches, ['recordNum'])
-  } else {
-    return deepCloneObject(possibleMatches)
-  }
-}
-
-export function getSchoolData(mincode) {
-  const params = {
-    params: {
-      mincode: mincode,
-    },
-  }
-  if (mincode) {
-    return new Promise((resolve, reject) => {
-      ApiService.apiAxios
-        .get(Routes.SCHOOL_DATA_URL, params)
-        .then((response) => {
-          resolve(response.data)
-        })
-        .catch((error) => {
-          reject(error)
-        })
-    })
-  } else {
-    return Promise.resolve(null)
-  }
-}
-
-export function setEmptyInputParams(params, ...excludedParams) {
-  Object.keys(params).forEach((key) => {
-    if (!excludedParams.includes(key)) {
-      if (isPlainObject(params[key])) {
-        setEmptyInputParams(params[key], ...excludedParams)
-      } else {
-        params[key] = null
-      }
-    }
-  })
-}
-
 export function equalsIgnoreCase(param1, param2) {
   return param1?.toLowerCase() === param2?.toLowerCase()
 }
@@ -302,22 +47,3 @@ export function abbreviateCamelCase(string) {
     .join('')
     .toLowerCase()
 }
-
-export function isOpenNotClosingAuthority(authority) {
-  const currentTime = LocalDate.now()
-  const openedDate = authority?.openedDate
-  const closedDate = authority?.closedDate
-  return (
-    authority?.name &&
-    openedDate &&
-    currentTime.isAfter(LocalDate.parse(openedDate, DateTimeFormatter.ISO_LOCAL_DATE_TIME)) &&
-    !closedDate
-  )
-}
-
-// export function getRequestStore(requestType) {
-//   if (requestType === 'penRequest') {
-//     return gmpRequestStore();
-//   }
-//   return umpRequestStore();
-// }
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index c8a20cd2..4b307b5d 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -1,22 +1,5 @@
 let baseRoot = '/api'
 const authRoot = baseRoot + '/auth'
-const penRequestBatchRoot = baseRoot + '/penRequestBatch'
-const penRequestRoot = baseRoot + '/penRequest'
-const digitalIDRoot = baseRoot + '/digitalID'
-const sldRequestRoot = baseRoot + '/sld'
-const studentRequestRoot = baseRoot + '/studentRequest'
-const demographicRoot = baseRoot + '/studentDemographics'
-const studentRoot = baseRoot + '/students'
-const penServicesRoot = baseRoot + '/pen-services'
-const schoolRequestRoot = baseRoot + '/schools'
-const penTraxRoot = baseRoot + '/penTrax'
-const penMatchRoot = baseRoot + '/penMatches'
-const macroRoot = baseRoot + '/macros'
-const nominalRollRoot = baseRoot + '/nominal-roll'
-const edxRoot = baseRoot + '/edx'
-const instituteRoot = baseRoot + '/institute'
-const cacheRoot = baseRoot + '/cache'
-const sdcRoot = baseRoot + '/sdc'
 
 let object = {
   LOGIN: authRoot + '/login',
@@ -27,367 +10,17 @@ let object = {
   TOKEN: authRoot + '/token',
   USER: baseRoot + '/user',
   SESSION_REMAINING_TIME: authRoot + '/user-session-remaining-time',
-  CONFIG: baseRoot + '/config/lookup',
-
-  digitalIdentity: {
-    ROOT_ENDPOINT: digitalIDRoot,
-    DIGITAL_ID_LIST_URL: digitalIDRoot + '/list',
-  },
-
-  penRequestBatch: {
-    ROOT_ENDPOINT: penRequestBatchRoot,
-    STATS_URL: penRequestBatchRoot + '/stats',
-    FILES_URL: penRequestBatchRoot,
-    SOURCE_URL: penRequestBatchRoot + '/source',
-    SOURCE_METADATA_URL: penRequestBatchRoot + '/sourceMetadata',
-    STUDENTS_SEARCH_URL: penRequestBatchRoot + '/students',
-    SAME_PEN_SEARCH_URL: penRequestBatchRoot + '/same-pen',
-    STUDENT_STATUS_CODE_URL: penRequestBatchRoot + '/studentStatusCodes',
-    MATCH_OUTCOME_URL: penRequestBatchRoot + '/matchOutcome',
-    STUDENT_INFO_MACROS_URL: macroRoot + '/?businessUseTypeCode=PENREG&macroTypeCode=INFOREQ',
-    PRB_VALIDATION_FIELD_CODE_URL: penRequestBatchRoot + '/prbValidationFieldCodes',
-    PRB_VALIDATION_ISSUE_SEVERITY_CODE_URL: penRequestBatchRoot + '/prbValidationSeverityCodes',
-    PRB_VALIDATION_ISSUE_TYPE_CODE_URL: penRequestBatchRoot + '/prbValidationTypeCodes',
-  },
-
-  penRequest: {
-    ROOT_ENDPOINT: penRequestRoot,
-    SEARCH_URL: penRequestRoot + '/',
-    DUPLICATE_REQUESTS_URL: penRequestRoot + '/duplicatePenRequests',
-    STATUSES_URL: penRequestRoot + '/codes/requeststatuses',
-    DOCUMENT_TYPES_URL: penRequestRoot + '/codes/documentTypes',
-    COMPLETE_URL: penRequestRoot + '/complete',
-    REJECT_URL: penRequestRoot + '/reject',
-    RETURN_URL: penRequestRoot + '/return',
-    MACRO_URL: macroRoot + '/?businessUseTypeCode=GMP',
-    UNLINK_URL: penRequestRoot + '/unlink',
-    STATS_URL: penRequestRoot + '/stats',
-  },
-
-  sld: {
-    ROOT_ENDPOINT: sldRequestRoot,
-    STUDENT_HISTORY_URL: sldRequestRoot + '/studentHistory',
-  },
-
-  studentRequest: {
-    ROOT_ENDPOINT: studentRequestRoot,
-    SEARCH_URL: studentRequestRoot + '/',
-    DUPLICATE_REQUESTS_URL: studentRequestRoot + '/duplicatePenRequests',
-    STATUSES_URL: studentRequestRoot + '/codes/requeststatuses',
-    DOCUMENT_TYPES_URL: studentRequestRoot + '/codes/documentTypes',
-    COMPLETE_URL: studentRequestRoot + '/complete',
-    REJECT_URL: studentRequestRoot + '/reject',
-    RETURN_URL: studentRequestRoot + '/return',
-    MACRO_URL: macroRoot + '/?businessUseTypeCode=UMP',
-    STATS_URL: studentRequestRoot + '/stats',
-  },
-
-  student: {
-    ROOT_ENDPOINT: studentRoot,
-    SEARCH_URL: studentRoot + '/search',
-    SEARCH_BY_PEN_URL: studentRoot + '/',
-    GENDER_CODE_URL: studentRoot + '/activeGenderCodes',
-    DEMOG_CODE_URL: studentRoot + '/demogCodes',
-    STATUS_CODE_URL: studentRoot + '/statusCodes',
-    GRADE_CODE_URL: studentRoot + '/gradeCodes',
-    HISTORY_ACTIVITY_CODE_URL: studentRoot + '/historyActivityCodes',
-    GET_ALL_STUDENTS_BY_IDS: studentRoot + '/allStudents',
-    DOC_TYPE_CODES_URL: studentRoot + '/document-type-codes',
-  },
-  SCHOOL_DATA_URL: schoolRequestRoot,
-  institute: {
-    ROOT_ENDPOINT: instituteRoot,
-    SCHOOL_DATA_URL: instituteRoot + '/school',
-    SCHOOL_NOTE_URL: instituteRoot + '/school/note',
-    SCHOOL_CONTACT_URL: instituteRoot + '/school/contact',
-    SCHOOL_PAGINATED_DATA_URL: instituteRoot + '/schoolsPaginated',
-    SCHOOL_HISTORY_PAGINATED_DATA_URL: instituteRoot + '/schoolHistoryPaginated',
-    SCHOOL_MOVE_URL: instituteRoot + '/school/moveSchool',
-    DISTRICT_DATA_URL: instituteRoot + '/district',
-    DISTRICT_CONTACT_URL: instituteRoot + '/district/contact',
-    DISTRICT_NOTE_URL: instituteRoot + '/district/note',
-    AUTHORITY_DATA_URL: instituteRoot + '/authority',
-    AUTHORITY_CONTACT_URL: instituteRoot + '/authority/contact',
-    AUTHORITY_NOTE_URL: instituteRoot + '/authority/note',
-    AUTHORITIES_PAGINATED_DATA_URL: instituteRoot + '/authoritiesPaginated',
-  },
-  cache: {
-    ROOT_ENDPOINT: cacheRoot,
-    SCHOOL_DATA_URL: cacheRoot + '/school',
-    DISTRICT_DATA_URL: cacheRoot + '/district',
-    AUTHORITY_DATA_URL: cacheRoot + '/authority',
-    FACILITY_TYPES_URL: cacheRoot + '/facility-types',
-    DISTRICT_CONTACT_TYPE_CODES: cacheRoot + '/district-contact-types',
-    SCHOOL_CATEGORY_TYPES_URL: cacheRoot + '/school-category-types',
-    SCHOOL_ORGANIZATION_TYPES_URL: cacheRoot + '/school-organization-types',
-    SCHOOL_NEIGHBORHOOD_LEARNING_TYPES_URL: cacheRoot + '/school-neighborhood-learning-types',
-    SCHOOL_REPORTING_REQUIREMENT_TYPES_URL: instituteRoot + '/reporting-requirement-codes',
-    AUTHORITY_TYPES_URL: cacheRoot + '/authority-types',
-    AUTHORITY_CONTACT_TYPES_URL: cacheRoot + '/authority-contact-types',
-    GRADE_TYPES_URL: cacheRoot + '/grade-codes',
-    PROVINCES_URL: cacheRoot + '/province-codes',
-    COUNTRIES_URL: cacheRoot + '/country-codes',
-    SCHOOL_CONTACT_TYPES_URL: cacheRoot + '/school-contact-types',
-    SCHOOL_CATEGORY_FACILITY_TYPE_URL: cacheRoot + '/school-category-facility-type',
-  },
-  penServices: {
-    ROOT_ENDPOINT: penServicesRoot,
-    VALIDATE_DEMOGRAPHICS: penServicesRoot + '/demog-validation',
-    MACRO_URL: macroRoot + '/?businessUseTypeCode=PENREG&macroTypeCode=MERGE',
-  },
-  STUDENT_DATA_URL: studentRoot,
-  SEARCH_BY_PEN: demographicRoot,
-  PEN_TRAX_URL: penTraxRoot,
-  penMatch: {
-    ROOT_ENDPOINT: penMatchRoot,
-    POSSIBLE_MATCHES: penMatchRoot + '/possible-match',
-    POSSIBLE_MATCH_REASON_CODES: penMatchRoot + '/possible-match-reason-codes',
-  },
-  MACRO_URL: macroRoot,
-  nominalRoll: {
-    ROOT_ENDPOINT: nominalRollRoot,
-    PAGINATED_ENDPOINT: nominalRollRoot + '/search',
-  },
-  edx: {
-    ROOT_ENDPOINT: edxRoot,
-    STATS_URL: edxRoot + '/exchange/stats',
-    EXCHANGE_URL: edxRoot + '/exchange',
-    EXCHANGE_FILE_REQUIREMENTS_URL: edxRoot + '/exchange/file-requirements',
-    STATUSES_URL: edxRoot + '/exchange/statuses',
-    CLAIM_URL: edxRoot + '/exchange/claim',
-    CLAIM_ONE_URL: edxRoot + '/exchange/claimOne',
-    USERS_URL: edxRoot + '/users',
-    VALID_USERS_FOR_MESSAGING: edxRoot + '/valid-schools-for-messaging',
-    VALID_DISTRICT_USERS_FOR_MESSAGING: edxRoot + '/valid-districts-for-messaging',
-    EXCHANGE_ACCESS_URL: edxRoot + '/users',
-    EXCHANGE_ACCESS_ROLES_URL: edxRoot + '/users/roles',
-    EXCHANGE_REMOVE_USER: edxRoot + '/users/remove',
-    EXCHANGE_RELINK_USER: edxRoot + '/users/relink',
-    PRIMARY_ACTIVATION_CODE_URL: edxRoot + '/users/activation-code/primary',
-    NEW_SCHOOL_USER_ACTIVATION_INVITE: edxRoot + '/school-user-activation-invite',
-    NEW_DISTRICT_USER_ACTIVATION_INVITE: edxRoot + '/district-user-activation-invite',
-  },
-  sdc: {
-    FUNDING_DATA_URL: sdcRoot + '/funding-groups',
-    SDC_SCHOOL_COLLECTION: sdcRoot + '/sdcSchoolCollection',
-  },
+  //TODO comment out sprint 1... might need later: CONFIG: baseRoot + '/config/lookup',
 }
 
 //endpoints
 export const Routes = Object.freeze(object)
 
-export const Statuses = Object.freeze({
-  AUTO_MATCH_RESULT_CODES: {
-    ONE_MATCH: 'ONEMATCH',
-    MANY_MATCHES: 'MANYMATCHES',
-    ZERO_MATCHES: 'ZEROMATCHES',
-    RIGHT_PEN: 'RIGHTPEN',
-    WRONG_PEN: 'WRONGPEN',
-  },
-  penRequest: {
-    DRAFT: 'DRAFT',
-    FIRST_REVIEW: 'INITREV',
-    RETURNED: 'RETURNED',
-    SECOND_REVIEW: 'SUBSREV',
-    AUTO_MATCH: 'AUTO',
-    MANUAL_MATCH: 'MANUAL',
-    REJECTED: 'REJECTED',
-    UNMATCHED: 'UNMATCHED',
-    ABANDONED: 'ABANDONED',
-  },
-  studentRequest: {
-    DRAFT: 'DRAFT',
-    FIRST_REVIEW: 'INITREV',
-    RETURNED: 'RETURNED',
-    SECOND_REVIEW: 'SUBSREV',
-    COMPLETED: 'COMPLETED',
-    REJECTED: 'REJECTED',
-    ABANDONED: 'ABANDONED',
-  },
-  exchange: {
-    NEW: 'NEW',
-    INPROG: 'INPROG',
-    CLOSED: 'CLOSED',
-  },
-})
-
-export const REQUEST_TYPES = Object.freeze({
-  /*
-    penRequest: {
-      name: 'penRequest',
-      label: 'PEN Request',
-      searchLabel: 'Select PEN request statuses to view',
-      path: '/gmp',
-      detailName: 'GMP detail'
-    },
-    studentRequest: {
-      name: 'studentRequest',
-      label: 'UMP Request',
-      searchLabel: 'Select UMP request statuses to view',
-      path: '/ump',
-      detailName: 'UMP detail',
-      penName: 'recordedPen'
-    },
-    studentSearch: {
-      name: 'studentSearch',
-      label: 'Student Search',
-      type: {
-        basic: 'basic',
-        advanced: 'advanced'
-      },
-      path: {
-        basic: '/studentSearch/basic',
-        advanced: '/studentSearch/advanced'
-      }
-    },
-    student: {
-      name: 'student',
-      label: 'student detail',
-      path: '/student/'
-    },
-    mergeStudents: {
-      name: 'mergeStudents',
-      label: 'Merge PENs',
-      path: '/mergeStudents/'
-    },
-    penRequestBatch: {
-      name: 'penRequestBatch',
-      label: 'PEN Request Files',
-      path: '/penRequestBatch',
-    },
-    archivedPENRequestBatch: {
-      name: 'archivedRequestBatch',
-      label: 'Archived PEN Request Files',
-      path: '/archivedRequestBatch',
-    },
-    failedRequestBatch: {
-      name: 'failedRequestBatch',
-      label: 'Failed PEN Request Files',
-      path: '/failedRequestBatch',
-    },
-    exchange: {
-      name: 'exchange',
-      label: 'View Secure Messages',
-      path: '/edx/exchange',
-    }
-    */
+export const ACCOUNT_TYPE = Object.freeze({
+  FACILITY: 100000001,
+  ORGANIZATION: 100000000,
 })
-/**
- * Source of truth for field Names in  StudentDetails.vue and its child components.
- * @type {Readonly<{GRADE_CODE: string, TWINS: string, MINCODE: string, GRADE_YEAR: string, CREATED_DATE: string, LEGAL_FIRST_NAME: string, USUAL_LAST_NAME: string,
- * STATUS_CODE: string, GRAD_DATE: string, GENDER_CODE: string, MERGED_TO: string, LEGAL_LAST_NAME: string, POSTAL_CODE: string, DEMOG_CODE: string, TRAX_STATUS: string,
- * DOB: string, LEGAL_MIDDLE_NAMES: string, UPDATED_DATE: string, PEN: string, USUAL_MIDDLE_NAMES: string, MERGED_FROM: string, USUAL_FIRST_NAME: string, LOCAL_ID: string, MEMO: string}>}
- */
-export const STUDENT_DETAILS_FIELDS = Object.freeze({
-  LEGAL_LAST_NAME: 'legalLastName',
-  LEGAL_FIRST_NAME: 'legalFirstName',
-  LEGAL_MIDDLE_NAMES: 'legalMiddleNames',
-  USUAL_LAST_NAME: 'usualLastName',
-  USUAL_FIRST_NAME: 'usualFirstName',
-  USUAL_MIDDLE_NAMES: 'usualMiddleNames',
-  GRADE_CODE: 'gradeCode',
-  GRADE_YEAR: 'gradeYear',
-  POSTAL_CODE: 'postalCode',
-  TWINS: 'twins',
-  MERGED_TO: 'mergedTo',
-  MERGED_FROM: 'mergedFrom',
-  DOB: 'dob',
-  GENDER_CODE: 'genderCode',
-  DEMOG_CODE: 'demogCode',
-  TRAX_STATUS: 'traxStatus',
-  GRAD_DATE: 'gradDate',
-  CREATED_DATE: 'createdDate',
-  UPDATED_DATE: 'updatedDate',
-  LOCAL_ID: 'localID',
-  MINCODE: 'mincode',
-  MEMO: 'memo',
-  PEN: 'pen',
-  STATUS_CODE: 'statusCode',
-  TRUE_STUDENT_ID: 'trueStudentID',
-  DOC_TYPE_CODE: 'documentTypeCode',
-  DATE_OF_CONFIRMATION: 'dateOfConfirmation',
-})
-
-/*  can be made into an object, if more options are needed in the future for example
- *  export const STUDENT_MERGE_FIELDS = {
-       FROM_PREFIX: 'mergeFrom_'
-    };
- **/
-export const STUDENT_MERGE_FIELD_PREFIX = 'mergeFrom_'
-export const STUDENT_MERGE_DETAILS_FIELDS = Object.freeze({
-  LEGAL_LAST_NAME: `${STUDENT_MERGE_FIELD_PREFIX}${STUDENT_DETAILS_FIELDS.LEGAL_LAST_NAME}`,
-  LEGAL_FIRST_NAME: `${STUDENT_MERGE_FIELD_PREFIX}${STUDENT_DETAILS_FIELDS.LEGAL_FIRST_NAME}`,
-  LEGAL_MIDDLE_NAMES: `${STUDENT_MERGE_FIELD_PREFIX}${STUDENT_DETAILS_FIELDS.LEGAL_MIDDLE_NAMES}`,
-  USUAL_LAST_NAME: `${STUDENT_MERGE_FIELD_PREFIX}${STUDENT_DETAILS_FIELDS.USUAL_LAST_NAME}`,
-  USUAL_FIRST_NAME: `${STUDENT_MERGE_FIELD_PREFIX}${STUDENT_DETAILS_FIELDS.USUAL_FIRST_NAME}`,
-  USUAL_MIDDLE_NAMES: `${STUDENT_MERGE_FIELD_PREFIX}${STUDENT_DETAILS_FIELDS.USUAL_MIDDLE_NAMES}`,
-  GENDER_CODE: `${STUDENT_MERGE_FIELD_PREFIX}${STUDENT_DETAILS_FIELDS.GENDER_CODE}`,
-  DOB: `${STUDENT_MERGE_FIELD_PREFIX}${STUDENT_DETAILS_FIELDS.DOB}`,
-  MINCODE: `${STUDENT_MERGE_FIELD_PREFIX}${STUDENT_DETAILS_FIELDS.MINCODE}`,
-  LOCAL_ID: `${STUDENT_MERGE_FIELD_PREFIX}${STUDENT_DETAILS_FIELDS.LOCAL_ID}`,
-  POSTAL_CODE: `${STUDENT_MERGE_FIELD_PREFIX}${STUDENT_DETAILS_FIELDS.POSTAL_CODE}`,
-  MEMO: `${STUDENT_MERGE_FIELD_PREFIX}${STUDENT_DETAILS_FIELDS.MEMO}`,
-})
-
-export const PEN_REQUEST_STUDENT_VALIDATION_FIELD_CODES_TO_STUDENT_DETAILS_FIELDS_MAPPER = Object.freeze({
-  LOCALID: STUDENT_DETAILS_FIELDS.LOCAL_ID,
-  LEGALFIRST: STUDENT_DETAILS_FIELDS.LEGAL_FIRST_NAME,
-  LEGALMID: STUDENT_DETAILS_FIELDS.LEGAL_MIDDLE_NAMES,
-  LEGALLAST: STUDENT_DETAILS_FIELDS.LEGAL_LAST_NAME,
-  USUALFIRST: STUDENT_DETAILS_FIELDS.USUAL_FIRST_NAME,
-  USUALMID: STUDENT_DETAILS_FIELDS.USUAL_MIDDLE_NAMES,
-  USUALLAST: STUDENT_DETAILS_FIELDS.USUAL_LAST_NAME,
-  POSTALCODE: STUDENT_DETAILS_FIELDS.POSTAL_CODE,
-  GRADECODE: STUDENT_DETAILS_FIELDS.GRADE_CODE,
-  BIRTHDATE: STUDENT_DETAILS_FIELDS.DOB,
-  GENDER: STUDENT_DETAILS_FIELDS.GENDER_CODE,
-})
-
-export const NOMINAL_ROLL_STUDENT_FIELDS_TO_STUDENT_DETAILS_FIELDS_MAPPER = Object.freeze({
-  givenNames: { name: STUDENT_DETAILS_FIELDS.LEGAL_FIRST_NAME, label: 'Legal Given' },
-  surname: { name: STUDENT_DETAILS_FIELDS.LEGAL_LAST_NAME, label: 'Legal Surname' },
-  grade: { name: STUDENT_DETAILS_FIELDS.GRADE_CODE, label: 'Grade' },
-  birthDate: { name: STUDENT_DETAILS_FIELDS.DOB, label: 'Birth Date' },
-  gender: { name: STUDENT_DETAILS_FIELDS.GENDER_CODE, label: 'Gen' },
-  schoolNumber: { name: STUDENT_DETAILS_FIELDS.MINCODE, label: 'Mincode' },
-})
-
-export const STUDENT_DETAILS_FIELDS_TO_NOMINAL_ROLL_STUDENT_FIELDS_MAPPER = Object.freeze(
-  Object.fromEntries(Object.entries(NOMINAL_ROLL_STUDENT_FIELDS_TO_STUDENT_DETAILS_FIELDS_MAPPER).map(([key, value]) => [value.name, key])),
-)
 
-export const STUDENT_CODES = Object.freeze({
-  ACTIVE: 'A',
-  DECEASED: 'D',
-  DELETED: 'X',
-  MERGED: 'M',
-})
-export const STUDENT_DEMOG_CODES = Object.freeze({
-  ACTIVE: 'A',
-  CONFIRMED: 'C',
-})
-export const PEN_REQ_BATCH_STUDENT_REQUEST_CODES = Object.freeze({
-  FIXABLE: 'FIXABLE',
-  INFOREQ: 'INFOREQ',
-  MATCHEDSYS: 'MATCHEDSYS',
-  MATCHEDUSR: 'MATCHEDUSR',
-  NEWPENSYS: 'NEWPENSYS',
-  NEWPENUSR: 'NEWPENUSR',
-  ERROR: 'ERROR',
-  REPEAT: 'REPEAT',
-  LOADED: 'LOADED',
-  DUPLICATE: 'DUPLICATE',
-})
-export const PEN_REQ_BATCH_STATUS_CODES = Object.freeze({
-  HOLD_SIZE: 'HOLD_SIZE',
-  DUPLICATE: 'DUPLICATE',
-  ACTIVE: 'ACTIVE',
-  ARCHIVED: 'ARCHIVED',
-  REARCHIVED: 'REARCHIVED',
-  UNARCHIVED: 'UNARCHIVED',
-  UNARCH_CHG: 'UNARCH_CHG',
-  LOAD_FAIL: 'LOADFAIL',
-})
 export const PAGE_TITLES = Object.freeze({
   LOGIN: 'Login',
   INTAKE: 'Intake',
@@ -397,135 +30,3 @@ export const PAGE_TITLES = Object.freeze({
   ACCOUNT_MAINTENANCE: 'Account Maintenance',
   MAINTENANCE_REQUEST_EXCEPTION_STREAM: 'Maint Request Exp Stream',
 })
-
-export const MINISTRY_NAME = 'Ministry of Education and Child Care'
-
-export const SEARCH_FILTER_OPERATION = Object.freeze({
-  /**
-   * Equal filter operation.
-   */
-  EQUAL: 'eq',
-  /**
-   * Not equal filter operation.
-   */
-  NOT_EQUAL: 'neq',
-  /**
-   * Greater than filter operation.
-   */
-  GREATER_THAN: 'gt',
-  /**
-   * Greater than or equal to filter operation.
-   */
-  GREATER_THAN_OR_EQUAL_TO: 'gte',
-  /**
-   * Less than filter operation.
-   */
-  LESS_THAN: 'lt',
-  /**
-   * Less than or equal to filter operation.
-   */
-  LESS_THAN_OR_EQUAL_TO: 'lte',
-  /**
-   * In filter operation.
-   */
-  IN: 'in',
-  /**
-   * Not in filter operation.
-   */
-  NOT_IN: 'nin',
-  /**
-   * Between filter operation.
-   */
-  BETWEEN: 'btn',
-  /**
-   * Contains filter operation.
-   */
-  CONTAINS: 'like',
-  /**
-   * Contains ignore case filter operation.
-   */
-  CONTAINS_IGNORE_CASE: 'like_ignore_case',
-  /**
-   * Starts with filter operation.
-   */
-  STARTS_WITH: 'starts_with',
-  /**
-   * Starts with ignore case filter operation.
-   */
-  STARTS_WITH_IGNORE_CASE: 'starts_with_ignore_case',
-})
-
-export const SEARCH_CONDITION = Object.freeze({
-  /**
-   * And condition.
-   */
-  AND: 'AND',
-  /**
-   * Or condition.
-   */
-  OR: 'OR',
-})
-
-export const SEARCH_VALUE_TYPE = Object.freeze({
-  /**
-   * String value type.
-   */
-  STRING: 'STRING',
-  /**
-   * Integer value type.
-   */
-  INTEGER: 'INTEGER',
-  /**
-   * Long value type.
-   */
-  LONG: 'LONG',
-  /**
-   * Date value type.
-   */
-  DATE: 'DATE',
-  /**
-   * Date time value type.
-   */
-  DATE_TIME: 'DATE_TIME',
-  /**
-   * Uuid value type.
-   */
-  UUID: 'UUID',
-})
-
-export const PRB_SAGA_NAMES = Object.freeze({
-  PEN_REQUEST_BATCH_USER_MATCH_PROCESSING_SAGA: 'PEN_REQUEST_BATCH_USER_MATCH_PROCESSING_SAGA',
-  PEN_REQUEST_BATCH_USER_UNMATCH_PROCESSING_SAGA: 'PEN_REQUEST_BATCH_USER_UNMATCH_PROCESSING_SAGA',
-  PEN_REQUEST_BATCH_NEW_PEN_PROCESSING_SAGA: 'PEN_REQUEST_BATCH_NEW_PEN_PROCESSING_SAGA',
-})
-
-export const NOMINAL_ROLL_STUDENT_STATUSES = Object.freeze([
-  {
-    value: 'MATCHEDSYS',
-    text: 'Matched by system',
-  },
-  {
-    value: 'MATCHEDUSR',
-    text: 'Matched by user',
-  },
-  {
-    value: 'FIXABLE',
-    text: 'Fixable Request',
-  },
-  {
-    value: 'ERROR',
-    text: 'Error',
-  },
-  {
-    value: 'LOADED',
-    text: 'Loaded',
-  },
-  {
-    value: 'IGNORED',
-    text: 'Ignored',
-  },
-])
-
-export const NOMINAL_ROLL_STUDENT_STATUS_CODES = Object.freeze(Object.fromEntries(NOMINAL_ROLL_STUDENT_STATUSES.map((status) => [status.value, status.value])))
-
-export const EDX_SAGA_REQUEST_DELAY_MILLISECONDS = 2000
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index cf01f899..66c177c3 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,3 +1,119 @@
 <template>
-  <v-card title="OFM" subtitle="Temp Home Screen" text="..." style="height: 100%"></v-card>
+  <div v-if="isAuthenticated && userInfo">
+    <v-container>
+      <v-card>
+        <v-card-title>
+          User
+        </v-card-title>
+        <v-card-text>
+          <v-list>
+            <v-list-item>
+              <v-list-item-title>Username:</v-list-item-title>
+              <v-list-item-subtitle>{{ userInfo.username }}</v-list-item-subtitle>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-title>User ID:</v-list-item-title>
+              <v-list-item-subtitle>{{ userInfo.userId }}</v-list-item-subtitle>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-title>Given Name:</v-list-item-title>
+              <v-list-item-subtitle>{{ userInfo.firstName }} {{ userInfo.firstName }}</v-list-item-subtitle>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-title>Email:</v-list-item-title>
+              <v-list-item-subtitle>{{ userInfo.email }}</v-list-item-subtitle>
+            </v-list-item>
+          </v-list>
+        </v-card-text>
+      </v-card>
+    </v-container>
+    <v-container>
+      <v-card>
+        <v-card-title>
+          Roles
+        </v-card-title>
+        <v-card-text>
+          <v-list>
+            <v-list-item>
+              <v-list-item-subtitle>{{ userInfo.roles }} (WIP: will convert #s to descriptions)</v-list-item-subtitle>
+            </v-list-item>
+          </v-list>
+        </v-card-text>
+      </v-card>
+    </v-container>
+    <v-container>
+      <v-card>
+        <v-card-title>
+          Organization
+        </v-card-title>
+        <v-card-text>
+          <v-list>
+            <v-list-item>
+              <v-list-item-title>ID:</v-list-item-title>
+              <v-list-item-subtitle>{{ userInfo.organizationId }}</v-list-item-subtitle>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-title>Account Number:</v-list-item-title>
+              <v-list-item-subtitle>{{ userInfo.organizationAccountNumber }}</v-list-item-subtitle>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-title>Name:</v-list-item-title>
+              <v-list-item-subtitle>{{ userInfo.organizationName }}</v-list-item-subtitle>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-title>Type:</v-list-item-title>
+              <v-list-item-subtitle>{{ userInfo.organizationAccountType }} (WIP: will convert # to
+                description)</v-list-item-subtitle>
+            </v-list-item>
+          </v-list>
+        </v-card-text>
+      </v-card>
+    </v-container>
+    <v-container>
+      <v-card>
+        <v-card-title>
+          Facilities
+        </v-card-title>
+        <v-card-text>
+          <!-- TODO fix: v-list with v-for is throughing warning in browser concole -->
+          <v-list v-for="(facility, index) in userInfo.facilityPermission" :key="index">
+            <v-list-item>
+              <v-list-item-title>Facility ID:</v-list-item-title>
+              <v-list-item-subtitle>{{ facility.facilityId }}</v-list-item-subtitle>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-title>Facility Account Number:</v-list-item-title>
+              <v-list-item-subtitle>{{ facility.facilityAccountNumber }}</v-list-item-subtitle>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-title>Facility Name:</v-list-item-title>
+              <v-list-item-subtitle>{{ facility.facilityName }}</v-list-item-subtitle>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-title>Facility Type:</v-list-item-title>
+              <v-list-item-subtitle>{{ facility.facilityType }} (WIP: will convert # to
+                description)</v-list-item-subtitle>
+            </v-list-item>
+          </v-list>
+        </v-card-text>
+      </v-card>
+    </v-container>
+  </div>
 </template>
+
+<script>
+import { mapState } from 'pinia'
+import { useAuthStore } from '@/stores/auth'
+
+export default {
+  computed: {
+    ...mapState(useAuthStore, ['userInfo', 'isAuthenticated'])
+  },
+}
+</script>
+
+<style>
+div.v-card-title {
+  padding-bottom: 0px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 5f3f2241..3a973dec 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -3,37 +3,68 @@
     <!-- login article -->
     <!-- <article id="login-banner" class="top-banner"> -->
     <v-row align="center" justify="center">
-      <v-col align="center">
-        <v-card class="login-card">
-          <v-card-title class="gov-header">
-            <h4 id="login_text">IDIR</h4>
-          </v-card-title>
-          <v-card-actions>
-            <v-row align="center" justify="center">
-              <v-btn id="login-button" :href="routes.LOGIN_IDIR" class="ma-2 px-3" dark color="white" style="background-color: #003366" @click="clearStorage">
-                Log In
-                <v-icon>mdi-login</v-icon>
-              </v-btn>
-            </v-row>
-          </v-card-actions>
-        </v-card>
-      </v-col>
-      <v-col align="center">
-        <v-card class="login-card">
-          <v-card-title class="gov-header">
-            <h4 id="login_text">BCeID Log In</h4>
-          </v-card-title>
-          <v-card-actions>
-            <v-row align="center" justify="center">
-              <v-btn id="login-button" :href="routes.LOGIN" class="ma-2 px-3" dark color="white" style="background-color: #003366" @click="clearStorage">
-                Business BCeID
-                <v-icon>mdi-login</v-icon>
-              </v-btn>
-            </v-row>
-          </v-card-actions>
-        </v-card>
+      <v-col cols="12" align="center" class="pt-0">
+        <v-img src="@/assets/images/login-header-img-resized.jpg" max-width="1448" class="align-end">
+          <v-col align="center" style="background-color: rgb(28, 115, 158, 0.85)">
+            <span class="text-h4 text-white font-weight-bold" style="font-family: BCSans">Early Childhood Care - Operating Funding Model</span>
+            <br />
+            <span class="text-h6 text-white">Welcome</span>
+          </v-col>
+        </v-img>
       </v-col>
     </v-row>
+
+    <v-container class="containerWidth1450 pa-0">
+      <p class="pt-4">
+        <strong>NOTE:</strong>
+        The information collected through Early Childhood Care - Operating Funding Model is collected under the authority of the
+        <i>Freedom of Information and Protection of Privacy Act</i>
+        (FOIPPA) and the
+        <i>Child Care BC Act</i>
+        (SBC 2001, c. 4) and will be used for the purpose of administering the Child Care Operating Funding Program, which includes the Child Care Fee Reduction Initiative and the Early Childhood
+        Educator (ECE) Wage Enhancement for successfully enrolled applicants. Personal information is protected from unauthorized use and disclosure in accordance with FOIPPA. Any questions or
+        concerns about the collection of this information can be directed to the Director, Child Care Operating Funding Program, PO Box 9965 Stn Prov Govt, Victoria BC V8W 9R4, Phone: in Greater
+        Victoria: 250 356-6501, outside of Greater Victoria, Toll Free: 1 888 338-6622 (option 2).
+      </p>
+      <br />
+      <v-row>
+        <v-col class="xs-12 lg-4 xl-2">
+          <v-divider></v-divider>
+          <!-- Add height="100%" to div directly below to have the buttons line up with each other on desktop.-->
+          <v-card flat class="d-flex flex-column">
+            <v-card-title class="gov-header">
+              <h4 id="login_text">Childcare Provider</h4>
+            </v-card-title>
+            <v-card-text id="login_descriptor">Log in with your primary Business BCeID</v-card-text>
+            <v-spacer></v-spacer>
+            <v-card-actions class="mt-auto">
+              <AppButton icon="mdi-login" :href="routes.LOGIN" @click="clearStorage" width="250px" id="bceid-login">BCeID Log In</AppButton>
+            </v-card-actions>
+          </v-card>
+        </v-col>
+
+        <v-col class="xs-12 lg-6 xl-2">
+          <v-divider></v-divider>
+          <v-card flat class="d-flex flex-column">
+            <v-card-title class="gov-header">
+              <h4 id="login_text">Don't have a BCeID?</h4>
+            </v-card-title>
+            <v-card-text id="login_descriptor">
+              BCeID is a user ID and password. You can use it to log into many participating government services.
+              <br />
+              <br />
+              If you have logged into other B.C. government services before, you may already have an account.
+              <br />
+              <br />
+              You must register for a Business BCeID before you can log in - it only takes a few minutes.
+            </v-card-text>
+            <v-card-actions>
+              <AppButton icon="mdi-login" href="//www.bceid.ca/register/business/getting_started/getting_started.aspx" @click="clearStorage" width="250px">Register for a BCeID</AppButton>
+            </v-card-actions>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
     <!-- </article> -->
   </v-container>
 </template>
@@ -42,9 +73,11 @@
 import { mapActions, mapState } from 'pinia'
 import { Routes } from '@/utils/constants'
 import { useAuthStore } from '@/stores/auth'
+import AppButton from '../components/ui/AppButton.vue'
 
 export default {
-  name: 'Login',
+  name: 'LoginView',
+  components: { AppButton },
   data() {
     return {
       routes: Routes,
@@ -89,4 +122,8 @@ export default {
 .full-height {
   height: 100%;
 }
+
+.containerWidth1450 {
+  max-width: 1450px;
+}
 </style>
diff --git a/frontend/src/views/UnAuthorizedView.vue b/frontend/src/views/UnAuthorizedView.vue
index 58608ef1..a7a2aae5 100644
--- a/frontend/src/views/UnAuthorizedView.vue
+++ b/frontend/src/views/UnAuthorizedView.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="my-16 full-height">
+  <v-container fluid class="full-height">
     <!-- login article -->
     <article id="login-banner" class="top-banner">
       <v-row align="center" justify="center" width="100%">
@@ -13,9 +13,8 @@
                       <h4 id="error_text" style="color: red">Unauthorized Access</h4>
                     </v-card-title>
                     <v-card-text id="error_message">
-                      <span style="color: black; font-weight: bold"
-                        >You do not have required roles to perform action on this site.</span
-                      >
+                      <span style="color: black; font-weight: bold">You do not have required roles to perform action on
+                        this site.</span>
                     </v-card-text>
                   </v-card>
                 </v-col>
@@ -32,6 +31,7 @@
 .error-card {
   margin-top: 5%;
 }
+
 .gov-header {
   color: #003366;
 }
diff --git a/frontend/test/views/HomeView.test.js b/frontend/test/views/HomeView.test.js
index 1e55080d..89ceb6a9 100644
--- a/frontend/test/views/HomeView.test.js
+++ b/frontend/test/views/HomeView.test.js
@@ -13,8 +13,7 @@ describe('HomeView', () => {
   const global = { global: { plugins: [createTestingPinia(), vuetify] } }
   test('init', async () => {
     const wrapper = mount(HomeView, global)
-    expect(wrapper.text()).toContain('OFM')
-    expect(wrapper.text()).toContain('Temp Home Screen')
+    // expect(wrapper.text()).toContain('Username:')
     expect(wrapper.html()).toMatchSnapshot()
   })
 })
diff --git a/frontend/test/views/LoginView.test.js b/frontend/test/views/LoginView.test.js
index 8517ba69..7a6122f9 100644
--- a/frontend/test/views/LoginView.test.js
+++ b/frontend/test/views/LoginView.test.js
@@ -14,14 +14,13 @@ describe('LoginView', () => {
   test('init', async () => {
     const wrapper = mount(LoginView, global)
     expect(wrapper.text()).toContain('BCeID')
-    expect(wrapper.text()).toContain('IDIR')
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   test('login', async () => {
     const wrapper = mount(LoginView, global)
 
-    const loginButton = wrapper.get('#login-button')
-    expect(loginButton.attributes().href).toEqual('/api/auth/login-idir')
+    const loginButton = wrapper.get('#bceid-login')
+    expect(loginButton.attributes().href).toEqual('/api/auth/login')
   })
 })
diff --git a/frontend/test/views/__snapshots__/HomeView.test.js.snap b/frontend/test/views/__snapshots__/HomeView.test.js.snap
index 1cc0b105..c91f67d5 100644
--- a/frontend/test/views/__snapshots__/HomeView.test.js.snap
+++ b/frontend/test/views/__snapshots__/HomeView.test.js.snap
@@ -1,33 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`HomeView > init 1`] = `
-"<div class=\\"v-card v-theme--light v-card--density-default v-card--variant-elevated\\" style=\\"height: 100%;\\">
-  <!---->
-  <div class=\\"v-card__loader\\">
-    <div class=\\"v-progress-linear v-theme--light v-locale--is-ltr\\" style=\\"top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);\\" role=\\"progressbar\\" aria-hidden=\\"true\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
-      <!---->
-      <div class=\\"v-progress-linear__background\\" style=\\"width: 100%;\\"></div>
-      <transition-stub name=\\"fade-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
-        <div class=\\"v-progress-linear__indeterminate\\">
-          <div class=\\"v-progress-linear__indeterminate long\\"></div>
-          <div class=\\"v-progress-linear__indeterminate short\\"></div>
-        </div>
-      </transition-stub>
-      <!---->
-    </div>
-  </div>
-  <div class=\\"v-card-item\\">
-    <!---->
-    <div class=\\"v-card-item__content\\">
-      <div class=\\"v-card-title\\">OFM</div>
-      <div class=\\"v-card-subtitle\\">Temp Home Screen</div>
-      <!---->
-    </div>
-    <!---->
-  </div>
-  <div class=\\"v-card-text\\">...</div>
-  <!---->
-  <!---->
-  <!----><span class=\\"v-card__underlay\\"></span>
-</div>"
-`;
+exports[`HomeView > init 1`] = `"<!--v-if-->"`;
diff --git a/frontend/test/views/__snapshots__/LoginView.test.js.snap b/frontend/test/views/__snapshots__/LoginView.test.js.snap
index 8f3f84a8..380d2e04 100644
--- a/frontend/test/views/__snapshots__/LoginView.test.js.snap
+++ b/frontend/test/views/__snapshots__/LoginView.test.js.snap
@@ -5,68 +5,89 @@ exports[`LoginView > init 1`] = `
   <!-- login article -->
   <!-- <article id=\\"login-banner\\" class=\\"top-banner\\"> -->
   <div data-v-45f5edd7=\\"\\" class=\\"v-row align-center justify-center\\">
-    <div data-v-45f5edd7=\\"\\" class=\\"v-col\\" align=\\"center\\">
-      <div data-v-45f5edd7=\\"\\" class=\\"v-card v-theme--light v-card--density-default v-card--variant-elevated login-card\\">
+    <div data-v-45f5edd7=\\"\\" class=\\"v-col v-col-12 pt-0\\" align=\\"center\\">
+      <div data-v-45f5edd7=\\"\\" class=\\"v-responsive v-img v-img--booting align-end\\" style=\\"max-width: 1448px;\\">
+        <div class=\\"v-responsive__sizer\\"></div>
+        <transition-stub name=\\"fade-transition\\" appear=\\"true\\" persisted=\\"false\\" css=\\"true\\"><img class=\\"v-img__img v-img__img--contain\\" src=\\"src/assets/images/login-header-img-resized.jpg\\" style=\\"display: none;\\"></transition-stub>
+        <transition-stub name=\\"fade-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+          <!---->
+        </transition-stub>
         <!---->
-        <div class=\\"v-card__loader\\">
-          <div class=\\"v-progress-linear v-theme--light v-locale--is-ltr\\" style=\\"top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);\\" role=\\"progressbar\\" aria-hidden=\\"true\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
-            <!---->
-            <div class=\\"v-progress-linear__background\\" style=\\"width: 100%;\\"></div>
-            <transition-stub name=\\"fade-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
-              <div class=\\"v-progress-linear__indeterminate\\">
-                <div class=\\"v-progress-linear__indeterminate long\\"></div>
-                <div class=\\"v-progress-linear__indeterminate short\\"></div>
-              </div>
-            </transition-stub>
-            <!---->
-          </div>
-        </div>
         <!---->
         <!---->
-        <div data-v-45f5edd7=\\"\\" class=\\"v-card-title gov-header\\">
-          <h4 data-v-45f5edd7=\\"\\" id=\\"login_text\\">IDIR</h4>
+        <div class=\\"v-responsive__content\\">
+          <div data-v-45f5edd7=\\"\\" class=\\"v-col\\" style=\\"background-color: rgb(28, 115, 158, 0.85);\\" align=\\"center\\"><span data-v-45f5edd7=\\"\\" class=\\"text-h4 text-white font-weight-bold\\" style=\\"font-family: BCSans;\\">Early Childhood Care - Operating Funding Model</span><br data-v-45f5edd7=\\"\\"><span data-v-45f5edd7=\\"\\" class=\\"text-h6 text-white\\">Welcome</span></div>
         </div>
-        <div data-v-45f5edd7=\\"\\" class=\\"v-card-actions\\">
-          <div data-v-45f5edd7=\\"\\" class=\\"v-row align-center justify-center\\"><a data-v-45f5edd7=\\"\\" class=\\"v-btn v-theme--light text-white v-btn--density-default v-btn--size-default v-btn--variant-text ma-2 px-3\\" style=\\"background-color: #003366;\\" href=\\"/api/auth/login-idir\\" id=\\"login-button\\" dark=\\"\\"><span class=\\"v-btn__overlay\\"></span><span class=\\"v-btn__underlay\\"></span>
-              <!----><span class=\\"v-btn__content\\" data-no-activator=\\"\\"> Log In <i data-v-45f5edd7=\\"\\" class=\\"mdi-login mdi v-icon notranslate v-theme--light v-icon--size-default\\" aria-hidden=\\"true\\"></i></span>
+      </div>
+    </div>
+  </div>
+  <div data-v-45f5edd7=\\"\\" class=\\"v-container v-locale--is-ltr containerWidth1450 pa-0\\">
+    <p data-v-45f5edd7=\\"\\" class=\\"pt-4\\"><strong data-v-45f5edd7=\\"\\">NOTE:</strong> The information collected through Early Childhood Care - Operating Funding Model is collected under the authority of the <i data-v-45f5edd7=\\"\\">Freedom of Information and Protection of Privacy Act</i> (FOIPPA) and the <i data-v-45f5edd7=\\"\\">Child Care BC Act</i> (SBC 2001, c. 4) and will be used for the purpose of administering the Child Care Operating Funding Program, which includes the Child Care Fee Reduction Initiative and the Early Childhood Educator (ECE) Wage Enhancement for successfully enrolled applicants. Personal information is protected from unauthorized use and disclosure in accordance with FOIPPA. Any questions or concerns about the collection of this information can be directed to the Director, Child Care Operating Funding Program, PO Box 9965 Stn Prov Govt, Victoria BC V8W 9R4, Phone: in Greater Victoria: 250 356-6501, outside of Greater Victoria, Toll Free: 1 888 338-6622 (option 2). </p><br data-v-45f5edd7=\\"\\">
+    <div data-v-45f5edd7=\\"\\" class=\\"v-row\\">
+      <div data-v-45f5edd7=\\"\\" class=\\"v-col xs-12 lg-4 xl-2\\">
+        <hr data-v-45f5edd7=\\"\\" class=\\"v-divider v-theme--light\\" aria-orientation=\\"horizontal\\" role=\\"separator\\"><!-- Add height=\\"100%\\" to div directly below to have the buttons line up with each other on desktop.-->
+        <div data-v-45f5edd7=\\"\\" class=\\"v-card v-card--flat v-theme--light v-card--density-default v-card--variant-elevated d-flex flex-column\\">
+          <!---->
+          <div class=\\"v-card__loader\\">
+            <div class=\\"v-progress-linear v-theme--light v-locale--is-ltr\\" style=\\"top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);\\" role=\\"progressbar\\" aria-hidden=\\"true\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
+              <!---->
+              <div class=\\"v-progress-linear__background\\" style=\\"width: 100%;\\"></div>
+              <transition-stub name=\\"fade-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+                <div class=\\"v-progress-linear__indeterminate\\">
+                  <div class=\\"v-progress-linear__indeterminate long\\"></div>
+                  <div class=\\"v-progress-linear__indeterminate short\\"></div>
+                </div>
+              </transition-stub>
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <!---->
+          <div data-v-45f5edd7=\\"\\" class=\\"v-card-title gov-header\\">
+            <h4 data-v-45f5edd7=\\"\\" id=\\"login_text\\">Childcare Provider</h4>
+          </div>
+          <div data-v-45f5edd7=\\"\\" class=\\"v-card-text\\" id=\\"login_descriptor\\">Log in with your primary Business BCeID</div>
+          <div data-v-45f5edd7=\\"\\" class=\\"v-spacer\\"></div>
+          <div data-v-45f5edd7=\\"\\" class=\\"v-card-actions mt-auto\\"><a data-v-d22d1084=\\"\\" data-v-45f5edd7=\\"\\" class=\\"v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text BC-Gov-PrimaryButton\\" style=\\"width: 250px;\\" href=\\"/api/auth/login\\" id=\\"bceid-login\\"><span class=\\"v-btn__overlay\\"></span><span class=\\"v-btn__underlay\\"></span>
+              <!----><span class=\\"v-btn__content\\" data-no-activator=\\"\\">BCeID Log In<i data-v-d22d1084=\\"\\" class=\\"mdi-login mdi v-icon notranslate v-theme--light v-icon--size-default\\" aria-hidden=\\"true\\"></i></span>
               <!---->
               <!---->
             </a></div>
+          <!---->
+          <!----><span class=\\"v-card__underlay\\"></span>
         </div>
-        <!---->
-        <!----><span class=\\"v-card__underlay\\"></span>
       </div>
-    </div>
-    <div data-v-45f5edd7=\\"\\" class=\\"v-col\\" align=\\"center\\">
-      <div data-v-45f5edd7=\\"\\" class=\\"v-card v-theme--light v-card--density-default v-card--variant-elevated login-card\\">
-        <!---->
-        <div class=\\"v-card__loader\\">
-          <div class=\\"v-progress-linear v-theme--light v-locale--is-ltr\\" style=\\"top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);\\" role=\\"progressbar\\" aria-hidden=\\"true\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
-            <!---->
-            <div class=\\"v-progress-linear__background\\" style=\\"width: 100%;\\"></div>
-            <transition-stub name=\\"fade-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
-              <div class=\\"v-progress-linear__indeterminate\\">
-                <div class=\\"v-progress-linear__indeterminate long\\"></div>
-                <div class=\\"v-progress-linear__indeterminate short\\"></div>
-              </div>
-            </transition-stub>
-            <!---->
+      <div data-v-45f5edd7=\\"\\" class=\\"v-col xs-12 lg-6 xl-2\\">
+        <hr data-v-45f5edd7=\\"\\" class=\\"v-divider v-theme--light\\" aria-orientation=\\"horizontal\\" role=\\"separator\\">
+        <div data-v-45f5edd7=\\"\\" class=\\"v-card v-card--flat v-theme--light v-card--density-default v-card--variant-elevated d-flex flex-column\\">
+          <!---->
+          <div class=\\"v-card__loader\\">
+            <div class=\\"v-progress-linear v-theme--light v-locale--is-ltr\\" style=\\"top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);\\" role=\\"progressbar\\" aria-hidden=\\"true\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
+              <!---->
+              <div class=\\"v-progress-linear__background\\" style=\\"width: 100%;\\"></div>
+              <transition-stub name=\\"fade-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+                <div class=\\"v-progress-linear__indeterminate\\">
+                  <div class=\\"v-progress-linear__indeterminate long\\"></div>
+                  <div class=\\"v-progress-linear__indeterminate short\\"></div>
+                </div>
+              </transition-stub>
+              <!---->
+            </div>
           </div>
-        </div>
-        <!---->
-        <!---->
-        <div data-v-45f5edd7=\\"\\" class=\\"v-card-title gov-header\\">
-          <h4 data-v-45f5edd7=\\"\\" id=\\"login_text\\">BCeID Log In</h4>
-        </div>
-        <div data-v-45f5edd7=\\"\\" class=\\"v-card-actions\\">
-          <div data-v-45f5edd7=\\"\\" class=\\"v-row align-center justify-center\\"><a data-v-45f5edd7=\\"\\" class=\\"v-btn v-theme--light text-white v-btn--density-default v-btn--size-default v-btn--variant-text ma-2 px-3\\" style=\\"background-color: #003366;\\" href=\\"/api/auth/login\\" id=\\"login-button\\" dark=\\"\\"><span class=\\"v-btn__overlay\\"></span><span class=\\"v-btn__underlay\\"></span>
-              <!----><span class=\\"v-btn__content\\" data-no-activator=\\"\\"> Business BCeID <i data-v-45f5edd7=\\"\\" class=\\"mdi-login mdi v-icon notranslate v-theme--light v-icon--size-default\\" aria-hidden=\\"true\\"></i></span>
+          <!---->
+          <!---->
+          <div data-v-45f5edd7=\\"\\" class=\\"v-card-title gov-header\\">
+            <h4 data-v-45f5edd7=\\"\\" id=\\"login_text\\">Don't have a BCeID?</h4>
+          </div>
+          <div data-v-45f5edd7=\\"\\" class=\\"v-card-text\\" id=\\"login_descriptor\\"> BCeID is a user ID and password. You can use it to log into many participating government services. <br data-v-45f5edd7=\\"\\"><br data-v-45f5edd7=\\"\\"> If you have logged into other B.C. government services before, you may already have an account. <br data-v-45f5edd7=\\"\\"><br data-v-45f5edd7=\\"\\"> You must register for a Business BCeID before you can log in - it only takes a few minutes. </div>
+          <div data-v-45f5edd7=\\"\\" class=\\"v-card-actions\\"><a data-v-d22d1084=\\"\\" data-v-45f5edd7=\\"\\" class=\\"v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text BC-Gov-PrimaryButton\\" style=\\"width: 250px;\\" href=\\"//www.bceid.ca/register/business/getting_started/getting_started.aspx\\"><span class=\\"v-btn__overlay\\"></span><span class=\\"v-btn__underlay\\"></span>
+              <!----><span class=\\"v-btn__content\\" data-no-activator=\\"\\">Register for a BCeID<i data-v-d22d1084=\\"\\" class=\\"mdi-login mdi v-icon notranslate v-theme--light v-icon--size-default\\" aria-hidden=\\"true\\"></i></span>
               <!---->
               <!---->
             </a></div>
+          <!---->
+          <!----><span class=\\"v-card__underlay\\"></span>
         </div>
-        <!---->
-        <!----><span class=\\"v-card__underlay\\"></span>
       </div>
     </div>
   </div><!-- </article> -->
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 349ee1df..62cc883c 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,11 +1,17 @@
 import { URL, fileURLToPath } from 'node:url'
 import { defineConfig } from 'vite'
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue({
+      template: { transformAssetUrls },
+    }),
+    vuetify(),
+  ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index da2845fb..a6f91675 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -228,7 +228,7 @@
 
 "@pinia/testing@^0.1.3":
   version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@pinia/testing/-/testing-0.1.3.tgz#ee46a5a51d437f845ddc9c7b048c98b6a435e68b"
+  resolved "https://registry.npmjs.org/@pinia/testing/-/testing-0.1.3.tgz"
   integrity sha512-D2Ds2s69kKFaRf2KCcP1NhNZEg5+we59aRyQalwRm7ygWfLM25nDH66267U3hNvRUOTx8ofL24GzodZkOmB5xw==
   dependencies:
     vue-demi ">=0.14.5"
@@ -411,6 +411,14 @@
     js-beautify "1.14.9"
     vue-component-type-helpers "1.8.4"
 
+"@vuetify/loader-shared@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.7.1.tgz"
+  integrity sha512-kLUvuAed6RCvkeeTNJzuy14pqnkur8lTuner7v7pNE/kVhPR97TuyXwBSBMR1cJeiLiOfu6SF5XlCYbXByEx1g==
+  dependencies:
+    find-cache-dir "^3.3.2"
+    upath "^2.0.1"
+
 abbrev@^1.0.0:
   version "1.1.1"
   resolved "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz"
@@ -604,6 +612,11 @@ commander@^10.0.0:
   resolved "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz"
   integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
 
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz"
+  integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@@ -628,7 +641,7 @@ cross-spawn@^7.0.2:
 
 css.escape@^1.5.1:
   version "1.5.1"
-  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+  resolved "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz"
   integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
 
 cssesc@^3.0.0:
@@ -641,7 +654,7 @@ csstype@^3.1.1:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
-debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
+debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -873,6 +886,23 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+find-cache-dir@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz"
+  integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^3.0.2"
+    pkg-dir "^4.1.0"
+
+find-up@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
 find-up@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz"
@@ -974,7 +1004,7 @@ graphemer@^1.4.0:
 
 happy-dom@^12.8.0:
   version "12.8.0"
-  resolved "https://registry.yarnpkg.com/happy-dom/-/happy-dom-12.8.0.tgz#21f65a7f3128e1195b483382f4e6d8917f190e8d"
+  resolved "https://registry.npmjs.org/happy-dom/-/happy-dom-12.8.0.tgz"
   integrity sha512-ReeZgCPuebuH1sc7NcTthMIyQVEb1NJyvs+p1gOHC1LwccIAKPWyRTNVmKhfyW5ft1Di+sPsOCuVFulF5IeVxw==
   dependencies:
     css.escape "^1.5.1"
@@ -1121,6 +1151,13 @@ local-pkg@^0.4.3:
   resolved "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz"
   integrity sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==
 
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
 locate-path@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz"
@@ -1159,6 +1196,13 @@ magic-string@^0.30.0, magic-string@^0.30.1:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
+make-dir@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
+  dependencies:
+    semver "^6.0.0"
+
 mime-db@1.52.0:
   version "1.52.0"
   resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz"
@@ -1265,6 +1309,13 @@ optionator@^0.9.3:
     prelude-ls "^1.2.1"
     type-check "^0.4.0"
 
+p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
 p-limit@^3.0.2:
   version "3.1.0"
   resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz"
@@ -1279,6 +1330,13 @@ p-limit@^4.0.0:
   dependencies:
     yocto-queue "^1.0.0"
 
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
 p-locate@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz"
@@ -1286,6 +1344,11 @@ p-locate@^5.0.0:
   dependencies:
     p-limit "^3.0.2"
 
+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
@@ -1336,6 +1399,13 @@ pinia@^2.1.6:
     "@vue/devtools-api" "^6.5.0"
     vue-demi ">=0.14.5"
 
+pkg-dir@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
 pkg-types@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz"
@@ -1475,6 +1545,11 @@ sass@^1.66.1:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
+semver@^6.0.0:
+  version "6.3.1"
+  resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
 semver@^7.3.6, semver@^7.5.3, semver@^7.5.4:
   version "7.5.4"
   resolved "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz"
@@ -1589,6 +1664,11 @@ ufo@^1.3.0:
   resolved "https://registry.npmjs.org/ufo/-/ufo-1.3.1.tgz"
   integrity sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==
 
+upath@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz"
+  integrity sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
@@ -1613,6 +1693,15 @@ vite-node@0.34.6:
     picocolors "^1.0.0"
     vite "^3.0.0 || ^4.0.0 || ^5.0.0-0"
 
+vite-plugin-vuetify@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/vite-plugin-vuetify/-/vite-plugin-vuetify-1.0.2.tgz#d1777c63aa1b3a308756461b3d0299fd101ee8f4"
+  integrity sha512-MubIcKD33O8wtgQXlbEXE7ccTEpHZ8nPpe77y9Wy3my2MWw/PgehP9VqTp92BLqr0R1dSL970Lynvisx3UxBFw==
+  dependencies:
+    "@vuetify/loader-shared" "^1.7.1"
+    debug "^4.3.3"
+    upath "^2.0.1"
+
 "vite@^3.0.0 || ^4.0.0 || ^5.0.0-0", "vite@^3.1.0 || ^4.0.0 || ^5.0.0-0", vite@^4.4.9:
   version "4.4.9"
   resolved "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz"
@@ -1660,9 +1749,9 @@ vue-component-type-helpers@1.8.4:
   integrity sha512-6bnLkn8O0JJyiFSIF0EfCogzeqNXpnjJ0vW/SZzNHfe6sPx30lTtTXlE5TFs2qhJlAtDFybStVNpL73cPe3OMQ==
 
 vue-demi@>=0.14.5:
-  version "0.14.5"
-  resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz"
-  integrity sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==
+  version "0.14.6"
+  resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz"
+  integrity sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==
 
 vue-eslint-parser@^9.3.1:
   version "9.3.1"