diff --git a/.github/workflows/build-n-deploy-backend-to-ocp-dev.yml b/.github/workflows/build-n-deploy-backend-to-ocp-dev.yml
index a8ea8b52..28bb0752 100644
--- a/.github/workflows/build-n-deploy-backend-to-ocp-dev.yml
+++ b/.github/workflows/build-n-deploy-backend-to-ocp-dev.yml
@@ -204,6 +204,6 @@ jobs:
           oc rollout status dc/${{ env.IMAGE_NAME }}
 
       - name: ZAP Scan
-        uses: zaproxy/action-full-scan@v0.3.0
+        uses: zaproxy/action-full-scan@v0.10.0
         with:
           target: "https://${{ env.HOST_ROUTE }}"
diff --git a/.github/workflows/deploy-to.openshift-prod.yml b/.github/workflows/deploy-to.openshift-prod.yml
index a3d155a9..7b33dddd 100644
--- a/.github/workflows/deploy-to.openshift-prod.yml
+++ b/.github/workflows/deploy-to.openshift-prod.yml
@@ -143,6 +143,6 @@ jobs:
           oc rollout status dc/${{ env.IMAGE_NAME }}
 
       - name: ZAP Scan
-        uses: zaproxy/action-full-scan@v0.3.0
+        uses: zaproxy/action-full-scan@v0.10.0
         with:
           target: "https://${{ env.HOST_ROUTE }}"
diff --git a/.github/workflows/deploy-to.openshift-test.yml b/.github/workflows/deploy-to.openshift-test.yml
index fbdd2460..47dbbd26 100644
--- a/.github/workflows/deploy-to.openshift-test.yml
+++ b/.github/workflows/deploy-to.openshift-test.yml
@@ -143,6 +143,6 @@ jobs:
           oc rollout status dc/${{ env.IMAGE_NAME }}
 
       - name: ZAP Scan
-        uses: zaproxy/action-full-scan@v0.3.0
+        uses: zaproxy/action-full-scan@v0.10.0
         with:
           target: "https://${{ env.HOST_ROUTE }}"
diff --git a/backend/src/components/utils.js b/backend/src/components/utils.js
index 87e09f86..84a20527 100644
--- a/backend/src/components/utils.js
+++ b/backend/src/components/utils.js
@@ -77,7 +77,7 @@ function removeFieldsByCriteria(inputData, criteria) {
 }
 function appendMailingAddressDetailsAndRemoveAddresses(data) {
   if (data && data.addresses && data.addresses.length > 0) {
-    const physicalAddress = data.addresses.find(
+    const physicalAddress = data.addresses?.find(
       (address) => address.addressTypeCode === "PHYSICAL"
     );
     if (physicalAddress) {
@@ -101,7 +101,7 @@ function appendMailingAddressDetailsAndRemoveAddresses(data) {
 
       // Remove the "addresses" property
     }
-    const courierAddress = data.addresses.find(
+    const courierAddress = data.addresses?.find(
       (address) => address.addressTypeCode === "MAILING"
     );
     if (courierAddress) {
@@ -132,7 +132,7 @@ function appendMailingAddressDetailsAndRemoveAddresses(data) {
 function addDistrictLabels(jsonData, districtList) {
   if (jsonData.content && Array.isArray(jsonData.content)) {
     jsonData.content.forEach((dataItem) => {
-      const district = districtList.find(
+      const district = districtList?.find(
         (item) => item.districtId === dataItem.districtId
       );
       if (district) {
@@ -229,7 +229,7 @@ function normalizeJsonObject(
   includeFields
 ) {
   return sourceArray.map((item) => {
-    const matchingItem = referenceArray.find(
+    const matchingItem = referenceArray?.find(
       (info) =>
         info[matchKey] === item[matchKey] && (!condition || condition(info))
     );
@@ -402,7 +402,7 @@ function createSchoolCache(schoolData, schoolGrades) {
     });
 
     // Extract and format principal contact information if it exists
-    const principalContact = school.contacts.find(
+    const principalContact = school.contacts?.find(
       (contact) => contact.schoolContactTypeCode === "PRINCIPAL"
     );
     if (principalContact) {
diff --git a/backend/src/routes/district-router.js b/backend/src/routes/district-router.js
index 5a26a2e7..01be26d9 100644
--- a/backend/src/routes/district-router.js
+++ b/backend/src/routes/district-router.js
@@ -47,7 +47,7 @@ function addContactTypeLabels(districtDataResponse, nonPublicContactTypeCodes) {
     Array.isArray(updatedDistrictData.contacts)
   ) {
     updatedDistrictData.contacts.forEach((contact) => {
-      const matchingType = nonPublicContactTypeCodes.find(
+      const matchingType = nonPublicContactTypeCodes?.find(
         (codeObj) =>
           codeObj.districtContactTypeCode === contact.districtContactTypeCode
       );
@@ -93,7 +93,7 @@ async function getDistrictCodes(req) {
       return districtCodeList;
     } catch (e) {
       log.error(
-        "getDistrictList Error",
+        "getDistrictCodesList Error",
         e.response ? e.response.status : e.message
       );
     }
@@ -250,7 +250,6 @@ async function getAllDistrictContacts(req, res) {
 
 async function getAllDistrictMailing(req, res) {
   const districtList = await listCache.get("districtlist");
-  const contactTypeCodes = await listCache.get("codesList");
 
   const propertyOrder = [
     { property: "districtId_districtNumber", label: "District Number" },
@@ -323,13 +322,11 @@ async function getAllDistrictMailing(req, res) {
     const contentByDistrict = sortJSONByDistrictNumber(content);
 
     res.json(contentByDistrict);
-    //res.json(districtContactsReorderedAndRelabeled );
   } catch (e) {
     log.error("getData Error", e.response ? e.response.status : e.message);
   }
 }
 
-//api/v1/institute/district/12342525
 async function getDistrict(req, res) {
   const { id } = req.params;
 
@@ -424,8 +421,9 @@ async function getDistrict(req, res) {
     const facilityCodes = await listCache.get("facilityCodes");
     const fundingGroups = await listCache.get("fundingGroups");
     const districtContactCodeTypes = await listCache.get("codesList");
-    const nonPublicContactTypeCodes =
-      getNonPublicContactTypeCodes(contactTypeCodes);
+    const nonPublicContactTypeCodes = await getNonPublicContactTypeCodes(
+      contactTypeCodes
+    );
 
     const districtDataPublic = removeContacts(
       districtDataResponse.data,
@@ -435,36 +433,37 @@ async function getDistrict(req, res) {
       districtDataPublic,
       contactTypeCodes
     );
-    districtDataPublicWithLabels.contacts = filterByPubliclyAvailableCodes(
-      districtDataPublicWithLabels.contacts,
-      "districtContactTypeCode",
-      getArrayofPubliclyAvailableCodes(
-        districtContactCodeTypes.codesList.districtContactTypeCodes,
-        "districtContactTypeCode"
-      )
-    );
-    districtDataPublicWithLabels.contacts = filterByExpiryDate(
-      districtDataPublicWithLabels.contacts
-    );
-
-    districtSchoolsResponse.data.content = normalizeJsonObject(
-      districtSchoolsResponse.data.content,
-      schoolCategoryCodes,
-      "schoolCategoryCode",
-      null,
-      ["label", "description"]
-    );
-    districtSchoolsResponse.data.content = normalizeJsonObject(
-      districtSchoolsResponse.data.content,
-      facilityCodes,
-      "faciltyTypeCode",
-      null,
-      ["label", "description"]
-    );
-    districtSchoolsResponse.data.content = addFundingGroups(
-      districtSchoolsResponse.data.content,
-      fundingGroups
-    );
+    if (!!districtContactCodeTypes) {
+      districtDataPublicWithLabels.contacts = filterByPubliclyAvailableCodes(
+        districtDataPublicWithLabels.contacts,
+        "districtContactTypeCode",
+        getArrayofPubliclyAvailableCodes(
+          districtContactCodeTypes.codesList.districtContactTypeCodes,
+          "districtContactTypeCode"
+        )
+      );
+      districtDataPublicWithLabels.contacts = filterByExpiryDate(
+        districtDataPublicWithLabels.contacts
+      );
+      districtSchoolsResponse.data.content = normalizeJsonObject(
+        districtSchoolsResponse.data.content,
+        schoolCategoryCodes,
+        "schoolCategoryCode",
+        null,
+        ["label", "description"]
+      );
+      districtSchoolsResponse.data.content = normalizeJsonObject(
+        districtSchoolsResponse.data.content,
+        facilityCodes,
+        "faciltyTypeCode",
+        null,
+        ["label", "description"]
+      );
+      districtSchoolsResponse.data.content = addFundingGroups(
+        districtSchoolsResponse.data.content,
+        fundingGroups
+      );
+    }
 
     const today = new Date();
     const filteredSchoolsResponse = districtSchoolsResponse.data.content.filter(
diff --git a/backend/src/routes/institute-router.js b/backend/src/routes/institute-router.js
index 2b0ebf95..fb7b4c2f 100644
--- a/backend/src/routes/institute-router.js
+++ b/backend/src/routes/institute-router.js
@@ -5,28 +5,69 @@ const config = require("../config/index");
 
 const axios = require("axios");
 const { checkToken } = require("../components/auth");
-const {filterByOpenedAndClosedDate, formatGrades, removeFieldsByCriteria, createList, addDistrictLabels, districtNumberSort, isAllowedSchoolCategory, filterRemoveByField, filterByField } = require("../components/utils");
+const {
+  filterByOpenedAndClosedDate,
+  formatGrades,
+  removeFieldsByCriteria,
+  createList,
+  addDistrictLabels,
+  districtNumberSort,
+  isAllowedSchoolCategory,
+  filterRemoveByField,
+  filterByField,
+} = require("../components/utils");
 const { listCache, codeCache } = require("../components/cache");
 
-const schoolListOptions = { fields: ["mincode", "displayName", "schoolId", "closedDate", "openedDate","schoolCategoryCode"], fieldToInclude: null, valueToInclude: null, sortField: "mincode" };
-const districtListOptions = { fields: ["displayName", "districtId","districtNumber", "closedDate"] ,fieldToInclude: "districtStatusCode", valueToInclude: "ACTIVE", sortField: "districtNumber"};
-const authorityListOptions = { fields: ["displayName", "authorityNumber","independentAuthorityId", "closedDate", "opendDate"], sortField: "authorityNumber" };
-const openSchoolListOptions = { fields: [
-  "schoolId",
-  "districtId",
-  "mincode",
-  "schoolNumber",
-  "faxNumber",
-  "phoneNumber",
-  "email",
-  "website",
-  "displayName",
-  "schoolCategoryCode",
-  "facilityTypeCode",
-  "openedDate",
-  "closedDate",
-  "districtNumber"
-],fieldToInclude: "closedDate", valueToInclude: null, sortField: "mincode" };
+const schoolListOptions = {
+  fields: [
+    "mincode",
+    "displayName",
+    "schoolId",
+    "closedDate",
+    "openedDate",
+    "schoolCategoryCode",
+  ],
+  fieldToInclude: null,
+  valueToInclude: null,
+  sortField: "mincode",
+};
+const districtListOptions = {
+  fields: ["displayName", "districtId", "districtNumber", "closedDate"],
+  fieldToInclude: "districtStatusCode",
+  valueToInclude: "ACTIVE",
+  sortField: "districtNumber",
+};
+const authorityListOptions = {
+  fields: [
+    "displayName",
+    "authorityNumber",
+    "independentAuthorityId",
+    "closedDate",
+    "opendDate",
+  ],
+  sortField: "authorityNumber",
+};
+const openSchoolListOptions = {
+  fields: [
+    "schoolId",
+    "districtId",
+    "mincode",
+    "schoolNumber",
+    "faxNumber",
+    "phoneNumber",
+    "email",
+    "website",
+    "displayName",
+    "schoolCategoryCode",
+    "facilityTypeCode",
+    "openedDate",
+    "closedDate",
+    "districtNumber",
+  ],
+  fieldToInclude: "closedDate",
+  valueToInclude: null,
+  sortField: "mincode",
+};
 
 //Batch Routes
 router.get("/contact-type-codes", checkToken, getContactTypeCodes);
@@ -43,19 +84,16 @@ router.get("/*", checkToken, getInstituteAPI);
 
 async function createCache(req, res) {
   if (await !listCache.has("fundingGroups")) {
-    //const codes = [];
-
     try {
       const fundingGroupsResponse = await axios.get(
-        `${config.get(
-          "server:schoolsAPIURL"
-        )}/schools/fundingGroups`,
+        `${config.get("server:schoolsAPIURL")}/schools/fundingGroups`,
         {
           headers: { Authorization: `Bearer ${req.accessToken}` },
         }
       );
       listCache.set("fundingGroups", fundingGroupsResponse.data);
       res.json(fundingGroupsResponse.data);
+      log.info("cached funding groups - ", req.url);
     } catch (error) {
       const statusCode = error.response ? error.response.status : 500;
       log.error("getFunding Groups Error", statusCode, error.message);
@@ -65,52 +103,32 @@ async function createCache(req, res) {
     const cachedFundingGroupList = await listCache.get("fundingGroups");
     res.json(cachedFundingGroupList);
   }
-  if (await !listCache.has("districtlist")) {
-    const url = `${config.get("server:instituteAPIURL")}/institute/district`; // Update the URL according to your API endpoint
-    axios
-      .get(url, { headers: { Authorization: `Bearer ${req.accessToken}` } })
-      .then((response) => {
-        const filteredNonbBCDistrictList = response.data.filter(district => ["098","102", "103"].includes(district.districtNumber));
-        const filteredDistrictList = response.data.filter(district => !["098","102", "103"].includes(district.districtNumber));
-        const districtList = createList(filteredDistrictList, districtListOptions);
-        const nonBCdistrictList = createList(filteredNonbBCDistrictList, districtListOptions);
 
-        listCache.set("nonbcdistrictlist", nonBCdistrictList);
-        listCache.set("districtlist", districtList);
-        res.json(districtList);
-        log.info(req.url);
-      })
-      .catch((e) => {
-        log.error(
-          "getDistrictList Error",
-          e.response ? e.response.status : e.message
-        );
-      });
-  } 
-  if (!listCache.has("categoryCodes")) {
-    //const codes = [];
-    
+  if (await !listCache.has("categoryCodes")) {
     try {
       const categoryCodesResponse = await axios.get(
-        `${config.get(
-          "server:instituteAPIURL"
-        )}/institute/category-codes`,
+        `${config.get("server:instituteAPIURL")}/institute/category-codes`,
         {
           headers: { Authorization: `Bearer ${req.accessToken}` },
         }
       );
-      
-      categoryCodesResponse.data = filterRemoveByField(categoryCodesResponse.data,"schoolCategoryCode", ["FED_BAND","POST_SEC","YUKON"])
+
+      categoryCodesResponse.data = filterRemoveByField(
+        categoryCodesResponse.data,
+        "schoolCategoryCode",
+        ["FED_BAND", "POST_SEC", "YUKON"]
+      );
       listCache.set("categoryCodes", categoryCodesResponse.data);
-      
+      log.info("cached category codes - ", req.url);
     } catch (error) {
       const statusCode = error.response ? error.response.status : 500;
       log.error("Category Code Caching Error", statusCode, error.message);
       res.status(statusCode).send(error.message);
     }
-  } else{
+  } else {
     const categoryCodes = await listCache.get("categoryCodes");
-    res.json(categoryCodes)
+    res.json(categoryCodes);
+    log.info("fetched category codes - ", req.url);
   }
   if (await !codeCache.has("gradelist")) {
     const url = `${config.get("server:instituteAPIURL")}/institute/grade-codes`; // Update the URL according to your API endpoint
@@ -118,103 +136,81 @@ async function createCache(req, res) {
       .get(url, { headers: { Authorization: `Bearer ${req.accessToken}` } })
       .then((response) => {
         const gradeCodes = response.data;
-        
+
         codeCache.set("gradelist", gradeCodes);
-        log.info(req.url);
+        log.info("cached grade list - ", req.url);
       })
       .catch((e) => {
         log.error(
-          "getDistrictList Error",
+          "getGradeList Error",
           e.response ? e.response.status : e.message
         );
       });
   } else {
     const gradeCodes = await codeCache.get("gradelist");
     res.json(gradeCodes);
+    log.info("fetched grade list - ", req.url);
   }
 
-  if (!listCache.has("categoryCodes")) {
-    //const codes = [];
-    
-    try {
-      const categoryCodesResponse = await axios.get(
-        `${config.get(
-          "server:instituteAPIURL"
-        )}/institute/category-codes`,
-        {
-          headers: { Authorization: `Bearer ${req.accessToken}` },
-        }
-      );
-      
-      categoryCodesResponse.data = filterRemoveByField(categoryCodesResponse.data,"schoolCategoryCode", ["FED_BAND","POST_SEC","YUKON"])
-      listCache.set("categoryCodes", categoryCodesResponse.data);
-      
-    } catch (error) {
-      const statusCode = error.response ? error.response.status : 500;
-      log.error("Category Code Caching Error", statusCode, error.message);
-      res.status(statusCode).send(error.message);
-    }
-  } 
-  
   if (!listCache.has("facilityCodes")) {
-    //const codes = [];
-
     try {
       const facilityCodesResponse = await axios.get(
-        `${config.get(
-          "server:instituteAPIURL"
-        )}/institute/facility-codes`,
+        `${config.get("server:instituteAPIURL")}/institute/facility-codes`,
         {
           headers: { Authorization: `Bearer ${req.accessToken}` },
         }
       );
       listCache.set("facilityCodes", facilityCodesResponse.data);
+      log.info("cached facility codes - ", req.url);
     } catch (error) {
       const statusCode = error.response ? error.response.status : 500;
       log.error("Faility Code Caching Error", statusCode, error.message);
       res.status(statusCode).send(error.message);
     }
-  } 
+  }
   if (!listCache.has("districtAddresses")) {
-    //const codes = [];
-
     try {
       const districtsResponse = await axios.get(
-        `${config.get("server:instituteAPIURL")}/institute/district/paginated?pageSize=200`,
+        `${config.get(
+          "server:instituteAPIURL"
+        )}/institute/district/paginated?pageSize=200`,
         {
           headers: { Authorization: `Bearer ${req.accessToken}` },
         }
       );
-      
+
       districtsResponse.data.content.forEach((district) => {
         district.addresses.forEach((address) => {
-          
           if (address.addressTypeCode === "MAILING") {
             Object.keys(address).forEach((field) => {
               // Exclude the specified fields
-              if (![
-                "createUser",
-                "updateUser",
-                "createDate",
-                "updateDate",
-                "schoolAddressId",
-                "schoolId",
-                "addressTypeCode"
-              ].includes(field)) {
+              if (
+                ![
+                  "createUser",
+                  "updateUser",
+                  "createDate",
+                  "updateDate",
+                  "schoolAddressId",
+                  "schoolId",
+                  "addressTypeCode",
+                ].includes(field)
+              ) {
                 district[`mailing_${field}`] = address[field];
               }
             });
           } else if (address.addressTypeCode === "PHYSICAL") {
             Object.keys(address).forEach((field) => {
-              if (![
-                "createUser",
-                "updateUser",
-                "createDate",
-                "updateDate",
-                "schoolAddressId",
-                "schoolId",
-                "addressTypeCode"
-              ].includes(field)) {
+              if (
+                ![
+                  "createUser",
+                  "updateUser",
+                  "createDate",
+                  "updateDate",
+                  "schoolAddressId",
+                  "schoolId",
+                  "addressTypeCode",
+                ].includes(field)
+              ) {
                 district[`physical_${field}`] = address[field];
               }
             });
@@ -222,16 +218,17 @@ async function createCache(req, res) {
         });
       });
       listCache.set("districtAddresses", districtsResponse.data.content);
+      log.info("cached district addresses - ", req.url);
     } catch (error) {
       const statusCode = error.response ? error.response.status : 500;
       log.error("District Code Caching Error", statusCode, error.message);
       res.status(statusCode).send(error.message);
     }
-  } 
-
+  }
 
   if (await !listCache.has("codesList")) {
     try {
+      log.info("Starting to get codes list"); //MOVE UNTIL I SEE IT
       const authorityContactTypeCodesResponse = await axios.get(
         `${config.get(
           "server:instituteAPIURL"
@@ -260,27 +257,35 @@ async function createCache(req, res) {
       );
 
       const codes = {
-        authorityContactTypeCodes: removeFieldsByCriteria(authorityContactTypeCodesResponse.data, [{ fieldToRemove: "publiclyAvailable", value: false }]),
-        districtContactTypeCodes: removeFieldsByCriteria(districtContactTypeCodesResponse.data,[{ fieldToRemove: "publiclyAvailable", value: false }]),
-        schoolContactTypeCodes: removeFieldsByCriteria(schoolContactTypeCodesResponse.data,[{ fieldToRemove: "publiclyAvailable", value: false }]),
+        authorityContactTypeCodes: removeFieldsByCriteria(
+          authorityContactTypeCodesResponse.data,
+          [{ fieldToRemove: "publiclyAvailable", value: false }]
+        ),
+        districtContactTypeCodes: removeFieldsByCriteria(
+          districtContactTypeCodesResponse.data,
+          [{ fieldToRemove: "publiclyAvailable", value: false }]
+        ),
+        schoolContactTypeCodes: removeFieldsByCriteria(
+          schoolContactTypeCodesResponse.data,
+          [{ fieldToRemove: "publiclyAvailable", value: false }]
+        ),
       };
-      res.json(codes);
+      // res.json(codes);
       listCache.set("codesList", { codesList: codes });
+      log.info("cached codes list - ", req.url);
     } catch (error) {
       const statusCode = error.response ? error.response.status : 500;
+      log.error(e);
       log.error("getCodesList Error", statusCode, error.message);
       res.status(statusCode).send(error.message);
     }
   }
+  // res acts like a return
   res.status(200).json({ success: true });
-
 }
 
-
 async function getContactTypeCodes(req, res) {
   if (await !listCache.has("codesList")) {
-    //const codes = [];
-
     try {
       const authorityContactTypeCodesResponse = await axios.get(
         `${config.get(
@@ -310,9 +315,18 @@ async function getContactTypeCodes(req, res) {
       );
 
       const codes = {
-        authorityContactTypeCodes: removeFieldsByCriteria(authorityContactTypeCodesResponse.data, [{ fieldToRemove: "publiclyAvailable", value: false }]),
-        districtContactTypeCodes: removeFieldsByCriteria(districtContactTypeCodesResponse.data,[{ fieldToRemove: "publiclyAvailable", value: false }]),
-        schoolContactTypeCodes: removeFieldsByCriteria(schoolContactTypeCodesResponse.data,[{ fieldToRemove: "publiclyAvailable", value: false }]),
+        authorityContactTypeCodes: removeFieldsByCriteria(
+          authorityContactTypeCodesResponse.data,
+          [{ fieldToRemove: "publiclyAvailable", value: false }]
+        ),
+        districtContactTypeCodes: removeFieldsByCriteria(
+          districtContactTypeCodesResponse.data,
+          [{ fieldToRemove: "publiclyAvailable", value: false }]
+        ),
+        schoolContactTypeCodes: removeFieldsByCriteria(
+          schoolContactTypeCodesResponse.data,
+          [{ fieldToRemove: "publiclyAvailable", value: false }]
+        ),
       };
       listCache.set("codesList", { codesList: codes });
       res.json(codes);
@@ -327,67 +341,72 @@ async function getContactTypeCodes(req, res) {
   }
 }
 async function getOffshoreSchoolList(req, res) {
-  
-  let currentDate = new Date().toISOString().substring(0, 19)
+  let currentDate = new Date().toISOString().substring(0, 19);
   const params = [
     {
-      condition: 'AND',
+      condition: "AND",
       searchCriteriaList: [
         {
-          key: 'schoolCategoryCode',
-          operation: 'eq',
+          key: "schoolCategoryCode",
+          operation: "eq",
           value: "OFFSHORE",
-          valueType: 'STRING',
-          condition: 'AND'
+          valueType: "STRING",
+          condition: "AND",
         },
         {
-          key: 'openedDate',
-          operation: 'lte',
+          key: "openedDate",
+          operation: "lte",
           value: currentDate,
-          valueType: 'DATE_TIME',
-          condition: 'AND'
-        }      
-      ]
+          valueType: "DATE_TIME",
+          condition: "AND",
+        },
+      ],
     },
     {
-      condition: 'AND',
+      condition: "AND",
       searchCriteriaList: [
         {
-          key: 'closedDate',
-          operation: 'eq',
+          key: "closedDate",
+          operation: "eq",
           value: null,
-          valueType: 'STRING',
-          condition: 'OR'
+          valueType: "STRING",
+          condition: "OR",
         },
         {
-          key: 'closedDate',
-          operation: 'gte',
+          key: "closedDate",
+          operation: "gte",
           value: currentDate,
-          valueType: 'DATE_TIME',
-          condition: 'OR'
-        }          
-      ]
-    }
+          valueType: "DATE_TIME",
+          condition: "OR",
+        },
+      ],
+    },
   ];
 
-  const jsonString = JSON.stringify(params)
-  const encodedParams = encodeURIComponent(jsonString)
-  
-  
+  const jsonString = JSON.stringify(params);
+  const encodedParams = encodeURIComponent(jsonString);
 
   if (await !listCache.has("offshoreschoollist")) {
-    const url = `${config.get('server:instituteAPIURL')}/institute/school/paginated?pageSize=1000&pageNumber=0&searchCriteriaList=${encodedParams}`;
+    const url = `${config.get(
+      "server:instituteAPIURL"
+    )}/institute/school/paginated?pageSize=1000&pageNumber=0&searchCriteriaList=${encodedParams}`;
     axios
       .get(url, { headers: { Authorization: `Bearer ${req.accessToken}` } })
       .then((response) => {
         const offshoreSchoolList = response.data.content;
-        const schoolGrades =  codeCache.get("gradelist");
-        
+        const schoolGrades = codeCache.get("gradelist");
+
         for (let i = 0; i < offshoreSchoolList.length; i++) {
-          const formattedGrades = formatGrades(offshoreSchoolList[i].grades, schoolGrades);
-          offshoreSchoolList[i] = { ...offshoreSchoolList[i], ...formattedGrades };
+          const formattedGrades = formatGrades(
+            offshoreSchoolList[i].grades,
+            schoolGrades
+          );
+          offshoreSchoolList[i] = {
+            ...offshoreSchoolList[i],
+            ...formattedGrades,
+          };
           // Now you can use the updated offshoreSchoolList[i] object as needed
-      }
+        }
         res.json(offshoreSchoolList);
         listCache.set("offshoreschoollist", offshoreSchoolList);
         log.info(req.url);
@@ -404,41 +423,44 @@ async function getOffshoreSchoolList(req, res) {
   }
 }
 async function getAuthorityList(req, res) {
-
   if (await !listCache.has("authoritylist")) {
-
-    let currentDate = new Date().toISOString().substring(0, 19)
+    let currentDate = new Date().toISOString().substring(0, 19);
     const params = [
       {
         condition: null,
         searchCriteriaList: [
           {
-            key: 'closedDate',
-            operation: 'eq',
+            key: "closedDate",
+            operation: "eq",
             value: null,
-            valueType: 'STRING',
-            condition: 'OR'
+            valueType: "STRING",
+            condition: "OR",
           },
           {
-            key: 'closedDate',
-            operation: 'gte',
+            key: "closedDate",
+            operation: "gte",
             value: currentDate,
-            valueType: 'DATE_TIME',
-            condition: 'OR'
-          }          
-        ]
-      }
+            valueType: "DATE_TIME",
+            condition: "OR",
+          },
+        ],
+      },
     ];
-  
-    const jsonString = JSON.stringify(params)
-    const encodedParams = encodeURIComponent(jsonString)
-    
-    const url = `${config.get('server:instituteAPIURL')}/institute/authority/paginated?pageSize=1000&searchCriteriaList=${encodedParams}`;
+
+    const jsonString = JSON.stringify(params);
+    const encodedParams = encodeURIComponent(jsonString);
+
+    const url = `${config.get(
+      "server:instituteAPIURL"
+    )}/institute/authority/paginated?pageSize=1000&searchCriteriaList=${encodedParams}`;
     axios
       .get(url, { headers: { Authorization: `Bearer ${req.accessToken}` } })
       .then((response) => {
-        const authorityList = createList(response.data.content, authorityListOptions);
-        
+        const authorityList = createList(
+          response.data.content,
+          authorityListOptions
+        );
+
         res.json(authorityList);
         listCache.set("authoritylist", authorityList);
         log.info(req.url);
@@ -455,31 +477,30 @@ async function getAuthorityList(req, res) {
   }
 }
 async function getCategoryCodes(req, res) {
-   
   if (!listCache.has("categoryCodes")) {
-    //const codes = [];
-    
     try {
       const categoryCodesResponse = await axios.get(
-        `${config.get(
-          "server:instituteAPIURL"
-        )}/institute/category-codes`,
+        `${config.get("server:instituteAPIURL")}/institute/category-codes`,
         {
           headers: { Authorization: `Bearer ${req.accessToken}` },
         }
       );
-      
-      categoryCodesResponse.data = filterRemoveByField(categoryCodesResponse.data,"schoolCategoryCode", ["FED_BAND","POST_SEC","YUKON"])
+
+      categoryCodesResponse.data = filterRemoveByField(
+        categoryCodesResponse.data,
+        "schoolCategoryCode",
+        ["FED_BAND", "POST_SEC", "YUKON"]
+      );
       listCache.set("categoryCodes", categoryCodesResponse.data);
-      
+      res.json(categoryCodesResponse.data);
     } catch (error) {
       const statusCode = error.response ? error.response.status : 500;
       log.error("Category Code Caching Error", statusCode, error.message);
       res.status(statusCode).send(error.message);
     }
-  } else{
+  } else {
     const categoryCodes = await listCache.get("categoryCodes");
-    res.json(categoryCodes)
+    res.json(categoryCodes);
   }
 }
 async function getSchoolList(req, res) {
@@ -488,9 +509,24 @@ async function getSchoolList(req, res) {
     axios
       .get(url, { headers: { Authorization: `Bearer ${req.accessToken}` } })
       .then((response) => {
-        const openSchools = filterByOpenedAndClosedDate(response.data)
-        const validSchoolCategories = filterByField(openSchools, "schoolCategoryCode", ["POST_SEC", "YUKON", "SUMMER", "FED_BAND"])
-        const validSchoolFacilities = filterByField(validSchoolCategories, "facilityTypeCode", ['PROVINCIAL','DIST_CONT','ELEC_DELIV','POST_SEC','JUSTB4PRO','SUMMER'])
+        const openSchools = filterByOpenedAndClosedDate(response.data);
+        const validSchoolCategories = filterByField(
+          openSchools,
+          "schoolCategoryCode",
+          ["POST_SEC", "YUKON", "SUMMER", "FED_BAND"]
+        );
+        const validSchoolFacilities = filterByField(
+          validSchoolCategories,
+          "facilityTypeCode",
+          [
+            "PROVINCIAL",
+            "DIST_CONT",
+            "ELEC_DELIV",
+            "POST_SEC",
+            "JUSTB4PRO",
+            "SUMMER",
+          ]
+        );
         const schoolList = createList(validSchoolFacilities, schoolListOptions);
         res.json(schoolList);
         listCache.set("schoollist", schoolList);
@@ -514,10 +550,20 @@ async function getDistrictList(req, res) {
       .get(url, { headers: { Authorization: `Bearer ${req.accessToken}` } })
       .then((response) => {
         //const districtList = response.data;
-        const filteredNonbBCDistrictList = response.data.filter(district => ["098","102", "103"].includes(district.districtNumber));
-        const filteredDistrictList = response.data.filter(district => !["098","102", "103"].includes(district.districtNumber));
-        const districtList = createList(filteredDistrictList, districtListOptions);
-        const nonBCdistrictList = createList(filteredNonbBCDistrictList, districtListOptions);
+        const filteredNonbBCDistrictList = response.data.filter((district) =>
+          ["098", "102", "103"].includes(district.districtNumber)
+        );
+        const filteredDistrictList = response.data.filter(
+          (district) => !["098", "102", "103"].includes(district.districtNumber)
+        );
+        const districtList = createList(
+          filteredDistrictList,
+          districtListOptions
+        );
+        const nonBCdistrictList = createList(
+          filteredNonbBCDistrictList,
+          districtListOptions
+        );
         listCache.set("nonbcdistrictlist", nonBCdistrictList);
         listCache.set("districtlist", districtList);
         res.json(districtList);
@@ -525,7 +571,7 @@ async function getDistrictList(req, res) {
       })
       .catch((e) => {
         log.error(
-          "getDistrictList Error",
+          "getDistrictList Error (getDistrictList)",
           e.response ? e.response.status : e.message
         );
       });
@@ -552,19 +598,21 @@ async function getDistrictContactsAPI(req, res) {
   const url = `${config.get("server:instituteAPIURL")}/institute` + req.url;
 
   const districtList = await listCache.get("districtlist");
-  const nonBCDistrictList =  await listCache.get("nonbcdistrictlist");
+  const nonBCDistrictList = await listCache.get("nonbcdistrictlist");
   axios
     .get(url, { headers: { Authorization: `Bearer ${req.accessToken}` } })
     .then((response) => {
       if (req.url.includes("/district/contact/paginated")) {
         const jsonData = addDistrictLabels(response.data, districtList);
-      
-        jsonData.content = jsonData.content.filter(contact => {
+
+        jsonData.content = jsonData.content.filter((contact) => {
           // Check if districtId is not undefined, empty, or null
-          return contact.districtNumber !== undefined
-              && contact.districtNumber !== ""
-              && contact.districtNumber !== null;
-          });
+          return (
+            contact.districtNumber !== undefined &&
+            contact.districtNumber !== "" &&
+            contact.districtNumber !== null
+          );
+        });
         res.json(jsonData);
       } else {
         res.json(response.data);
@@ -582,7 +630,7 @@ async function getGradeCodes(req, res) {
       .get(url, { headers: { Authorization: `Bearer ${req.accessToken}` } })
       .then((response) => {
         const gradeCodes = response.data;
-        
+
         codeCache.set("gradelist", gradeCodes);
         res.json(gradeCodes);
         log.info(req.url);
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 64419e25..7cc84069 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -9,7 +9,7 @@ const data = ref([]) // Placeholder for the received data
 const appStore = useAppStore()
 
 onBeforeMount(async () => {
-  await appStore.setCodes()
+  await appStore.setCodes() //calls /create-cache
   await appStore.setDistricts()
   await appStore.setAuthorityList()
   await appStore.setSchoolList()
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index c438d8ca..59a5f718 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -1,35 +1,39 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 0rem;
   font-family: 'BCSans', 'Noto Sans', Verdana, Arial, sans-serif;
   font-weight: normal;
 }
 
+#main {
+  max-width: 1280px;
+  padding: 0rem;
+}
+
 a {
   color: #2a6496;
 }
 
+div.v-application__wrap {
+  min-height: 100vh; /* override dvh property */
+}
+
+.full-width {
+  margin-left: calc(-1*(100vw - 1024px)/2);
+  margin-right: calc(-1*(100vw - 1024px)/2);
+}
+
 /** Need to look at how CSS is loaded in since Vuetify defaults are overriding our custom CSS.
 Fixing this now could risk delaying other releases, so we will have to wait on this one - SF **/
 .v-alert, .v-alert--variant-outlined {
   border-radius: 8px !important;
 }
 
-@media (max-width: 768px) {
-  #app {
-    min-width: 1130px; /* Adjust as needed */
-    padding: 0; /* Adjust as needed */
-  }
-
-  .full-width {
-    margin: 0 calc(-1*(100vw - 768px)/2);
-    padding: 0 calc((100vw - 768px)/2);
-    background-color: red;
-  }
+.v-breadcrumbs-item--disabled {
+  opacity: 1;
+  font-weight: bold;
 }
+
 .school-search{
   margin-left:175px
 }
@@ -38,7 +42,7 @@ Fixing this now could risk delaying other releases, so we will have to wait on t
 }
 .breadcrumbs {
   margin: 0 -40em;
-  padding-left: 40em !important;
+  padding-left: 40em;
 }
 
 /* styles button to look like links */
@@ -49,10 +53,12 @@ button.link-btn, .link-btn .v-btn__content {
 }
 
 .territorial-acknowledgement {
-  background-color: #494949;
-  color: #fff;
-  border-bottom: 3px solid #FCBA19;
-  border-top: 3px solid #FCBA19;
+  background-color: #292929;
+  color: #faf9f8;
+  font-size: 14px;
+  line-height: 21px;
+  border-bottom: 4px solid #FCBA19;
+  border-top: 4px solid #FCBA19;
 }
 
 .v-toolbar__extension {
@@ -63,6 +69,40 @@ button.link-btn, .link-btn .v-btn__content {
 .v-btn-align-left {
   justify-content: normal !important;
 }
+
+@media (max-width: 1024px) {
+  .full-width {
+    margin-left: unset;
+    margin-right: unset;
+  }
+}
+
+@media (max-width: 960px) {
+  #app {
+    /* min-width: 600px; */
+    padding: 0; /* Adjust as needed */
+  }
+
+  .breadcrumbs {
+    margin: 0;
+    padding-left: 12px;
+  }
+
+  h1 span.institute-name {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+
+  /* 
+  * wraps button text as long as the class 'wrap' is added to v-btn component
+  * This is a workaround since a text wrap option is not available for buttons in Vuetify
+  */
+  .wrap .v-btn__content {
+    white-space: pre-wrap;
+}
+
+}
+
 @media (hover: hover) {
   a:hover {
     background-color: #0000;
@@ -82,11 +122,14 @@ button.link-btn, .link-btn .v-btn__content {
 
   #app {
     display: grid;
-    padding: 0;
+    padding: 0!important;
+    margin: 0 auto;
   }
 
-  .full-width {
-    margin: 0 calc(-1*(100vw - 1024px)/2);
-    padding: 0 calc((100vw - 1024px)/2);
-  }
-}
+  /* .full-width {
+    position: relative;
+    width: 100vw;
+    left: calc(-1*(100vw - 1280px)/2);
+    padding: 0!important;
+  } */
+}
\ No newline at end of file
diff --git a/frontend/src/components/AuthoritySelect.vue b/frontend/src/components/AuthoritySelect.vue
index 747f11dd..7309103a 100644
--- a/frontend/src/components/AuthoritySelect.vue
+++ b/frontend/src/components/AuthoritySelect.vue
@@ -19,46 +19,43 @@ function goToAuthority() {
     }
   })
 }
-
-function downloadAuthorityMailing() {
-  alert('TODO - Implement authority mailing download')
-}
-function downloadAuthorityContacts() {
-  alert('TODO - Implement authority contacts download')
-}
 </script>
 
 <template>
-  <v-card class="px-6 py-4 mt-5">
+  <v-card class="px-6 py-4 w-100">
     <h2 class="mb-5">Independent Authorities</h2>
-    <v-row no-gutters>
-      <v-col class="ma-1">
-        <v-row>
-          <v-autocomplete
-            v-model="selectedAuthority"
-            label="Select an Authority"
-            :items="appStore.getAuthoritiesList"
-            :item-title="(item) => (item ? item.authorityNumber + ' - ' + item.displayName : '')"
-            :item-value="(item) => item"
-            class="w-75"
-          ></v-autocomplete>
-          <v-btn
-            icon="mdi-magnify"
-            color="primary"
-            variant="flat"
-            rounded="lg"
-            size="large"
-            @click="goToAuthority"
-            class="text-none text-subtitle-1 ml-3"
-          />
+    <v-row no-gutters justify="space-between">
+      <v-col class="ma-2">
+        <v-row justify="space-between">
+          <v-col cols="10" class="pa-0">
+            <v-autocomplete
+              class="mr-2"
+              v-model="selectedAuthority"
+              label="Select an Authority"
+              :items="appStore.getAuthoritiesList"
+              :item-title="(item) => (item ? item.authorityNumber + ' - ' + item.displayName : '')"
+              :item-value="(item) => item"
+            ></v-autocomplete>
+          </v-col>
+          <v-col cols="2" class="pa-0">
+            <v-btn
+              icon="mdi-magnify"
+              color="primary"
+              variant="flat"
+              rounded="lg"
+              size="large"
+              @click="goToAuthority"
+              class="v-btn-align-left text-none text-subtitle-1 ml-1"
+            />
+          </v-col>
         </v-row>
         <v-row>
           <v-btn
             href="/api/v1/download/csv/authority/all-mailing/INDEPENDNT?filepath=authoritymailing"
             variant="text"
-            class="v-btn-align-left text-none text-subtitle-1 my-1"
-            ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template> Contact
-            information for all Authorities (CSV)</v-btn
+            class="v-btn-align-left text-none wrap text-subtitle-1 my-1 text-wrap"
+            ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Mailing for All
+            Authorities (CSV)</v-btn
           >
         </v-row>
       </v-col>
diff --git a/frontend/src/components/DistrictSelect.vue b/frontend/src/components/DistrictSelect.vue
index 9a7351c9..f50268b8 100644
--- a/frontend/src/components/DistrictSelect.vue
+++ b/frontend/src/components/DistrictSelect.vue
@@ -30,30 +30,35 @@ function downloadDistrictsMailing() {
 </script>
 
 <template>
-  <v-card class="px-6 py-4 mt-5">
+  <v-card class="px-6 py-4 w-100">
     <h2 class="mb-5">School Districts</h2>
     <v-row no-gutters justify="space-between">
-      <v-col class="ma-1">
-        <v-row>
-          <v-autocomplete
-            v-model="selectedDistrict"
-            label="Select a District"
-            :items="appStore.getDistrictList"
-            :item-title="
-              (item) => (item?.districtNumber ? item.districtNumber + ' - ' + item.displayName : '')
-            "
-            :item-value="(item) => item"
-            class="selectDistrictInput w-75"
-          ></v-autocomplete>
-          <v-btn
-            icon="mdi-magnify"
-            color="primary"
-            variant="flat"
-            rounded="lg"
-            size="large"
-            @click="goToDistrict"
-            class="v-btn-align-left text-none text-subtitle-1 ml-3"
-          />
+      <v-col class="ma-2">
+        <v-row justify="space-between">
+          <v-col cols="10" class="pa-0">
+            <v-autocomplete
+              class="mr-2"
+              v-model="selectedDistrict"
+              label="Select a District"
+              :items="appStore.getDistrictList"
+              :item-title="
+                (item) =>
+                  item?.districtNumber ? item.districtNumber + ' - ' + item.displayName : ''
+              "
+              :item-value="(item) => item"
+            ></v-autocomplete>
+          </v-col>
+          <v-col cols="2" class="pa-0">
+            <v-btn
+              icon="mdi-magnify"
+              color="primary"
+              variant="flat"
+              rounded="lg"
+              size="large"
+              @click="goToDistrict"
+              class="v-btn-align-left text-none text-subtitle-1 ml-1"
+            />
+          </v-col>
         </v-row>
         <v-row>
           <v-btn
@@ -63,7 +68,7 @@ function downloadDistrictsMailing() {
             block
             class="text-none text-subtitle-1 my-1"
             ><template v-slot:append> <v-icon icon="mdi-chevron-right" /> </template>
-            View Contacts by Type
+            View District Contacts by Type
           </v-btn>
 
           <v-btn
diff --git a/frontend/src/components/DownloadSchoolsModal.vue b/frontend/src/components/DownloadSchoolsModal.vue
index f017e510..a0816f36 100644
--- a/frontend/src/components/DownloadSchoolsModal.vue
+++ b/frontend/src/components/DownloadSchoolsModal.vue
@@ -6,13 +6,9 @@ const appStore = useAppStore()
 // used for open and close modal
 const dialog = ref(false)
 // varibles used for search
-
-function downloadAllSchoolsMailing() {
-  alert('TODO - Implement all schools mailing extract download')
-}
 </script>
 <template>
-  <v-dialog v-model="dialog" width="25%">
+  <v-dialog v-model="dialog" max-width="500">
     <template v-slot:activator="{ props }">
       <v-btn
         block
diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
index e37a46ac..d759e46a 100644
--- a/frontend/src/components/Footer.vue
+++ b/frontend/src/components/Footer.vue
@@ -1,105 +1,27 @@
 <script setup lang="ts"></script>
 
 <template>
-  <v-footer class="full-width">
-    <v-col no-gutters justify="space-between"
-      ><v-row class="territorial-acknowledgement"
-        ><v-spacer /><v-col cols="6"
+  <v-footer class="full-width pa-0">
+    <v-col no-gutters justify="space-between">
+      <v-row class="territorial-acknowledgement px-3 py-5">
+        <v-spacer />
+        <v-col cols="12" style="max-width: 1280px"
           >The B.C. Public Service acknowledges the territories of First Nations around B.C. and is
           grateful to carry out our work on these lands. We acknowledge the rights, interests,
           priorities, and concerns of all Indigenous Peoples - First Nations, Métis, and Inuit -
           respecting and acknowledging their distinct cultures, histories, rights, laws, and
-          governments.</v-col
-        ><v-spacer /></v-row
-      ><v-row>
-        <v-spacer />
-        <!-- <v-col cols="4"
-          ><a href="https://www2.gov.bc.ca/">
-            <img
-              alt="B.C. Government Logo"
-              class="logo"
-              src="@/assets/images/bc-gov-logo.svg"
-              width="125"
-              height="125"
-            /> </a
-        ></v-col>
-        <v-col cols="4" justify="space-between">
-          MORE INFO
-          <v-row>TEST</v-row>
-          <v-row>
-            <v-col>
-              <v-row> MORE INFO </v-row>
-              <v-row>
-                <a href="https://www2.gov.bc.ca">Home</a>
-              </v-row>
-              <v-row>
-                <a href="https://www2.gov.bc.ca/gov/content?id=E08E79740F9C41B9B0C484685CC5E412"
-                  >Accessibility</a
-                >
-              </v-row>
-              <v-row>
-                <a href="https://www2.gov.bc.ca/gov/content?id=79F93E018712422FBC8E674A67A70535"
-                  >Disclaimer</a
-                >
-              </v-row>
-            </v-col>
-            <v-col>
-              <v-row></v-row>
-              <v-row>
-                <a href="https://www2.gov.bc.ca/gov/content?id=9E890E16955E4FF4BF3B0E07B4722932"
-                  >Privacy</a
-                >
-              </v-row>
-              <v-row>
-                <a href="https://www2.gov.bc.ca/gov/content?id=1AAACC9C65754E4D89A118B875E0FBDA"
-                  >Copyright</a
-                >
-              </v-row>
-              <v-row>
-                <a href="https://www2.gov.bc.ca/gov/content?id=6A77C17D0CCB48F897F8598CCC019111"
-                  >Contact Us</a
-                >
-              </v-row>
-            </v-col>
-          </v-row>
-        </v-col> -->
-        <!-- <v-spacer /> -->
-        <v-spacer />
-        <v-col class="text-center mt-4" cols="12">
-          &copy; 2023 Government of British Columbia
+          governments.
         </v-col>
         <v-spacer />
       </v-row>
-    </v-col>
-
-    <!-- <v-col>
-      <v-row class="territorial-acknowledgement">
+      <v-row>
         <v-spacer />
-        <v-col class="text-center" cols="6"
-          ><p>
-            The B.C. Public Service acknowledges the territories of First Nations around B.C. and is
-            grateful to carry out our work on these lands. We acknowledge the rights, interests,
-            priorities, and concerns of all Indigenous Peoples - First Nations, Métis, and Inuit -
-            respecting and acknowledging their distinct cultures, histories, rights, laws, and
-            governments.
-          </p></v-col
-        >
         <v-spacer />
-      </v-row>
-      <v-row>
-        <v-col cols="12"
-          ><v-row>MORE INFO</v-row
-          ><v-row>
-            <p>Home</p>
-            <p>Privacy</p>
-          </v-row></v-col
-        >
-        <hr />
         <v-col class="text-center mt-4" cols="12">
           &copy; 2023 Government of British Columbia
         </v-col>
         <v-spacer />
       </v-row>
-    </v-col> -->
+    </v-col>
   </v-footer>
 </template>
diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
index accc699e..3465ca80 100644
--- a/frontend/src/components/Header.vue
+++ b/frontend/src/components/Header.vue
@@ -11,8 +11,8 @@
         height="125"
       />
     </a>
-    <v-divider class="mx-3" inset vertical />
-    <h1>BC School & District Contact Information</h1>
+    <v-divider class="mx-3 d-none d-md-inline-flex" inset vertical />
+    <h1 class="d-none d-md-block">BC School & District Contact Information</h1>
   </v-app-bar>
 </template>
 
@@ -22,5 +22,6 @@
 .v-toolbar__extension {
   justify-content: start;
   max-width: 1280px;
+  /* padding: 0 2rem; */
 }
 </style>
diff --git a/frontend/src/components/OffshoreSelect.vue b/frontend/src/components/OffshoreSelect.vue
index 9dcfb04b..41fb8c94 100644
--- a/frontend/src/components/OffshoreSelect.vue
+++ b/frontend/src/components/OffshoreSelect.vue
@@ -1,33 +1,25 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useAppStore } from '@/stores/app'
+//import { ref } from 'vue'
+//import { useAppStore } from '@/stores/app'
 import router from '@/router'
-import { useSanitizeURL } from '@/composables/string'
+//import { useSanitizeURL } from '@/composables/string'
 
 // Type Imports
-import type { ListSchool } from '@/types/types'
-import type { Ref } from 'vue'
+//import type { ListSchool } from '@/types/types'
+//import type { Ref } from 'vue'
 
-const appStore = useAppStore()
-const selectedOffshoreSchool: Ref<ListSchool | null> = ref(null)
+//const appStore = useAppStore()
+//const selectedOffshoreSchool: Ref<ListSchool | null> = ref(null)
 
 function viewOffshoreSchools() {
   router.push({
     name: 'offshore'
   })
 }
-
-function downloadOffshoreSchoolInfo() {
-  alert('TODO - Implement offshore school info extract download')
-}
-
-function downloadOffshoreSchoolReps() {
-  alert('TODO - Implement offshore school representative extract download')
-}
 </script>
 
 <template>
-  <v-card class="px-6 py-4 mt-5">
+  <v-card class="px-6 py-4 w-100">
     <h2 class="mb-5">BC Offshore Schools</h2>
     <v-row no-gutters>
       <v-col class="ma-1">
@@ -44,7 +36,7 @@ function downloadOffshoreSchoolReps() {
           <v-btn
             href="/api/v1/download/csv/authority/all-mailing/OFFSHORE?filepath=offshoreschoolrepresentatives"
             variant="text"
-            class="v-btn-align-left text-none text-subtitle-1 my-1"
+            class="wrap v-btn-align-left text-none text-subtitle-1 my-1"
             ><template v-slot:prepend> <v-icon icon="mdi-download" /></template>Offshore School
             Owner/Operators (CSV)</v-btn
           >
diff --git a/frontend/src/components/SchoolSelect.vue b/frontend/src/components/SchoolSelect.vue
index c9a56ba1..f9baa2fd 100644
--- a/frontend/src/components/SchoolSelect.vue
+++ b/frontend/src/components/SchoolSelect.vue
@@ -34,42 +34,49 @@ function goToSchoolSearch() {
 </script>
 
 <template>
-  <v-container fluid class="pt-0">
-    <v-sheet elevation="2" class="py-6 full-width">
-      <DisplayAlert />
+  <v-sheet elevation="2" class="py-6 full-width">
+    <v-container id="main">
+      <DisplayAlert class="mx-4" />
       <v-row no-gutters justify="space-between">
-        <img
-          src="@/assets/images/BCMapGraphic.png"
-          alt="Map of British Columbia"
-          style="height: 268px; position: absolute; top: 120px; left: -80px"
-        />
-        <v-spacer />
-        <v-col lg="6" md="8" class="ml-0 py-6 school-search">
+        <v-col>
+          <img
+            src="@/assets/images/BCMapGraphic.png"
+            alt="Map of British Columbia"
+            style="height: 268px; position: absolute; top: 170px; left: -80px"
+            class="d-none d-lg-block"
+          />
+        </v-col>
+        <v-col cols="10" md="8" xl="6" class="ml-0 py-6 school-search">
           <h2 class="mb-5">Find a School in BC</h2>
-          <v-row>
-            <v-autocomplete
-              v-model="selectedSchool"
-              label="Select a School"
-              :items="appStore.getSchools"
-              :item-title="
-                (item) => (item?.mincode ? item.mincode + ' - ' + item.displayName : null)
-              "
-              :item-value="(item) => (item?.mincode ? item : null)"
-            ></v-autocomplete>
-            <v-btn
-              icon="mdi-magnify"
-              color="primary"
-              variant="flat"
-              rounded="lg"
-              size="large"
-              @click="goToSchool"
-              class="mx-3"
-            />
+          <v-row justify="space-between">
+            <v-col cols="10" md="false" class="pa-0">
+              <v-autocomplete
+                class="mr-1 mr-md-n10"
+                v-model="selectedSchool"
+                label="Select a School"
+                :items="appStore.getSchools"
+                :item-title="
+                  (item) => (item?.mincode ? item.mincode + ' - ' + item.displayName : null)
+                "
+                :item-value="(item) => (item?.mincode ? item : null)"
+              ></v-autocomplete>
+            </v-col>
+            <v-col cols="2" md="auto" class="pa-0">
+              <v-btn
+                icon="mdi-magnify"
+                color="primary"
+                variant="flat"
+                rounded="lg"
+                size="large"
+                @click="goToSchool"
+                class="mx-2 mx-md-0"
+              />
+            </v-col>
           </v-row>
-
           <v-row>
-            <v-col class="px-0 my-1">
+            <v-col cols="12" md="4" class="px-0 py-4 py-md-0 my-md-1">
               <v-btn
+                block
                 color="bcGovBlue"
                 class="text-none text-subtitle-1"
                 variant="outlined"
@@ -78,14 +85,14 @@ function goToSchoolSearch() {
                 Schools</v-btn
               >
             </v-col>
-            <v-spacer />
-            <v-col>
+            <v-spacer class="d-none d-md-block" />
+            <v-col cols="12" md="4" class="px-0 py-4 py-md-0 my-md-1">
               <DownloadSchoolsModal></DownloadSchoolsModal>
             </v-col>
           </v-row>
         </v-col>
         <v-spacer />
       </v-row>
-    </v-sheet>
-  </v-container>
+    </v-container>
+  </v-sheet>
 </template>
diff --git a/frontend/src/components/common/DisplayAddress.vue b/frontend/src/components/common/DisplayAddress.vue
index 252d70c5..56d2e102 100644
--- a/frontend/src/components/common/DisplayAddress.vue
+++ b/frontend/src/components/common/DisplayAddress.vue
@@ -16,11 +16,13 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="px-1 py-0">
+  <div class="pa-0">
     <p class="font-weight-bold">{{ appStore.getAddressTypeCodeLabel(addressTypeCode) }} Address</p>
-    <p>{{ addressLine1 }}</p>
-    <p>{{ addressLine2 }}</p>
-    <p>{{ city }}, {{ provinceCode }}</p>
-    <p>{{ formatPostalCode(postal) }}</p>
+    <div class="pl-2 pl-md-0">
+      <p>{{ addressLine1 }}</p>
+      <p>{{ addressLine2 }}</p>
+      <p>{{ city }}, {{ provinceCode }}</p>
+      <p>{{ formatPostalCode(postal) }}</p>
+    </div>
   </div>
 </template>
diff --git a/frontend/src/components/common/DisplayAlert.vue b/frontend/src/components/common/DisplayAlert.vue
index e2735140..ea6c824d 100644
--- a/frontend/src/components/common/DisplayAlert.vue
+++ b/frontend/src/components/common/DisplayAlert.vue
@@ -1,11 +1,17 @@
 <script setup lang="ts"></script>
 
 <template>
-  <v-alert type="info" color="primary" variant="outlined" style="background-color: #f6f9fc"
+  <v-alert
+    class="display-alert"
+    type="info"
+    color="primary"
+    variant="outlined"
+    style="background-color: #f6f9fc"
     >The information on this page is provided by schools and districts through the Education Data
     Exchange (EDX).
-    <a href="https://www2.gov.bc.ca/gov/content?id=0F6C7869EEC844F190091E71D6BA3B58">Learn more</a>.
-    <br />If you represent an Independent School or Independent Authority and have not yet been
+    <a href="https://www2.gov.bc.ca/gov/content?id=0F6C7869EEC844F190091E71D6BA3B58"
+      >Learn more about EDX</a
+    >. <br />If you represent an Independent School or Independent Authority and have not yet been
     onboarded to EDX, please email
     <a href="mailto:EDUC.independentSchoolsOffice@gov.bc.ca">Independent Schools Office</a> to
     update your contact information.</v-alert
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 87dd4319..0fae98a5 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,6 +1,3 @@
-import './assets/main.css'
-import '@bcgov/bc-sans/css/BCSans.css'
-
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
@@ -18,6 +15,9 @@ import '@mdi/font/css/materialdesignicons.css'
 import App from './App.vue'
 import router from './router/index'
 
+import './assets/main.css'
+import '@bcgov/bc-sans/css/BCSans.css'
+
 // define custom theme
 const bcGovTheme: ThemeDefinition = {
     dark: false,
diff --git a/frontend/src/services/InstituteService.ts b/frontend/src/services/InstituteService.ts
index e7cbbf7d..fedcf26d 100644
--- a/frontend/src/services/InstituteService.ts
+++ b/frontend/src/services/InstituteService.ts
@@ -3,44 +3,44 @@ import { type AxiosResponse } from 'axios';
 
 export default {
   // Districts
-  getDistricts(): Promise<AxiosResponse> {
+  async getDistricts(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/district/list');
   },
   //DO NOT USE; TODO: Factor this out and use getDistrictView instead
   getDistrict(districtId: string): Promise<AxiosResponse> {
-    return ApiService.apiAxios.get('/api/v1/institute/district/'+districtId);
+    return ApiService.apiAxios.get('/api/v1/institute/district/'+ districtId);
   },
   // Independent Authorities
-  getAuthorityList(): Promise<AxiosResponse> {
+  async getAuthorityList(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/authority/list');
   },
-  getAuthority(authorityId: string): Promise<AxiosResponse> {
+  async getAuthority(authorityId: string): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/authority/'+ authorityId)
   },
   // Schools
-  getSchoolList(): Promise<AxiosResponse> {
+  async getSchoolList(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/school/list');
   },
-  getOffshoreSchoolList(): Promise<AxiosResponse> {
+  async getOffshoreSchoolList(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/offshore-school/list');
   },  
-  getSchool(schoolId: string): Promise<AxiosResponse> {
+  async getSchool(schoolId: string): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/school/'+schoolId);
   },
   // Codes
-  getFacilityCodes(): Promise<AxiosResponse> {
+  async getFacilityCodes(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/facility-codes');
   },
-  getCategoryCodes(): Promise<AxiosResponse> {
+  async getCategoryCodes(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/category-codes');
   },
-  getContactTypeCodes(): Promise<AxiosResponse> {
+  async getContactTypeCodes(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/contact-type-codes');
   },
-  getGradeCodes(): Promise<AxiosResponse> {
+  async getGradeCodes(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/grade-codes');
   },
-  getAddressTypeCodes(): Promise<AxiosResponse> {
+  async getAddressTypeCodes(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/address-type-codes');
   },
 
@@ -68,13 +68,13 @@ export default {
     }
     return ApiService.apiAxios.get(url);
   },
-  getDistrictView(id: string): Promise<AxiosResponse> {
+  getDistrictView(id: string | undefined): Promise<AxiosResponse> {
     return ApiService.apiAxios.get(`/api/v1/district/${id}`)
   },
   getDistrictContactTypeCodes(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/district-contact-type-codes');
   },
-  loadCache(): Promise<AxiosResponse> {
+  async loadCache(): Promise<AxiosResponse> {
     return ApiService.apiAxios.get('/api/v1/institute/create-cache');
   },
 
diff --git a/frontend/src/stores/app.ts b/frontend/src/stores/app.ts
index b0a6c1f6..04165462 100644
--- a/frontend/src/stores/app.ts
+++ b/frontend/src/stores/app.ts
@@ -57,8 +57,8 @@ export const useAppStore = defineStore('app', {
     isIndependentSchool(schoolCategoryCode: String){
       return schoolCategoryCode == 'INDEPEND'
     },
-    setDistricts(): void {
-        InstituteService.getDistricts()
+    async setDistricts(): Promise<void> {
+        await InstituteService.getDistricts()
           .then((response) => {
             // Handle the response data
             this.districts = response.data
@@ -68,8 +68,8 @@ export const useAppStore = defineStore('app', {
             console.error(error)
           })
     },
-    setAuthorityList(): void {
-      InstituteService.getAuthorityList().then((response) => {
+    async setAuthorityList(): Promise<void> {
+      await InstituteService.getAuthorityList().then((response) => {
         //handle the response
         this.authorities = response.data
       })
@@ -78,7 +78,7 @@ export const useAppStore = defineStore('app', {
         console.error(error)
       })
     },
-    setSchoolList(): void {
+    async setSchoolList(): Promise<void> {
 
       InstituteService.getSchoolList()
       .then((response) => {
@@ -91,7 +91,7 @@ export const useAppStore = defineStore('app', {
       })
 
     },
-    setOffshoreSchoolList(): void {
+    async setOffshoreSchoolList(): Promise<void> {
 
       InstituteService.getOffshoreSchoolList()
       .then((response) => {
@@ -104,14 +104,14 @@ export const useAppStore = defineStore('app', {
       })
 
     },
-    async setCodes() {
+    async setCodes(): Promise<void> {
       await InstituteService.loadCache().then((response) => {
-          console.log(response)
+        //console.log(response)
       }).catch((error) => {
         console.error("ERRPR LOADING CACHE" + error)
       })
       // set category codes
-      InstituteService.getCategoryCodes().then((response) => {
+      await InstituteService.getCategoryCodes().then((response) => {
         const currentDate: Date = new Date()
         this.categoryCodes = response.data?.filter((item: any) => {
           const effectiveDate: Date = new Date(item.effectiveDate);
@@ -127,14 +127,14 @@ export const useAppStore = defineStore('app', {
       })
 
       // set facility type codes
-      InstituteService.getFacilityCodes().then((response) => {
+      await InstituteService.getFacilityCodes().then((response) => {
         this.facilityCodes = response.data
       }).catch((error) => {
         console.error(error)
       })
 
       // set contact type codes for Districts, Authorities, and Schools
-      InstituteService.getContactTypeCodes().then((response) => {
+      await InstituteService.getContactTypeCodes().then((response) => {
         const currentDate: Date = new Date()
 
 
@@ -178,13 +178,13 @@ export const useAppStore = defineStore('app', {
       })
 
       // set address type codes for institute addresses
-      InstituteService.getAddressTypeCodes().then((response) => {
+      await InstituteService.getAddressTypeCodes().then((response) => {
         this.addressTypeCodes = response.data
       }).catch((error) => {
         console.error(error)
       })
 
-      InstituteService.getGradeCodes().then((response) => {
+      await InstituteService.getGradeCodes().then((response) => {
         this.gradeCodes = response.data
       }).catch((error) => {
         console.error(error)
diff --git a/frontend/src/utils/common.ts b/frontend/src/utils/common.ts
index a3459726..f00bbbfd 100644
--- a/frontend/src/utils/common.ts
+++ b/frontend/src/utils/common.ts
@@ -13,3 +13,8 @@ export function useSanitizeURL(input: string | String): String {
     input = input.toLowerCase().replace(/^a-zA-Z0-9 ]/g, '')
     return input
 }
+
+/** VALIDATION FUNCTIONS */
+export function isValidDistrictNumber(input: string | String | number): boolean {
+    return !!input && input.toString().length === 3 && /^\d+$/.test(input.toString());
+}
diff --git a/frontend/src/views/AuthorityView.vue b/frontend/src/views/AuthorityView.vue
index 2e005112..0c3cbb23 100644
--- a/frontend/src/views/AuthorityView.vue
+++ b/frontend/src/views/AuthorityView.vue
@@ -207,61 +207,73 @@ onMounted(async () => {
       :items="[
         { title: 'Home', href: '/' },
         'Authority',
-        authority.value.authorityData?.authorityNumber +
-          ' ' +
-          authority.value.authorityData?.displayName
+        authority.value.authorityData
+          ? authority.value.authorityData.authorityNumber +
+            ' ' +
+            authority.value.authorityData.displayName
+          : ''
       ]"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <DisplayAlert />
-      <v-row no-gutters justify="space-between">
-        <v-col>
-          <h1 class="mt-3 mb-2">
-            {{ authority.value.authorityData?.authorityNumber }} -
-            {{ authority.value.authorityData?.displayName }}
-          </h1>
-          <v-row v-if="authority.value.authorityData">
-            <v-col>
-              <p>
-                <strong>Phone:</strong>
-                {{ formatPhoneNumber(authority.value.authorityData?.phoneNumber) }}
-              </p>
-              <p>
-                <strong>Fax:</strong>
-                {{ formatPhoneNumber(authority.value.authorityData?.faxNumber) }}
-              </p>
-              <p>
-                <strong>Email: </strong>
-                <a :href="'mailto:' + authority.value.authorityData?.email">{{
-                  authority.value.authorityData?.email
-                }}</a>
-              </p>
-            </v-col>
-            <v-col
-              v-for="item in authority.value.authorityData.addresses"
-              :key="item.addressTypeCode"
-            >
-              <DisplayAddress v-bind="item" />
-            </v-col>
-            <v-col>
-              <v-btn
-                variant="text"
-                class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-                @click="downloadAuthorityContacts()"
-                ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
-                Authority Contacts (CSV)</v-btn
-              >
-              <v-btn
-                variant="text"
-                class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-                @click="downloadAuthoritySchools()"
-                ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
-                Authority Schools (CSV)</v-btn
+      <v-container id="main">
+        <DisplayAlert class="mx-4 mx-lg-0" />
+        <v-row no-gutters justify="space-between" class="pa-4 pa-md-5 pa-lg-0">
+          <v-col cols="12">
+            <h1 class="mt-1 mt-md-3 mb-6 mb-md-2">
+              <span class="d-inline d-md-none">Authority </span>
+              <span>
+                {{ authority.value.authorityData?.authorityNumber }}
+              </span>
+              <span class="d-none d-md-inline"> - </span>
+              <span class="d-block d-md-inline institute-name">
+                {{ authority.value.authorityData?.displayName }}
+              </span>
+            </h1>
+            <v-row v-if="authority.value.authorityData" justify="space-between">
+              <v-col cols="11" md="auto">
+                <p v-if="authority.value.authorityData?.phoneNumber">
+                  <strong>Phone:</strong>
+                  {{ formatPhoneNumber(authority.value.authorityData?.phoneNumber) }}
+                </p>
+                <p v-if="authority.value.authorityData?.faxNumber">
+                  <strong>Fax:</strong>
+                  {{ formatPhoneNumber(authority.value.authorityData?.faxNumber) }}
+                </p>
+                <p v-if="authority.value.authorityData?.email">
+                  <strong>Email: </strong>
+                  <a :href="'mailto:' + authority.value.authorityData?.email">{{
+                    authority.value.authorityData?.email
+                  }}</a>
+                </p>
+              </v-col>
+              <v-col
+                cols="11"
+                md="auto"
+                v-for="item in authority.value.authorityData.addresses"
+                :key="item.addressTypeCode"
               >
-            </v-col>
-          </v-row>
-        </v-col>
-      </v-row>
+                <DisplayAddress v-bind="item" />
+              </v-col>
+              <v-col cols="11" md="4" class="pa-0 pa-md-3">
+                <v-btn
+                  variant="text"
+                  class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+                  @click="downloadAuthorityContacts()"
+                  ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
+                  Authority Contacts (CSV)</v-btn
+                >
+                <v-btn
+                  variant="text"
+                  class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+                  @click="downloadAuthoritySchools()"
+                  ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
+                  Authority Schools (CSV)</v-btn
+                >
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-container>
     </v-sheet>
     <!-- END Authority Info Header Block -->
     <v-sheet class="pa-6">
@@ -303,7 +315,9 @@ onMounted(async () => {
               </template>
 
               <template v-slot:item.email="{ item }">
-                <a :href="`mailto:${item.email}`">{{ item.email }}</a>
+                <div style="max-width: 250px; overflow: hidden">
+                  <a :href="`mailto:${item.email}`">{{ item.email }}</a>
+                </div>
               </template>
 
               <template v-slot:item.phoneNumber="{ item }">
@@ -341,11 +355,15 @@ onMounted(async () => {
               </template>
 
               <template v-slot:item.email="{ item }">
-                <a :href="`mailto:${item.email}`">{{ item.email }}</a>
+                <div style="max-width: 250px; overflow: hidden">
+                  <a :href="`mailto:${item.email}`">{{ item.email }}</a>
+                </div>
               </template>
 
               <template v-slot:item.website="{ item }">
-                <a :href="item.website">{{ item.website }}</a>
+                <div style="max-width: 200px">
+                  <a :href="item.website">{{ item.website }}</a>
+                </div>
               </template>
 
               <template v-slot:item.phoneNumber="{ item }">
diff --git a/frontend/src/views/ContactsView.vue b/frontend/src/views/ContactsView.vue
index 16a9b3e2..2a5cd805 100644
--- a/frontend/src/views/ContactsView.vue
+++ b/frontend/src/views/ContactsView.vue
@@ -153,34 +153,47 @@ onMounted(() => {
       :items="[{ title: 'Home', href: '/' }, 'Contacts by Type']"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <v-row no-gutters justify="space-between">
-        <v-spacer />
-        <v-col cols="12">
-          <DisplayAlert />
-          <h2 class="mt-3 mb-2">Find District Contacts by Type</h2>
-          <v-row>
-            <v-autocomplete
-              v-model="selectedContactType"
-              label="Select a Contact by Type"
-              :items="appStore.getDistrictContactTypeCodes"
-              item-title="label"
-              item-value="districtContactTypeCode"
-            ></v-autocomplete>
-            <v-btn
-              @click="searchContact"
-              icon="mdi-magnify"
-              color="primary"
-              variant="flat"
-              rounded="lg"
-              size="large"
-              class="text-none text-subtle-1 ml-3"
-            />
-          </v-row>
-          <v-btn @click="resetContactFilters" variant="outlined" color="primary" class="text-none"
-            >Reset</v-btn
-          >
-        </v-col>
-      </v-row>
+      <v-container id="main">
+        <DisplayAlert class="mx-4 mx-md-0" />
+        <v-row no-gutters justify="space-between" class="pa-4 pa-md-0">
+          <v-spacer />
+          <v-col cols="12">
+            <h2 class="mt-3 mb-2">Find District Contacts by Type</h2>
+            <v-row no-gutters>
+              <v-col cols="11" md="4">
+                <v-autocomplete
+                  v-model="selectedContactType"
+                  label="Select a Contact by Type"
+                  :items="appStore.getDistrictContactTypeCodes"
+                  item-title="label"
+                  item-value="districtContactTypeCode"
+                ></v-autocomplete>
+              </v-col>
+              <v-col cols="3">
+                <v-btn
+                  @click="searchContact"
+                  icon="mdi-magnify"
+                  color="primary"
+                  variant="flat"
+                  rounded="lg"
+                  size="large"
+                  class="text-none text-subtle-1 ml-md-4"
+                />
+              </v-col>
+              <v-spacer class="d-block d-md-none" />
+              <v-col cols="3" md="12">
+                <v-btn
+                  @click="resetContactFilters"
+                  variant="outlined"
+                  color="primary"
+                  class="text-none"
+                  >Reset</v-btn
+                >
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-container>
     </v-sheet>
     <!-- END Contacts by Type header-->
     <v-container>
@@ -201,7 +214,6 @@ onMounted(() => {
         :headers="headers"
         :items="filteredContacts"
         class="elevation-1"
-        height="700"
         item-value="name"
         :sort-by="[{ key: 'districtNumber', order: 'asc' }]"
       ></v-data-table-virtual>
@@ -209,11 +221,4 @@ onMounted(() => {
   </div>
 </template>
 
-<style>
-/* sizes header to align with content on desktop */
-.v-toolbar__content,
-.v-toolbar__extension {
-  max-width: 1280px;
-  padding: 0 2rem;
-}
-</style>
+<style></style>
diff --git a/frontend/src/views/DistrictView.vue b/frontend/src/views/DistrictView.vue
index 2b23137e..598f35e5 100644
--- a/frontend/src/views/DistrictView.vue
+++ b/frontend/src/views/DistrictView.vue
@@ -4,7 +4,7 @@ import { ref, reactive, onMounted, computed, toValue } from 'vue'
 import { useAppStore } from '@/stores/app'
 import { useRoute } from 'vue-router'
 import router from '@/router'
-import { formatPhoneNumber } from '@/utils/common'
+import { formatPhoneNumber, isValidDistrictNumber } from '@/utils/common'
 import type { District, School, Grade, Address, Contact } from '@/types/types.d.ts'
 import jsonexport from 'jsonexport/dist'
 import { useSanitizeURL } from '@/composables/string'
@@ -13,7 +13,7 @@ import DisplayAddress from '@/components/common/DisplayAddress.vue'
 import DisplayAlert from '@/components/common/DisplayAlert.vue'
 
 const appStore = useAppStore()
-const districtId = ref<string | null>(null) // Initialize with null initially
+const districtId = ref<string | undefined>(undefined) // Initialize with null initially
 const district = reactive({ value: {} as District })
 const schools = ref<any>([])
 const contacts = ref<any>([])
@@ -74,178 +74,200 @@ function downloadDistrictSchools() {
     appStore.exportCSV(csv)
   })
 }
-
-onMounted(async () => {
+async function getDistrictId(): Promise<string> {
   const route = useRoute()
+  return appStore.getDistrictByDistrictNumber(String(route.params.districtNumber))?.districtId ?? ''
+}
+async function getDistrictData(): Promise<void> {
   // Set the districtId inside the onMounted hook; null if districtId not found
-  districtId.value =
-    appStore.getDistrictByDistrictNumber(String(route.params.districtNumber))?.districtId ?? null
+  districtId.value = await getDistrictId() //move this getter to the backend? QUESTION
+  //districtId.value = '349664f8-47e3-a226-075c-081d56d93d39'
   // get district data
-  try {
-    const response = await InstituteService.getDistrictView(districtId.value as string)
-    if (response.data?.districtData?.contacts) {
-      district.value = response.data
-      contacts.value = response.data?.districtData?.contacts
-      schools.value = district.value?.districtSchools
+  if (!!districtId.value) {
+    try {
+      const response = await InstituteService.getDistrictView(districtId.value)
+      if (response.data?.districtData?.contacts) {
+        district.value = response.data
+        contacts.value = response.data?.districtData?.contacts
+        schools.value = district.value?.districtSchools
 
-      //Change School date for DL
-      const transformedSchoolData = schools.value.map((school: School) => {
-        const { contacts, addresses, ...rest } = school
-        const transformedContacts = contacts.map(({ schoolContactTypeCode, ...contactRest }) => ({
-          schoolContactTypeCode,
-          ...contactRest
-        }))
-        const physicalAddress = addresses.find(
-          (address: Address) => address?.addressTypeCode === 'PHYSICAL'
-        )
-        const mailingAddress = addresses.find(
-          (address: Address) => address?.addressTypeCode === 'MAILING'
-        )
-        return {
-          ...rest,
-          contacts: transformedContacts.reduce((acc, contact) => ({ ...acc, ...contact }), {}),
-          physicalAddress: physicalAddress,
-          mailingAddress: mailingAddress,
-          grades: [],
-          neighborhoodLearning: [],
-          schoolMove: []
-        }
-      })
-      //Change School data for DL
-      filteredSchools.value = transformedSchoolData.map((item: any) => {
-        return {
-          'District Number': response.data.districtData.districtNumber,
-          Mincode: item.mincode,
-          'Display Name': item.displayName,
-          'Mailing Address': item.mailingAddress?.addressLine1,
-          'Mailing Address Line2': item.mailingAddress?.addressLine2,
-          'Mailing Address City': item.mailingAddress?.city,
-          'Mailing Address Province': item.mailingAddress?.provinceCode,
-          'Mailing Address PostalCode': item.mailingAddress?.postal,
-          'Physical Address': item.physicalAddress?.addressLine1,
-          'Physical Address Line2': item.physicalAddress?.addressLine2,
-          'Physical Address City': item.physicalAddress?.city,
-          'Physical Address Province': item.physicalAddress?.provinceCode,
-          'Physical Address Postal Code': item.physicalAddress?.postal,
-          Role: item.contacts?.jobTitle,
-          'Contact First Name': item.contacts?.firstName,
-          'Contact Last Name': item.contacts?.lastName,
-          'Contact Phone Extension': item.contacts?.phoneExtension,
-          'Contact Phone Number': item.contacts?.phoneNumber,
-          'Facility Type Code': appStore.getFacilityCodeLabel(item.facilityTypeCode),
-          'School Category Code': appStore.getCategoryCodeLabel(item.schoolCategoryCode),
-          'Phone Number': item.phoneNumber,
-          Fax: item.faxNumber,
-          Email: item.email,
-          Website: item.website,
-          'Group Classification Primary K-3': item.primaryK3,
-          'Group Classification Elementary 4-7 EU': item.elementary47,
-          'Group Classification Junior Secondary 8-10 SU': item.juniorSecondary810,
-          'Group Classification Senior Secondary 11-12': item.seniorSecondary1112
-        }
-      })
-      filteredContacts.value = contacts.value.map((item: any) => {
-        return {
-          'District Number': response.data.districtData?.districtNumber,
-          'District Name': response.data.districtData?.displayName,
-          'Job Title': item.jobTitle,
-          'First Name': item.firstName,
-          'Last Name': item.lastName,
-          'Phone Number': item.phoneNumber,
-          'Phone Extension': item.phoneExtension,
-          'Alternate Phone Number': item.alternatePhoneNumber,
-          'Alternate Phone Extension': item.alternatePhoneExtension,
-          Email: item.email,
-          'Mailing Address': response.data.districtData?.addresses[0].addressLine1,
-          'Mailing City': response.data.districtData?.addresses[0].city,
-          'Mailing Province': response.data.districtData?.addresses[0].provinceCode,
-          'Mailing Postal Code': response.data.districtData?.addresses[0].postal,
-          'District Phone': response.data.districtData?.phoneNumber,
-          'District Fax': response.data.districtData?.faxNumber,
-          Website: response.data.districtData?.website
-        }
-      })
+        //Change School date for DL
+        const transformedSchoolData = schools.value.map((school: School) => {
+          const { contacts, addresses, ...rest } = school
+          const transformedContacts = contacts.map(({ schoolContactTypeCode, ...contactRest }) => ({
+            schoolContactTypeCode,
+            ...contactRest
+          }))
+          const physicalAddress = addresses.find(
+            (address: Address) => address?.addressTypeCode === 'PHYSICAL'
+          )
+          const mailingAddress = addresses.find(
+            (address: Address) => address?.addressTypeCode === 'MAILING'
+          )
+          return {
+            ...rest,
+            contacts: transformedContacts.reduce((acc, contact) => ({ ...acc, ...contact }), {}),
+            physicalAddress: physicalAddress,
+            mailingAddress: mailingAddress,
+            grades: [],
+            neighborhoodLearning: [],
+            schoolMove: []
+          }
+        })
+        //Change School data for DL
+        filteredSchools.value = transformedSchoolData.map((item: any) => {
+          return {
+            'District Number': response.data.districtData.districtNumber,
+            Mincode: item.mincode,
+            'Display Name': item.displayName,
+            'Mailing Address': item.mailingAddress?.addressLine1,
+            'Mailing Address Line2': item.mailingAddress?.addressLine2,
+            'Mailing Address City': item.mailingAddress?.city,
+            'Mailing Address Province': item.mailingAddress?.provinceCode,
+            'Mailing Address PostalCode': item.mailingAddress?.postal,
+            'Physical Address': item.physicalAddress?.addressLine1,
+            'Physical Address Line2': item.physicalAddress?.addressLine2,
+            'Physical Address City': item.physicalAddress?.city,
+            'Physical Address Province': item.physicalAddress?.provinceCode,
+            'Physical Address Postal Code': item.physicalAddress?.postal,
+            Role: item.contacts?.jobTitle,
+            'Contact First Name': item.contacts?.firstName,
+            'Contact Last Name': item.contacts?.lastName,
+            'Contact Phone Extension': item.contacts?.phoneExtension,
+            'Contact Phone Number': item.contacts?.phoneNumber,
+            'Facility Type Code': appStore.getFacilityCodeLabel(item.facilityTypeCode),
+            'School Category Code': appStore.getCategoryCodeLabel(item.schoolCategoryCode),
+            'Phone Number': item.phoneNumber,
+            Fax: item.faxNumber,
+            Email: item.email,
+            Website: item.website,
+            'Group Classification Primary K-3': item.primaryK3,
+            'Group Classification Elementary 4-7 EU': item.elementary47,
+            'Group Classification Junior Secondary 8-10 SU': item.juniorSecondary810,
+            'Group Classification Senior Secondary 11-12': item.seniorSecondary1112
+          }
+        })
+        filteredContacts.value = contacts.value.map((item: any) => {
+          return {
+            'District Number': response.data.districtData?.districtNumber,
+            'District Name': response.data.districtData?.displayName,
+            'Contact Type': item.label,
+            'Job Title': item.jobTitle,
+            'First Name': item.firstName,
+            'Last Name': item.lastName,
+            'Phone Number': item.phoneNumber,
+            'Phone Extension': item.phoneExtension,
+            'Alternate Phone Number': item.alternatePhoneNumber,
+            'Alternate Phone Extension': item.alternatePhoneExtension,
+            Email: item.email,
+            'Mailing Address': response.data.districtData?.addresses[0].addressLine1,
+            'Mailing City': response.data.districtData?.addresses[0].city,
+            'Mailing Province': response.data.districtData?.addresses[0].provinceCode,
+            'Mailing Postal Code': response.data.districtData?.addresses[0].postal,
+            'District Phone': response.data.districtData?.phoneNumber,
+            'District Fax': response.data.districtData?.faxNumber,
+            Website: response.data.districtData?.website
+          }
+        })
+      }
+    } catch (error) {
+      console.error(error)
     }
-  } catch (error) {
-    console.error(error)
   }
-  // get district contact type codes
-  // try {
-  //   const response = await InstituteService.getDistrictContactTypeCodes()
-  //   districtContactTypeCodes.value = response.data
-  // } catch (error) {
-  //   console.error(error)
-  // }
+}
+
+onMounted(async () => {
+  await getDistrictData()
 })
 </script>
 
 <template>
   <div>
-    <v-spacer />
     <v-breadcrumbs
       class="breadcrumbs"
       bg-color="white"
       :items="[
         { title: 'Home', href: '/' },
         'District',
-        district.value.districtData?.districtNumber + ' ' + district.value.districtData?.displayName
+        district.value.districtData
+          ? district.value.districtData.districtNumber +
+            ' ' +
+            district.value.districtData.displayName
+          : ''
       ]"
     ></v-breadcrumbs>
 
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <DisplayAlert />
-      <v-row no-gutters justify="space-between">
-        <v-col v-if="district.value.districtData">
-          <v-row no-gutters>
-            <h1 class="mt-3 mb-2">
-              {{ district.value.districtData?.districtNumber }} -
-              {{ district.value.districtData?.displayName }}
-            </h1>
-          </v-row>
-          <v-row no-gutters justify="space-between">
-            <v-col>
-              <p>
-                <strong>Phone:</strong>
-                {{ formatPhoneNumber(district.value.districtData?.phoneNumber) }}
-              </p>
-              <p>
-                <strong>Fax:</strong>
-                {{ formatPhoneNumber(district.value.districtData?.faxNumber) }}
-              </p>
-              <p><strong>Email:</strong> {{ district.value.districtData?.email }}</p>
-              <p>
-                <a :href="district.value.districtData?.website">{{
-                  district.value.districtData?.website
-                }}</a>
-              </p>
-            </v-col>
+      <v-container id="main">
+        <DisplayAlert class="mx-4 mx-lg-0" />
+        <v-row no-gutters justify="space-between" class="pa-4 pa-md-5 pa-lg-0">
+          <v-col cols="12" v-if="district.value.districtData">
+            <v-row no-gutters justify="space-between">
+              <v-col>
+                <h1 class="mt-1 mt-md-3 mb-6 mb-md-2">
+                  <span class="d-inline d-md-none">District </span>
+                  <span>
+                    {{ district.value.districtData?.districtNumber }}
+                  </span>
+                  <span class="d-none d-md-inline"> - </span>
+                  <span class="d-block d-md-inline institute-name">
+                    {{ district.value.districtData?.displayName }}
+                  </span>
+                </h1>
+              </v-col>
+            </v-row>
+            <v-row no-gutters justify="space-between">
+              <v-col cols="11" md="auto" class="mb-4">
+                <p v-if="district.value.districtData?.phoneNumber">
+                  <strong>Phone:</strong>
+                  {{ formatPhoneNumber(district.value.districtData?.phoneNumber) }}
+                </p>
+                <p v-if="district.value.districtData?.faxNumber">
+                  <strong>Fax:</strong>
+                  {{ formatPhoneNumber(district.value.districtData?.faxNumber) }}
+                </p>
+                <p v-if="district.value.districtData?.email">
+                  <strong>Email: </strong
+                  ><a :href="'mailto:' + district.value.districtData?.email">{{
+                    district.value.districtData?.email
+                  }}</a>
+                </p>
+                <p>
+                  <a :href="district.value.districtData?.website">{{
+                    district.value.districtData?.website
+                  }}</a>
+                </p>
+              </v-col>
 
-            <v-col
-              v-for="item in district.value.districtData.addresses"
-              :key="item.addressTypeCode"
-            >
-              <DisplayAddress v-bind="item" />
-            </v-col>
-
-            <v-col>
-              <v-btn
-                variant="text"
-                class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-                @click="downloadDistrictContacts"
-                ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
-                District Contacts (CSV)</v-btn
+              <v-col
+                cols="11"
+                md="auto"
+                v-for="item in district.value.districtData.addresses"
+                :key="item.addressTypeCode"
               >
-              <v-btn
-                variant="text"
-                class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-                @click="downloadDistrictSchools"
-                ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
-                District Schools (CSV)</v-btn
-              >
-            </v-col>
-          </v-row>
-        </v-col>
-      </v-row>
+                <DisplayAddress v-bind="item" class="mb-3" />
+              </v-col>
+
+              <v-col cols="11" md="4" class="pa-0 pa-md-3">
+                <v-btn
+                  variant="text"
+                  class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+                  @click="downloadDistrictContacts"
+                  ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
+                  District Contacts (CSV)</v-btn
+                >
+                <v-btn
+                  variant="text"
+                  class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+                  @click="downloadDistrictSchools"
+                  ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
+                  District Schools (CSV)</v-btn
+                >
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-container>
     </v-sheet>
     <!-- END DISTRICT HEADER INFO -->
 
@@ -284,7 +306,9 @@ onMounted(async () => {
               :sort-by="[{ key: 'label', order: 'asc' }]"
             >
               <template v-slot:item.email="{ item }">
-                <a :href="`mailto:${item.email}`">{{ item.email }}</a>
+                <div style="max-width: 250px; overflow: hidden">
+                  <a :href="`mailto:${item.email}`">{{ item.email }}</a>
+                </div>
               </template>
 
               <template v-slot:item.phoneNumber="{ item }">
@@ -315,6 +339,7 @@ onMounted(async () => {
                   item.displayName
                 }}</a>
               </template>
+
               <template v-slot:item.schoolCategoryCode="{ item }">
                 {{ appStore.getCategoryCodeLabel(item.schoolCategoryCode) }}
               </template>
@@ -323,14 +348,6 @@ onMounted(async () => {
                 {{ appStore.getFacilityCodeLabel(item.facilityTypeCode) }}
               </template>
 
-              <template v-slot:item.email="{ item }">
-                <a :href="`mailto:${item.email}`">{{ item.email }}</a>
-              </template>
-
-              <template v-slot:item.website="{ item }">
-                <a :href="item.website">{{ item.website }}</a>
-              </template>
-
               <template v-slot:item.phoneNumber="{ item }">
                 <div style="min-width: 125px">
                   <!-- Adjust the min-width value as needed -->
@@ -343,6 +360,18 @@ onMounted(async () => {
                   {{ formatPhoneNumber(item.faxNumber) }}
                 </div>
               </template>
+
+              <template v-slot:item.email="{ item }">
+                <div style="max-width: 250px; overflow: hidden">
+                  <a :href="`mailto:${item.email}`">{{ item.email }}</a>
+                </div>
+              </template>
+
+              <template v-slot:item.website="{ item }">
+                <div style="max-width: 200px">
+                  <a :href="item.website">{{ item.website }}</a>
+                </div>
+              </template>
             </v-data-table>
           </v-window-item>
         </v-window>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index e9b5cd31..77769223 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -6,29 +6,26 @@ import SchoolSelect from '../components/SchoolSelect.vue'
 </script>
 
 <template>
-  <div>
-    <!-- <v-breadcrumbs
-      bg-color="primary"
-      class="breadcrumbs"
-      :items="[{ title: 'Home', href: '/' }]"
-    ></v-breadcrumbs> -->
+  <v-container fluid class="pa-0">
     <v-col no-gutters>
       <v-row>
-        <SchoolSelect />
+        <v-col class="pa-0">
+          <SchoolSelect />
+        </v-col>
       </v-row>
-      <v-row no-gutters>
-        <v-col class="d-flex align-stretch ma-2">
+      <v-row justify="center" class="pa-2 pa-md-0">
+        <v-col cols="12" md="4" class="d-flex py-md-6 pa-2 px-md-3">
           <DistrictSelect />
         </v-col>
 
-        <v-col class="d-flex align-stretch ma-2">
+        <v-col cols="12" md="4" class="d-flex py-md-6 pa-2 px-md-3">
           <AuthoritySelect />
         </v-col>
 
-        <v-col class="d-flex align-stretch ma-2">
+        <v-col cols="12" md="4" class="d-flex py-md-6 pa-2 px-md-3">
           <OffshoreSelect />
         </v-col>
       </v-row>
     </v-col>
-  </div>
+  </v-container>
 </template>
diff --git a/frontend/src/views/OffshoreView.vue b/frontend/src/views/OffshoreView.vue
index 16c23bdb..b9b9a37d 100644
--- a/frontend/src/views/OffshoreView.vue
+++ b/frontend/src/views/OffshoreView.vue
@@ -131,29 +131,32 @@ onBeforeMount(() => {
       :items="[{ title: 'Home', href: '/' }, 'Offshore Schools']"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <DisplayAlert />
-      <v-row no-gutters justify="space-between">
-        <v-col>
-          <h1 class="mt-3 mb-2">Offshore Schools</h1>
-        </v-col>
-        <v-spacer />
-        <v-col cols="3"
-          ><v-btn
-            variant="text"
-            class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-            href="/api/v1/download/csv/authority/all-mailing/OFFSHORE?filepath=offshoreschoolrepresentatives"
-            ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download Offshore
-            Representatives (CSV)</v-btn
-          >
-          <v-btn
-            @click="downloadCSV"
-            variant="text"
-            class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-            ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download Offshore
-            Schools(CSV)</v-btn
-          >
-        </v-col>
-      </v-row>
+      <v-container id="main">
+        <DisplayAlert class="mx-4 mx-md-0" />
+        <v-row no-gutters justify="space-between">
+          <v-col cols="11" md="auto">
+            <h1 class="mt-3 mb-2 mx-4 mx-md-0">Offshore Schools</h1>
+          </v-col>
+        </v-row>
+        <v-row no-gutters justify="space-between">
+          <v-col cols="11" md="4"
+            ><v-btn
+              variant="text"
+              class="text-none text-subtitle-1 ma-1 mx-4 mx-md-0 v-btn-align-left"
+              href="/api/v1/download/csv/authority/all-mailing/OFFSHORE?filepath=offshoreschoolrepresentatives"
+              ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download Offshore
+              Representatives (CSV)</v-btn
+            >
+            <v-btn
+              @click="downloadCSV"
+              variant="text"
+              class="text-none text-subtitle-1 ma-1 mx-4 mx-md-0 v-btn-align-left"
+              ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download Offshore
+              Schools(CSV)</v-btn
+            >
+          </v-col>
+        </v-row>
+      </v-container>
     </v-sheet>
     <!-- END Offshore Schools Header Block -->
 
@@ -196,11 +199,4 @@ onBeforeMount(() => {
 
 <style></style>
 
-<style>
-/* sizes header to align with content on desktop */
-.v-toolbar__content,
-.v-toolbar__extension {
-  max-width: 1280px;
-  padding: 0 2rem;
-}
-</style>
+<style></style>
diff --git a/frontend/src/views/SchoolSearchView.vue b/frontend/src/views/SchoolSearchView.vue
index fe65454d..d7b6c692 100644
--- a/frontend/src/views/SchoolSearchView.vue
+++ b/frontend/src/views/SchoolSearchView.vue
@@ -44,17 +44,7 @@ const handleUpdate = async (options: any) => {
 const fetchTypes = async () => {
   try {
     const response = await InstituteService.getFacilityCodes()
-    const valuesToRemove = [
-      'PROVINCIAL',
-      'DIST_CONT',
-      'ELEC_DELIV',
-      'POST_SEC',
-      'JUSTB4PRO',
-      'SUMMER'
-    ] // Add the values you want to remove
-    types.value = response.data.filter(
-      (item: any) => !valuesToRemove.includes(item.facilityTypeCode)
-    )
+    types.value = response.data
   } catch (error) {
     console.error('Error fetching types:', error)
   }
@@ -153,20 +143,6 @@ const searchSchools = async () => {
     valueType: 'STRING',
     condition: 'AND'
   })
-  params[0].searchCriteriaList.push({
-    key: 'schoolCategoryCode',
-    operation: 'nin',
-    value: 'FED_BAND, POST_SEC,YUKON',
-    valueType: 'STRING',
-    condition: 'AND'
-  })
-  params[0].searchCriteriaList.push({
-    key: 'facilityTypeCode',
-    operation: 'nin',
-    value: 'SUMMER,PROVINCIAL,DIST_CONT, ELEC_DELIV,POST_SEC,JUSTB4PRO,SUMMER',
-    valueType: 'STRING',
-    condition: 'AND'
-  })
 
   const jsonString = JSON.stringify(params)
   const encodedParams = encodeURIComponent(jsonString)
@@ -227,11 +203,13 @@ onBeforeMount(async () => {
       :items="[{ title: 'Home', href: '/' }, 'Search']"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <DisplayAlert />
-      <v-container class="main">
-        <h1>Find Schools</h1>
-        <v-row>
-          <v-col cols="12" md="3">
+      <v-container id="main">
+        <DisplayAlert class="mx-4 mx-md-0" />
+        <v-row no-gutters class="mx-4 mx-md-0">
+          <v-col cols="11">
+            <h1>Find Schools</h1>
+          </v-col>
+          <v-col cols="11" md="3" class="pr-md-2">
             <v-select
               v-model="selectedJurisdiction"
               :items="jurisdictions"
@@ -241,7 +219,7 @@ onBeforeMount(async () => {
               multiple
             ></v-select>
           </v-col>
-          <v-col cols="12" md="3">
+          <v-col cols="11" md="3" class="pl-md-2">
             <v-select
               v-model="selectedType"
               item-title="label"
@@ -251,7 +229,7 @@ onBeforeMount(async () => {
               multiple
             ></v-select>
           </v-col>
-          <v-col cols="12" md="3"
+          <v-col cols="3"
             ><v-btn
               icon="mdi-magnify"
               color="primary"
@@ -259,9 +237,10 @@ onBeforeMount(async () => {
               rounded="lg"
               size="large"
               @click="searchSchools"
-              class="text-none text-subtle-1 ml-3"
+              class="text-none text-subtle-1 ml-md-4"
           /></v-col>
-          <v-col cols="12">
+          <v-spacer class="d-block d-md-none" />
+          <v-col cols="3" md="11">
             <v-btn @click="resetFilters" variant="outlined" color="primary" class="text-none"
               >Reset</v-btn
             >
@@ -271,7 +250,8 @@ onBeforeMount(async () => {
       </v-container>
     </v-sheet>
 
-    <v-card class="pa-6" width="100%">
+    <!-- <v-card class="pa-6" width="100%"> -->
+    <v-sheet class="pa-6">
       <!-- Search Results Table -->
       Total: {{ results }} <span v-if="results != 0">Current Page {{ currentPage + 1 }}</span>
       <v-data-table-server
@@ -341,7 +321,8 @@ onBeforeMount(async () => {
           </tr>
         </template>
       </v-data-table-server>
-    </v-card>
+      <!-- </v-card> -->
+    </v-sheet>
   </div>
 </template>
 
diff --git a/frontend/src/views/SchoolView.vue b/frontend/src/views/SchoolView.vue
index 6dfc7123..c71a1edb 100644
--- a/frontend/src/views/SchoolView.vue
+++ b/frontend/src/views/SchoolView.vue
@@ -229,18 +229,31 @@ function goToDistrict() {
       :items="[
         { title: 'Home', href: '/' },
         'School',
-        { title: schoolData?.value?.displayName, href: '' }
+        !!schoolData.value ? { title: schoolData.value.displayName, href: '' } : ''
       ]"
     ></v-breadcrumbs>
 
-    <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <DisplayAlert />
-      <v-row no-gutters justify="space-between">
-        <v-row v-if="schoolData.value" no-gutters justify="space-between">
-          <v-col>
+    <v-sheet
+      style="z-index: 100; position: relative"
+      elevation="2"
+      class="pt-6 pb-0 pb-md-6 full-width"
+    >
+      <v-container id="main">
+        <DisplayAlert class="mx-4 mx-lg-1 mx-xl-0" />
+        <v-row
+          v-if="schoolData.value"
+          no-gutters
+          justify="space-between"
+          class="pa-4 pa-md-5 pa-lg-0"
+        >
+          <v-col cols="11" md="12">
             <v-row no-gutters>
               <h1 class="mt-3 mb-2">
-                {{ schoolData.value.mincode }} - {{ schoolData.value.displayName }}
+                <span class="">{{ schoolData.value.mincode }}</span>
+                <span class="d-none d-md-inline"> - </span>
+                <span class="d-block d-md-inline institute-name">{{
+                  schoolData.value.displayName
+                }}</span>
               </h1>
             </v-row>
             <v-row no-gutters class="mt-0 mb-1">
@@ -268,28 +281,35 @@ function goToDistrict() {
               <v-chip
                 v-for="grade in filteredGradesLabels"
                 :key="grade"
-                class="mr-1"
+                class="mr-1 mb-1"
                 size="small"
                 color="primary"
                 label
                 >{{ grade }}</v-chip
               >
             </v-row>
-            <v-row no-gutters>
-              <v-col class="pl-0">
+            <v-row no-gutters justify="space-between">
+              <v-col cols="11" md="auto" class="pl-0 mb-2">
                 <p><strong>Phone:</strong> {{ formatPhoneNumber(schoolData.value.phoneNumber) }}</p>
                 <p><strong>Fax:</strong> {{ formatPhoneNumber(schoolData.value.faxNumber) }}</p>
                 <p>
                   <strong>Email: </strong>
-                  <a :href="'mailto:' + schoolData.value?.email">
+                  <a v-if="schoolData.value?.email" :href="'mailto:' + schoolData.value?.email">
                     {{ schoolData.value.email }}
                   </a>
                 </p>
               </v-col>
-              <v-col v-for="item in schoolData.value.addresses" :key="item.addressTypeCode">
+              <v-col
+                cols="11"
+                md="auto"
+                v-for="item in schoolData.value.addresses"
+                :key="item.addressTypeCode"
+              >
                 <DisplayAddress v-bind="item" />
               </v-col>
               <v-col
+                cols="11"
+                md="auto"
                 v-if="
                   schoolData.value.primaryK3 ||
                   schoolData.value.elementary47 ||
@@ -298,7 +318,7 @@ function goToDistrict() {
                 "
               >
                 <strong> Group Classification:</strong><br />
-                <ul>
+                <ul class="pl-2 pl-md-5">
                   <li v-if="schoolData.value.primaryK3">
                     {{ schoolData.value.primaryK3 }} - Primary K-3
                   </li>
@@ -316,10 +336,10 @@ function goToDistrict() {
                   </li>
                 </ul>
               </v-col>
-              <v-col
+              <v-col cols="11" md="4"
                 ><v-btn
                   variant="text"
-                  class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+                  class="text-none text-subtitle-1 ma-1 v-btn-align-left px-0 px-md-4"
                   @click="downloadCSV"
                   :disabled="!schoolData.value"
                   ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
@@ -329,10 +349,10 @@ function goToDistrict() {
             </v-row>
           </v-col>
         </v-row>
-      </v-row>
+      </v-container>
     </v-sheet>
 
-    <v-card class="fill-screen-height pa-6" width="100%" v-if="schoolData.value">
+    <v-card class="pa-6" width="100%" v-if="schoolData.value">
       <v-tabs v-model="tab">
         <v-tab :value="tabOptions.contacts">School Contacts</v-tab>
       </v-tabs>
@@ -362,3 +382,11 @@ function goToDistrict() {
     </v-card>
   </div>
 </template>
+
+<style scoped>
+@media (max-width: 768px) {
+  ul {
+    list-style-type: none;
+  }
+}
+</style>