diff --git a/backend/src/components/edx/exchange.js b/backend/src/components/edx/exchange.js
index 96578dcd2..c126d4f49 100644
--- a/backend/src/components/edx/exchange.js
+++ b/backend/src/components/edx/exchange.js
@@ -88,9 +88,6 @@ async function getExchanges(req, res) {
               element['contactIdentifierName'] = tempMinTeam.teamName;
             }
           }
-          if (element['createDate']) {
-            element['createDate'] = LocalDateTime.parse(element['createDate']).format(DateTimeFormatter.ofPattern('uuuu/MM/dd'));
-          }
         });
       }
       return res.status(200).json(dataResponse);
@@ -190,10 +187,6 @@ async function getExchange(req, res) {
         dataResponse['districtName'] = district.name;
       }
 
-      if (dataResponse['createDate']) {
-        dataResponse['createDate'] = LocalDateTime.parse(dataResponse['createDate']).format(DateTimeFormatter.ofPattern('uuuu/MM/dd'));
-      }
-
       //creating activities list for timeline display on the frontend
       dataResponse['activities'] = [];
       dataResponse['commentsList'].forEach((comment) => {
@@ -510,7 +503,8 @@ async function districtUserActivationInvite(req, res) {
   }
 
   const payload = {
-    ...req.body
+    ...req.body,
+    edxUserExpiryDate: req.body.edxUserExpiryDate
   };
   try {
     const response = await utils.postData(token, config.get('server:edx:districtUserActivationInviteURL'), payload, null, utils.getUser(req).idir_username);
@@ -536,7 +530,8 @@ async function schoolUserActivationInvite(req, res) {
   }
 
   const payload = {
-    ...req.body
+    ...req.body,
+    edxUserExpiryDate: req.body.edxUserExpiryDate
   };
   try {
     const response = await utils.postData(token, config.get('server:edx:schoolUserActivationInviteURL'), payload, null, utils.getUser(req).idir_username);
@@ -580,6 +575,7 @@ async function updateEdxUserSchoolRoles(req, res) {
 
     selectedUserSchool.updateDate = null;
     selectedUserSchool.createDate = null;
+    selectedUserSchool.expiryDate = req.body.params.expiryDate;
 
     const result = await utils.putData(token, `${config.get('server:edx:edxUsersURL')}/${selectedUserSchool.edxUserID}/school`, selectedUserSchool, userInfo.idir_username);
     return res.status(HttpStatus.OK).json(result);
@@ -621,6 +617,7 @@ async function updateEdxUserDistrictRoles(req, res) {
 
     selectedUserDistrict.updateDate = null;
     selectedUserDistrict.createDate = null;
+    selectedUserDistrict.expiryDate = req.body.params.expiryDate;
 
     const result = await utils.putData(token, `${config.get('server:edx:edxUsersURL')}/${selectedUserDistrict.edxUserID}/district`, selectedUserDistrict, userInfo.idir_username);
     return res.status(HttpStatus.OK).json(result);
@@ -709,7 +706,7 @@ const createSearchParamObject = (key, value) => {
     valueType = VALUE_TYPE.UUID;
   } else if (key === 'createDate') {
     value.forEach((date, index) => {
-      value[index] = date + 'T00:00:00';
+      value[index] = date;
     });
     if (value.length === 1) {
       value.push(LocalDateTime.parse(value[0]).plusHours(23).plusMinutes(59).plusSeconds(59));
@@ -856,6 +853,7 @@ async function relinkUserSchoolOrDistrictAccess(req, res) {
         email: edxUserDetails.email,
         edxUserId: req.body.params.userToRelink,
         edxUserSchoolID: req.body.params.userSchoolID,
+        edxUserExpiryDate: req.body.params.edxUserExpiryDate
       };
       await postData(token, config.get('server:edx:exchangeURL') + '/school-user-activation-relink-saga', payload,null, userName);
     } else {
@@ -870,6 +868,7 @@ async function relinkUserSchoolOrDistrictAccess(req, res) {
         email: edxUserDetails.email,
         edxUserId: req.body.params.userToRelink,
         edxUserDistrictID: req.body.params.edxUserDistrictID,
+        edxUserExpiryDate: req.body.params.edxUserExpiryDate
       };
       await postData(token, config.get('server:edx:exchangeURL') + '/district-user-activation-relink-saga', payload,null, userName);
     }
diff --git a/backend/src/components/institute/institute.js b/backend/src/components/institute/institute.js
index d94eba82d..76c65b3e2 100644
--- a/backend/src/components/institute/institute.js
+++ b/backend/src/components/institute/institute.js
@@ -58,7 +58,6 @@ async function getDistricts(req, res) {
 async function addDistrictContact(req, res) {
   try {
     const token = getBackendToken(req);
-    const formatter = DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss');
 
     let district = cacheService.getDistrictJSONByDistrictId(req.body.districtID);
     if(!district || !hasDistrictAdminRole(req)){
@@ -85,8 +84,8 @@ async function addDistrictContact(req, res) {
       phoneExtension: req.body.phoneExtension,
       alternatePhoneNumber: req.body.alternatePhoneNumber,
       alternatePhoneExtension: req.body.alternatePhoneExtension,
-      effectiveDate: req.body.effectiveDate ? LocalDate.parse(req.body.effectiveDate).atStartOfDay().format(formatter) : null,
-      expiryDate: req.body.expiryDate ? LocalDate.parse(req.body.expiryDate).atStartOfDay().format(formatter) : null
+      effectiveDate: req.body.effectiveDate ? req.body.effectiveDate : null,
+      expiryDate: req.body.expiryDate ? req.body.expiryDate : null
     };
 
     const data = await utils.postData(token, url, payload, null, utils.getUser(req).idir_username);
@@ -166,7 +165,6 @@ async function updateDistrict(req, res) {
 async function updateDistrictContact(req, res) {
   try {
     const token = getBackendToken(req);
-    const formatter = DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss');
 
     let district = cacheService.getDistrictJSONByDistrictId(req.body.districtId);
     if(!district || !hasDistrictAdminRole(req)){
@@ -185,8 +183,6 @@ async function updateDistrictContact(req, res) {
     params.updateDate = null;
     params.createDate = null;
     params.updateUser = utils.getUser(req).idir_username;
-    params.effectiveDate = params.effectiveDate ? LocalDate.parse(req.body.effectiveDate).atStartOfDay().format(formatter) : null;
-    params.expiryDate = req.body.expiryDate ? LocalDate.parse(req.body.expiryDate).atStartOfDay().format(formatter) : null;
 
     const result = await utils.putData(token, `${config.get('server:institute:instituteDistrictURL')}/${req.body.districtId}/contact/${req.params.contactId}` , params, utils.getUser(req).idir_username);
     return res.status(HttpStatus.OK).json(result);
@@ -199,7 +195,6 @@ async function updateDistrictContact(req, res) {
 async function deleteDistrictContact(req, res) {
   try {
     const token = getBackendToken(req);
-    const formatter = DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss');
 
     let district = cacheService.getDistrictJSONByDistrictId(req.params.districtId);
     if(!district || !hasDistrictAdminRole(req)){
@@ -225,7 +220,7 @@ async function deleteDistrictContact(req, res) {
     contact.createDate = null;
     contact.updateDate = null;
     contact.updateUser = utils.getUser(req).idir_username;
-    contact.expiryDate = LocalDateTime.now().format(formatter);
+    contact.expiryDate = LocalDate.now().atStartOfDay().format(DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss'));
 
     await utils.putData(token, config.get('server:institute:instituteDistrictURL') + '/' + req.params.districtId + '/contact/'+ req.params.contactId , contact, utils.getUser(req).idir_username);
 
@@ -347,8 +342,6 @@ async function addSchool(req, res) {
       });
     }
 
-    const formatter = DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss');
-
     const payload = {
       createUser: utils.getUser(req).idir_username,
       createDate: null,
@@ -366,7 +359,7 @@ async function addSchool(req, res) {
       schoolOrganizationCode: req.body.schoolOrganizationCode,
       schoolCategoryCode: req.body.schoolCategoryCode,
       facilityTypeCode: req.body.facilityTypeCode,
-      openedDate: req.body.openedDate ? LocalDate.parse(req.body.openedDate).atStartOfDay().format(formatter) : null,
+      openedDate: req.body.openedDate ? req.body.openedDate : null,
       closedDate: null,
       addresses: [],
       grades: [],
@@ -496,7 +489,6 @@ async function deleteSchoolNote(req, res) {
 async function addSchoolContact(req, res) {
   try {
     const token = getBackendToken(req);
-    const formatter = DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss');
 
     let school = cacheService.getSchoolBySchoolID(req.body.schoolID);
     if(!school || !hasSchoolAdminRole(req, school)){
@@ -523,8 +515,8 @@ async function addSchoolContact(req, res) {
       phoneExtension: req.body.phoneExtension,
       alternatePhoneNumber: req.body.alternatePhoneNumber,
       alternatePhoneExtension: req.body.alternatePhoneExtension,
-      effectiveDate: req.body.effectiveDate ? LocalDate.parse(req.body.effectiveDate).atStartOfDay().format(formatter) : null,
-      expiryDate: req.body.expiryDate ? LocalDate.parse(req.body.expiryDate).atStartOfDay().format(formatter) : null
+      effectiveDate: req.body.effectiveDate ? req.body.effectiveDate : null,
+      expiryDate: req.body.expiryDate ? req.body.expiryDate : null
     };
 
     const data = await utils.postData(token, url, payload, null, utils.getUser(req).idir_username);
@@ -539,7 +531,6 @@ async function addSchoolContact(req, res) {
 async function updateSchoolContact(req, res) {
   try {
     const token = getBackendToken(req);
-    const formatter = DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss');
 
     let school = cacheService.getSchoolBySchoolID(req.body.schoolID);
     if(!school || !hasSchoolAdminRole(req, school)){
@@ -558,8 +549,9 @@ async function updateSchoolContact(req, res) {
     params.updateDate = null;
     params.createDate = null;
     params.updateUser = utils.getUser(req).idir_username;
-    params.effectiveDate = params.effectiveDate ? LocalDate.parse(req.body.effectiveDate).atStartOfDay().format(formatter) : null;
-    params.expiryDate = req.body.expiryDate ? LocalDate.parse(req.body.expiryDate).atStartOfDay().format(formatter) : null;
+    params.effectiveDate = params.effectiveDate ? req.body.effectiveDate : null;
+    params.expiryDate = req.body.expiryDate ? req.body.expiryDate : null;
+    params.expiryDate = req.body.expiryDate ? req.body.expiryDate : null;
 
     const result = await utils.putData(token, config.get('server:institute:instituteSchoolURL') + '/' + req.body.schoolID + '/contact/'+ req.params.contactId , params, utils.getUser(req).idir_username);
     return res.status(HttpStatus.OK).json(result);
@@ -572,7 +564,6 @@ async function updateSchoolContact(req, res) {
 async function deleteSchoolContact(req, res) {
   try {
     const token = getBackendToken(req);
-    const formatter = DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss');
 
     let school = cacheService.getSchoolBySchoolID(req.params.schoolId);
     if(!school || !hasSchoolAdminRole(req, school)){
@@ -598,7 +589,7 @@ async function deleteSchoolContact(req, res) {
     contact.createDate = null;
     contact.updateDate = null;
     contact.updateUser = utils.getUser(req).idir_username;
-    contact.expiryDate = LocalDateTime.now().format(formatter);
+    contact.expiryDate = LocalDate.now().atStartOfDay().format(DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss'));
 
     await utils.putData(token, config.get('server:institute:instituteSchoolURL') + '/' + req.params.schoolId + '/contact/'+ req.params.contactId , contact, utils.getUser(req).idir_username);
 
@@ -612,7 +603,6 @@ async function deleteSchoolContact(req, res) {
 async function addAuthorityContact(req, res) {
   try {
     const token = getBackendToken(req);
-    const formatter = DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss');
 
     let authority = cacheService.getAuthorityJSONByAuthorityId(req.body.authorityID);
     if(!authority || !hasAuthorityAdminRole(req, authority)){
@@ -639,8 +629,8 @@ async function addAuthorityContact(req, res) {
       phoneExtension: req.body.phoneExtension,
       alternatePhoneNumber: req.body.alternatePhoneNumber,
       alternatePhoneExtension: req.body.alternatePhoneExtension,
-      effectiveDate: req.body.effectiveDate ? LocalDate.parse(req.body.effectiveDate).atStartOfDay().format(formatter) : null,
-      expiryDate: req.body.expiryDate ? LocalDate.parse(req.body.expiryDate).atStartOfDay().format(formatter) : null
+      effectiveDate: req.body.effectiveDate ? req.body.effectiveDate : null,
+      expiryDate: req.body.expiryDate ? req.body.expiryDate : null
     };
 
     const data = await utils.postData(token, url, payload, null, utils.getUser(req).idir_username);
@@ -655,7 +645,6 @@ async function addAuthorityContact(req, res) {
 async function updateAuthorityContact(req, res) {
   try {
     const token = getBackendToken(req);
-    const formatter = DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss');
 
     let authority = cacheService.getAuthorityJSONByAuthorityId(req.body.independentAuthorityId);
     if(!authority || !hasAuthorityAdminRole(req, authority)){
@@ -674,8 +663,6 @@ async function updateAuthorityContact(req, res) {
     params.updateDate = null;
     params.createDate = null;
     params.updateUser = utils.getUser(req).idir_username;
-    params.effectiveDate = params.effectiveDate ? LocalDate.parse(req.body.effectiveDate).atStartOfDay().format(formatter) : null;
-    params.expiryDate = req.body.expiryDate ? LocalDate.parse(req.body.expiryDate).atStartOfDay().format(formatter) : null;
 
     const result = await utils.putData(token, config.get('server:institute:instituteAuthorityURL') + '/' + req.body.independentAuthorityId + '/contact/'+ req.params.contactId , params, utils.getUser(req).idir_username);
     return res.status(HttpStatus.OK).json(result);
@@ -688,7 +675,6 @@ async function updateAuthorityContact(req, res) {
 async function deleteAuthorityContact(req, res) {
   try {
     const token = getBackendToken(req);
-    const formatter = DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss');
 
     let authority = cacheService.getAuthorityJSONByAuthorityId(req.params.independentAuthorityId);
     if(!authority || !hasAuthorityAdminRole(req, authority)){
@@ -714,7 +700,7 @@ async function deleteAuthorityContact(req, res) {
     contact.createDate = null;
     contact.updateDate = null;
     contact.updateUser = utils.getUser(req).idir_username;
-    contact.expiryDate = LocalDateTime.now().format(formatter);
+    contact.expiryDate = LocalDate.now().atStartOfDay().format(DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss'));
 
     await utils.putData(token, config.get('server:institute:instituteAuthorityURL') + '/' + req.params.independentAuthorityId + '/contact/'+ req.params.contactId , contact, utils.getUser(req).idir_username);
 
@@ -728,7 +714,6 @@ async function deleteAuthorityContact(req, res) {
 async function addAuthority(req, res) {
   try {
     const token = getBackendToken(req);
-    const formatter = DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss');
 
     if(!hasAuthorityAdminRole(req)){
       return res.status(HttpStatus.UNAUTHORIZED).json({
@@ -742,7 +727,7 @@ async function addAuthority(req, res) {
 
       displayName: req.body.authorityName,
       authorityTypeCode: req.body.authorityTypeCode,
-      openedDate: req.body.openDate ? LocalDate.parse(req.body.openDate).atStartOfDay().format(formatter) : null,
+      openedDate: req.body.openDate ? req.body.openDate : null,
       email: req.body.email,
       phoneNumber: req.body.phoneNumber,
       faxNumber: req.body.faxNumber,
@@ -991,7 +976,6 @@ async function getSchoolsPaginated(req, res){
 async function moveSchool(req, res) {
   try {
     const token = getBackendToken(req);
-    const formatter = DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss');
 
     if(!hasSchoolAdminRole(req, req.body.toSchool)){
       return res.status(HttpStatus.UNAUTHORIZED).json({
@@ -1000,7 +984,7 @@ async function moveSchool(req, res) {
     }
 
     const incomingPayload = req.body;
-    incomingPayload.toSchool.openedDate = LocalDate.parse(incomingPayload.toSchool.moveDate).atStartOfDay().format(formatter);
+    incomingPayload.toSchool.openedDate = incomingPayload.toSchool.moveDate;
     incomingPayload.toSchool.createDate = null;
     incomingPayload.toSchool.updateDate = null;
     incomingPayload.toSchool.createUser = utils.getUser(req).idir_username;
@@ -1055,7 +1039,7 @@ async function moveSchool(req, res) {
 
     const payload = {
       toSchool: incomingPayload.toSchool,
-      moveDate: LocalDate.parse(incomingPayload.toSchool.moveDate).atStartOfDay().format(formatter),
+      moveDate: incomingPayload.toSchool.moveDate,
       fromSchoolId: req.body.fromSchoolId
     };
 
diff --git a/backend/src/config/index.js b/backend/src/config/index.js
index 8081c1c2f..18f7346cf 100644
--- a/backend/src/config/index.js
+++ b/backend/src/config/index.js
@@ -176,7 +176,8 @@ nconf.defaults({
   frontendConfig: {
     bannerEnvironment: process.env.BANNER_ENVIRONMENT,
     bannerColor: process.env.BANNER_COLOR,
-    webSocketURL: process.env.WEB_SOCKET_URL
+    webSocketURL: process.env.WEB_SOCKET_URL,
+    disableSdcFunctionality: process.env.DISABLE_SDC_FUNCTIONALITY === 'true'
   },
   sdc: {
     rootURL: process.env.SDC_API_URL,
diff --git a/backend/src/routes/config.js b/backend/src/routes/config.js
index 988c599eb..f8f121fc6 100644
--- a/backend/src/routes/config.js
+++ b/backend/src/routes/config.js
@@ -12,7 +12,8 @@ async function getConfig(req, res) {
   const frontConfig = {
     BANNER_ENVIRONMENT: frontendConfig.bannerEnvironment,
     BANNER_COLOR: frontendConfig.bannerColor,
-    WEB_SOCKET_URL: frontendConfig.webSocketURL
+    WEB_SOCKET_URL: frontendConfig.webSocketURL,
+    DISABLE_SDC_FUNCTIONALITY: frontendConfig.disableSdcFunctionality
   };
   return res.status(HttpStatus.OK).json(frontConfig);
 }
diff --git a/backend/src/server.js b/backend/src/server.js
index 7fe11b6b8..e20a1e378 100644
--- a/backend/src/server.js
+++ b/backend/src/server.js
@@ -107,11 +107,13 @@ cacheService.loadDataToCache( constants.CACHE_KEYS.AUTHORITY_CONTACT_TYPES, 'ser
 }).catch((e) => {
   log.error('Error loading AUTHORITY_CONTACT_TYPES data during boot .', e);
 });
-cacheService.loadDataToCache( constants.CACHE_KEYS.SDC_FUNDING_GROUPS, 'sdc:fundingGroupsURL').then(() => {
-  log.info('Loaded FUNDING_GROUPS data to memory');
-}).catch((e) => {
-  log.error('Error loading FUNDING_GROUPS data during boot .', e);
-});
+if(!config.get('frontendConfig').disableSdcFunctionality) {
+  cacheService.loadDataToCache( constants.CACHE_KEYS.SDC_FUNDING_GROUPS, 'sdc:fundingGroupsURL').then(() => {
+    log.info('Loaded FUNDING_GROUPS data to memory');
+  }).catch((e) => {
+    log.error('Error loading FUNDING_GROUPS data during boot .', e);
+  });
+}
 
 cacheService.loadAllAuthoritiesToMap().then(() => {
   log.info('Loaded authorities data to memory');
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7d92530ac..ab20ac948 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,6 +12,7 @@
         "@fortawesome/fontawesome-free": "6.4.0",
         "@js-joda/core": "^5.5.3",
         "@mdi/font": "^7.2.96",
+        "@vuepic/vue-datepicker": "^7.0.0",
         "axios": "^1.4.0",
         "chart.js": "^4.3.0",
         "chartjs-plugin-datalabels": "^2.2.0",
@@ -43,7 +44,6 @@
         "vue-meta": "^3.0.0-alpha.10",
         "vue-quick-chat": "^1.2.8",
         "vue-router": "^4.2.2",
-        "vue3-treeview": "^0.4.1",
         "vuetify": "npm:@vuetify/nightly@3.3.5-pr-17265.042d482"
       },
       "devDependencies": {
@@ -569,6 +569,22 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.23.1",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.1.tgz",
+      "integrity": "sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
     "node_modules/@babel/template": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
@@ -2239,6 +2255,21 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
       "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-7.0.0.tgz",
+      "integrity": "sha512-9qM5RsnjDDe82qQusEC4s+56yTEXj1Z0ZKV4k01u1v+BSr/eBySwlsEwRqObPpP/yehZ6oXdC2KGcERPyX0bnA==",
+      "dependencies": {
+        "date-fns": "^2.30.0",
+        "date-fns-tz": "^1.3.7"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -3097,6 +3128,29 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/date-fns-tz": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.8.tgz",
+      "integrity": "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==",
+      "peerDependencies": {
+        "date-fns": ">=2.0.0"
+      }
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -6652,32 +6706,12 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
-    "node_modules/lodash.eq": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/lodash.eq/-/lodash.eq-4.0.0.tgz",
-      "integrity": "sha512-vbrJpXL6kQNG6TkInxX12DZRfuYVllSxhwYqjYB78g2zF3UI15nFO/0AgmZnZRnaQ38sZtjCiVjGr2rnKt4v0g=="
-    },
-    "node_modules/lodash.isnil": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/lodash.isnil/-/lodash.isnil-4.0.0.tgz",
-      "integrity": "sha512-up2Mzq3545mwVnMhTDMdfoG1OurpA/s5t88JmQX809eH3C8491iu2sfKhTfhQtKY78oPNhiaHJUpT/dUDAAtng=="
-    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
-    "node_modules/lodash.tointeger": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/lodash.tointeger/-/lodash.tointeger-4.0.4.tgz",
-      "integrity": "sha512-UQbTdxNHMm4jGlf+LtxB5ZPJFufuND2gZCYjMxSOUmcxfq350x9KnwL3EzxDDNth8fOZ9wpwDTGWZQnFgdV3gg=="
-    },
-    "node_modules/lodash.uniqueid": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.uniqueid/-/lodash.uniqueid-4.0.1.tgz",
-      "integrity": "sha512-GQQWaIeGlL6DIIr06kj1j6sSmBxyNMwI8kaX9aKpHR/XsMTiaXDVPNPAkiboOTK9OJpTJF/dXT3xYoFQnj386Q=="
-    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -8420,18 +8454,6 @@
         "he": "^1.2.0"
       }
     },
-    "node_modules/vue3-treeview": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/vue3-treeview/-/vue3-treeview-0.4.1.tgz",
-      "integrity": "sha512-IUQN9Gzqxr66Qc6l+Js+ZBo57q5dHmiyD6FBRdt2WRnmMZ+wRtZ2UuwdLMiuGBT6gOVEzL7ucLIZGPZyKyyI4g==",
-      "dependencies": {
-        "lodash.eq": "^4.0.0",
-        "lodash.isnil": "^4.0.0",
-        "lodash.tointeger": "^4.0.4",
-        "lodash.uniqueid": "^4.0.1",
-        "vue": "^3.1.2"
-      }
-    },
     "node_modules/vuetify": {
       "name": "@vuetify/nightly",
       "version": "3.3.5-pr-17265.042d482",
@@ -9056,6 +9078,21 @@
         "@babel/helper-plugin-utils": "^7.19.0"
       }
     },
+    "@babel/runtime": {
+      "version": "7.23.1",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.1.tgz",
+      "integrity": "sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==",
+      "requires": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.14.0",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+          "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+        }
+      }
+    },
     "@babel/template": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
@@ -10270,6 +10307,15 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
       "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
     },
+    "@vuepic/vue-datepicker": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-7.0.0.tgz",
+      "integrity": "sha512-9qM5RsnjDDe82qQusEC4s+56yTEXj1Z0ZKV4k01u1v+BSr/eBySwlsEwRqObPpP/yehZ6oXdC2KGcERPyX0bnA==",
+      "requires": {
+        "date-fns": "^2.30.0",
+        "date-fns-tz": "^1.3.7"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -10929,6 +10975,20 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "requires": {
+        "@babel/runtime": "^7.21.0"
+      }
+    },
+    "date-fns-tz": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.8.tgz",
+      "integrity": "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==",
+      "requires": {}
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -13557,32 +13617,12 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
-    "lodash.eq": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/lodash.eq/-/lodash.eq-4.0.0.tgz",
-      "integrity": "sha512-vbrJpXL6kQNG6TkInxX12DZRfuYVllSxhwYqjYB78g2zF3UI15nFO/0AgmZnZRnaQ38sZtjCiVjGr2rnKt4v0g=="
-    },
-    "lodash.isnil": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/lodash.isnil/-/lodash.isnil-4.0.0.tgz",
-      "integrity": "sha512-up2Mzq3545mwVnMhTDMdfoG1OurpA/s5t88JmQX809eH3C8491iu2sfKhTfhQtKY78oPNhiaHJUpT/dUDAAtng=="
-    },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
-    "lodash.tointeger": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/lodash.tointeger/-/lodash.tointeger-4.0.4.tgz",
-      "integrity": "sha512-UQbTdxNHMm4jGlf+LtxB5ZPJFufuND2gZCYjMxSOUmcxfq350x9KnwL3EzxDDNth8fOZ9wpwDTGWZQnFgdV3gg=="
-    },
-    "lodash.uniqueid": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.uniqueid/-/lodash.uniqueid-4.0.1.tgz",
-      "integrity": "sha512-GQQWaIeGlL6DIIr06kj1j6sSmBxyNMwI8kaX9aKpHR/XsMTiaXDVPNPAkiboOTK9OJpTJF/dXT3xYoFQnj386Q=="
-    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -14756,18 +14796,6 @@
         "he": "^1.2.0"
       }
     },
-    "vue3-treeview": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/vue3-treeview/-/vue3-treeview-0.4.1.tgz",
-      "integrity": "sha512-IUQN9Gzqxr66Qc6l+Js+ZBo57q5dHmiyD6FBRdt2WRnmMZ+wRtZ2UuwdLMiuGBT6gOVEzL7ucLIZGPZyKyyI4g==",
-      "requires": {
-        "lodash.eq": "^4.0.0",
-        "lodash.isnil": "^4.0.0",
-        "lodash.tointeger": "^4.0.4",
-        "lodash.uniqueid": "^4.0.1",
-        "vue": "^3.1.2"
-      }
-    },
     "vuetify": {
       "version": "npm:@vuetify/nightly@3.3.5-pr-17265.042d482",
       "resolved": "https://registry.npmjs.org/@vuetify/nightly/-/nightly-3.3.5-pr-17265.042d482.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 73ee26b31..3acf44819 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,6 +13,7 @@
     "@fortawesome/fontawesome-free": "6.4.0",
     "@js-joda/core": "^5.5.3",
     "@mdi/font": "^7.2.96",
+    "@vuepic/vue-datepicker": "^7.0.0",
     "axios": "^1.4.0",
     "chart.js": "^4.3.0",
     "chartjs-plugin-datalabels": "^2.2.0",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index f6d1065ec..1b5e817b2 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -193,4 +193,7 @@ export default {
     background-color: rgba(0,0,0,.12)!important;
   }
 
+  .viewer-open {
+    padding-right: 0 !important;
+  }
 </style>
diff --git a/frontend/src/components/institute/AuthoritiesList.vue b/frontend/src/components/institute/AuthoritiesList.vue
index 74670b73e..7a814f93b 100644
--- a/frontend/src/components/institute/AuthoritiesList.vue
+++ b/frontend/src/components/institute/AuthoritiesList.vue
@@ -148,7 +148,7 @@
             v-model:items="authorities"
             v-model:items-length="totalAuthorities"
             :loading="loadingTable"
-            class="elevation-1"
+            class="elevation-1 rounded"
             hide-default-header
             mobile-breakpoint="0"
           >
@@ -210,31 +210,8 @@
                     formatPhoneNumber(item.raw.phoneNumber)
                   }}</span>
                 </v-col>
-                <v-col class="d-flex justify-end">
-                  <v-tooltip bottom>
-                    <template #activator="{ on, props }">
-                      <v-btn
-                        id="authorityContacts"
-                        color="#003366"
-                        outlined
-                        v-bind="props"
-                        class="mt-0 pt-0 filterButton ml-2"
-                        style="text-transform: initial"
-                        @click.stop.prevent="openAuthorityContacts(item.raw.independentAuthorityId)"
-                      >
-                        <v-icon
-                          color="white"
-                          style="margin-top: 0.07em"
-                          dark
-                        >
-                          mdi-account-multiple-outline
-                        </v-icon>
-                      </v-btn>
-                    </template>
-                    <span>View Contacts</span>
-                  </v-tooltip>
-                </v-col>
               </v-row>
+              <v-divider />
             </template>
 
             <template #no-data>
@@ -533,17 +510,6 @@ export default {
     display: none;
 }
 
-.hoverTable {
-    border-bottom-style: groove;
-    border-left-style: groove;
-    border-right-style: groove;
-    border-color: rgb(255 255 255 / 45%);
-}
-
-.hoverTable:nth-child(1) {
-    border-top-style: groove;
-}
-
 .hoverTable:hover {
     background-color: #e8e8e8;
     cursor: pointer;
diff --git a/frontend/src/components/institute/AuthorityDetails.vue b/frontend/src/components/institute/AuthorityDetails.vue
index 87a2a5ede..fb6ea9f63 100644
--- a/frontend/src/components/institute/AuthorityDetails.vue
+++ b/frontend/src/components/institute/AuthorityDetails.vue
@@ -71,57 +71,9 @@
                 style="font-size: x-large"
               />
             </v-col>
-            <v-col
-              v-if="!editing"
-              cols="4"
-              class="d-flex justify-end"
-            >
-              <PrimaryButton
-                id="viewAuthorityContactsButton"
-                class="mr-2"
-                secondary
-                icon-left
-                icon="mdi-account-multiple-outline"
-                :to="`/authorityContacts/${authorityID}`"
-                text="View Authority Contacts"
-              />
-              <PrimaryButton
-                v-if="canEditAuthorities()"
-                id="editButton"
-                icon-left
-                width="6em"
-                icon="mdi-pencil"
-                text="Edit"
-                @click-action="toggleEdit"
-              />
-            </v-col>
-            <v-col
-              v-else
-              cols="4"
-              class="d-flex justify-end"
-            >
-              <PrimaryButton
-                id="cancelButton"
-                class="mr-2"
-                secondary
-                icon-left
-                width="6em"
-                text="Cancel"
-                @click-action="cancelEdit"
-              />
-              <PrimaryButton
-                id="saveButton"
-                icon-left
-                width="6em"
-                text="Save"
-                :disabled="!authorityFormValid"
-                @click-action="saveAuthority"
-              />
-            </v-col>
           </v-row>
           <v-row>
             <v-col
-              v-if="!editing"
               cols="2"
             >
               <v-icon
@@ -136,671 +88,61 @@
                 authority?.status
               }}</span>
             </v-col>
-            <v-col
-              v-else
-              cols="2"
-              class="mt-3"
-            >
-              <v-btn
-                id="editAuthorityStatusButton"
-                variant="outlined"
-                :secondary="true"
-                @click="openAuthorityStatusEdit"
-              >
-                <v-icon
-                  class="ml-n1 pr-3"
-                  :color="getStatusColorAuthorityOrSchool(authorityCopy.status)"
-                  dark
-                >
-                  mdi-circle-medium
-                </v-icon>
-                <span>{{
-                  authorityCopy.status
-                }}</span>
-              </v-btn>
-            </v-col>
-            <v-col cols="3">
-              <div v-if="!editing">
-                <v-icon class="mb-1 mr-1">
-                  mdi-phone-outline
-                </v-icon>
-                <span
-                  v-if="authority?.phoneNumber"
-                  class="ml-n1"
-                >{{
-                  formatPhoneNumber(authority?.phoneNumber)
-                }}</span>
-                <a
-                  v-if="showEditLinks(authority?.phoneNumber)"
-                  class="editField"
-                  @click="toggleEdit"
-                >+Phone</a>
-              </div>
-              <v-text-field
-                v-else
-                id="phoneNumberField"
-                v-model="authorityCopy.phoneNumber"
-                prepend-inner-icon="mdi-phone-outline"
-                variant="underlined"
-                class="shrink py-0"
-                required
-                :maxlength="10"
-                :rules="[rules.required(), rules.phoneNumber()]"
-                @keypress="isNumber($event)"
-              />
-            </v-col>
-            <v-col cols="3">
-              <div v-if="!editing">
-                <v-icon class="mb-1 mr-1">
-                  mdi-fax
-                </v-icon>
-                <span
-                  v-if="authority?.faxNumber"
-                  class="ml-n1"
-                >{{
-                  formatPhoneNumber(authority?.faxNumber)
-                }}</span>
-                <a
-                  v-if="showEditLinks(authority?.faxNumber)"
-                  class="editField mt-n1"
-                  @click="toggleEdit"
-                >+Fax</a>
-              </div>
-              <v-text-field
-                v-else
-                id="faxNumberField"
-                v-model="authorityCopy.faxNumber"
-                prepend-inner-icon="mdi-fax"
-                variant="underlined"
-                class="shrink py-0"
-                :rules="[rules.phoneNumber('Fax number must be valid')]"
-                :maxlength="10"
-                @keypress="isNumber($event)"
-              />
-            </v-col>
-            <v-col cols="4">
-              <div v-if="!editing">
-                <v-icon class="mr-1">
-                  mdi-at
-                </v-icon>
-                <span
-                  v-if="authority?.email"
-                  style="word-break: break-all;"
-                  class="ml-n1"
-                >{{
-                  authority?.email
-                }}</span>
-              </div>
-              <v-text-field
-                v-else
-                id="emailField"
-                v-model="authorityCopy.email"
-                prepend-inner-icon="mdi-at"
-                variant="underlined"
-                class="py-0"
-                required
-                :rules="[rules.email(), rules.required()]"
-                :maxlength="255"
-              />
-            </v-col>
           </v-row>
+          
           <v-row>
             <v-col>
               <v-divider class="divider" />
             </v-col>
           </v-row>
-          <v-row>
+
+          <v-row no-gutters>
             <v-col>
-              <h2 class="subjectHeading pt-4">
-                Authority Details
-              </h2>
-            </v-col>
-          </v-row>
-          <v-row class="pl-3">
-            <v-col
-              cols="4"
-              lg="3"
-              class="pb-0 pt-0"
-            >
-              <v-row no-gutters>
-                <v-col
-                  cols="10"
-                  class="pt-2 pr-0"
-                >
-                  <span style="color: grey">Open Date</span>
-                </v-col>
-              </v-row>
-              <v-row no-gutters>
-                <v-col
-                  cols="10"
-                  class="pb-1 pr-0"
-                >
-                  <span
-                    v-if="!editing"
-                    class="ministryLine"
-                    style="color: black"
-                  >{{
-                    formatDate(authority?.openedDate) || '-'
-                  }}</span>
-                  <span
-                    v-else
-                    class="ministryLine"
-                    style="color: black"
-                  >{{
-                    formatDate(authorityCopy.openedDate) || '-'
-                  }}</span>
-                </v-col>
-              </v-row>
-            </v-col>
-            <v-col
-              cols="4"
-              lg="3"
-              class="pb-0 pt-0"
-            >
-              <v-row no-gutters>
-                <v-col
-                  cols="10"
-                  class=" pt-2 pr-0"
-                >
-                  <span style="color: grey">Close Date</span>
-                </v-col>
-              </v-row>
-              <v-row no-gutters>
-                <v-col
-                  cols="10"
-                  class="pb-1 pr-0"
+              <v-tabs v-model="tab">
+                <v-tab value="details">
+                  Details
+                </v-tab>
+                <v-tab value="contacts">
+                  Contacts
+                </v-tab>
+                <v-tab
+                  value="notes"
                 >
-                  <span
-                    v-if="!editing"
-                    class="ministryLine"
-                    style="color: black"
-                  >{{
-                    formatDate(authority?.closedDate) || '-'
-                  }}</span>
-                  <span
-                    v-else
-                    class="ministryLine"
-                    style="color: black"
-                  >{{
-                    formatDate(authorityCopy.closedDate) || '-'
-                  }}</span>
-                </v-col>
-              </v-row>
-            </v-col>
-            <v-col
-              cols="4"
-              lg="3"
-              class="pb-0 pt-0"
-            >
-              <v-row
-                v-if="!editing"
-                no-gutters
-              >
-                <v-col
-                  cols="10"
-                  class="pt-2 pr-0"
-                >
-                  <span style="color: grey">Authority Type</span>
-                </v-col>
-              </v-row>
-              <v-row no-gutters>
-                <v-col
-                  cols="10"
-                  class="pb-1 pr-0"
-                >
-                  <span
-                    v-if="!editing"
-                    class="ministryLine"
-                    style="color: black"
-                  >{{
-                    authority?.type
-                  }}</span>
-                  <v-select
-                    v-else
-                    id="authorityTypeSelect"
-                    v-model="authorityCopy.authorityTypeCode"
-                    label="Authority Type"
-                    :items="authorityTypes"
-                    item-title="label"
-                    item-value="authorityTypeCode"
-                    variant="underlined"
-                    dense
-                    class="ministryLine mt-2"
-                    style="color: black"
-                  />
-                </v-col>
-              </v-row>
-            </v-col>
-          </v-row>
-          <v-row class="mt-6 mb-2 d-flex justify-start">
-            <v-col
-              cols="12"
-              class="d-flex justify-start"
-            >
-              <h2>Addresses</h2>
+                  Ministry Notes
+                </v-tab>
+              </v-tabs>
             </v-col>
           </v-row>
-          <v-row
-            v-if="!hasMailingAddress() && !editing"
-            no-gutters
-            class="d-flex justify-start"
-          >
+          <v-row no-gutters>
             <v-col>
-              <a
-                class="editField"
-                @click="toggleEdit"
-              >+Address</a>
-            </v-col>
-          </v-row>
-          <v-row
-            v-else
-            no-gutters
-            class="d-flex justify-start"
-          >
-            <v-col cols="3">
-              <v-row>
-                <v-col>
-                  <v-icon
-                    class="pb-1 mr-1"
-                    right
-                  >
-                    mdi-email-outline
-                  </v-icon>
-                  <span>Mailing Address</span>
-                </v-col>
-              </v-row>
-              <v-row
-                v-if="!editing"
-                no-gutters
-              >
-                <v-col v-if="hasMailingAddress()">
-                  <v-row
-                    class="ml-9"
-                    no-gutters
-                  >
-                    <v-col>
-                      <span style="word-break: break-all;">{{
-                        getMailingAddressItem('addressLine1')
-                      }}</span>
-                    </v-col>
-                  </v-row>
-                  <v-row no-gutters>
-                    <v-col class="ml-9">
-                      <span style="word-break: break-all;">{{
-                        getMailingAddressItem('addressLine2')
-                      }}</span>
-                    </v-col>
-                  </v-row>
-                  <v-row no-gutters>
-                    <v-col class="ml-9">
-                      <span style="word-break: break-all;">{{
-                        getMailingAddressItem('city') + ', ' + getMailingAddressItem('provinceCode') + ', ' + getMailingAddressItem('countryCode')
-                      }}</span>
-                    </v-col>
-                  </v-row>
-                  <v-row no-gutters>
-                    <v-col class="ml-9">
-                      <span style="word-break: break-all;">{{
-                        getMailingAddressItem('postal')
-                      }}</span>
-                    </v-col>
-                  </v-row>
-                </v-col>
-              </v-row>
-              <v-row
-                v-else
-                no-gutters
-              >
-                <v-col>
-                  <v-row
-                    class="ml-9"
-                    no-gutters
-                  >
-                    <v-col cols="8">
-                      <v-text-field
-                        id="mailAddressLine1"
-                        v-model="getMailingAddressCopy()[0].addressLine1"
-                        required
-                        label="Line 1"
-                        variant="underlined"
-                        :rules="[rules.required(), rules.noSpecialCharactersAddress()]"
-                        :maxlength="255"
-                        class="pb-5"
-                        hide-details="auto"
-                      />
-                    </v-col>
-                  </v-row>
-                  <v-row
-                    class="ml-9"
-                    no-gutters
-                  >
-                    <v-col cols="8">
-                      <v-text-field
-                        id="mailAddressLine2"
-                        v-model="getMailingAddressCopy()[0].addressLine2"
-                        variant="underlined"
-                        label="Line 2"
-                        :rules="[rules.noSpecialCharactersAddress()]"
-                        :maxlength="255"
-                        class="pb-5"
-                        hide-details="auto"
-                      />
-                    </v-col>
-                  </v-row>
-                  <v-row
-                    class="ml-9"
-                    no-gutters
-                  >
-                    <v-col cols="8">
-                      <v-text-field
-                        id="mailAddressCity"
-                        v-model="getMailingAddressCopy()[0].city"
-                        required
-                        label="City"
-                        variant="underlined"
-                        :rules="[rules.required(), rules.noSpecialCharactersAddress()]"
-                        :maxlength="255"
-                        class="pb-5"
-                        hide-details="auto"
-                      />
-                    </v-col>
-                  </v-row>
-                  <v-row
-                    class="ml-9"
-                    no-gutters
-                  >
-                    <v-col
-                      cols="8"
-                      class="d-flex"
-                    >
-                      <v-select
-                        id="mailAddressProvince"
-                        v-model="getMailingAddressCopy()[0].provinceCode"
-                        :items="provinceCodeValues"
-                        item-title="label"
-                        item-value="provinceCode"
-                        dense
-                        label="Province"
-                        variant="underlined"
-                        :rules="[rules.required()]"
-                        required
-                        style="color: black"
-                      />
-                    </v-col>
-                  </v-row>
-                  <v-row
-                    class="ml-9"
-                    no-gutters
-                  >
-                    <v-col
-                      cols="8"
-                      class="d-flex"
-                    >
-                      <v-select
-                        id="mailAddressCountry"
-                        v-model="getMailingAddressCopy()[0].countryCode"
-                        :items="countryCodeValues"
-                        item-title="label"
-                        item-value="countryCode"
-                        :rules="[rules.required()]"
-                        label="Country"
-                        dense
-                        variant="underlined"
-                        style="color: black"
-                      />
-                    </v-col>
-                  </v-row>
-                  <v-row
-                    class="ml-9"
-                    no-gutters
-                  >
-                    <v-col cols="8">
-                      <v-text-field
-                        id="mailAddressPostal"
-                        v-model="getMailingAddressCopy()[0].postal"
-                        :maxlength="6"
-                        label="Postal Code"
-                        required
-                        :rules="[rules.required(), rules.postalCode()]"
-                        variant="underlined"
-                      />
-                    </v-col>
-                  </v-row>
-                </v-col>
-              </v-row>
-            </v-col>
-            <v-col
-              v-if="showPhysicalAddress"
-              cols="3"
-            >
-              <v-row>
-                <v-col>
-                  <v-icon
-                    class="pb-1 mr-1"
-                    right
-                  >
-                    mdi-home-outline
-                  </v-icon>
-                  <span>Physical Address</span>
-                </v-col>
-              </v-row>
-              <v-row
-                v-if="!hasSamePhysicalAddress && !editing"
-                no-gutters
-              >
-                <v-col>
-                  <v-row no-gutters>
-                    <v-col class="ml-9">
-                      <span style="word-break: break-all;">{{
-                        getPhysicalAddressItem('addressLine1')
-                      }}</span>
-                    </v-col>
-                  </v-row>
-                  <v-row no-gutters>
-                    <v-col class="ml-9">
-                      <span style="word-break: break-all;">{{
-                        getPhysicalAddressItem('addressLine2')
-                      }}</span>
-                    </v-col>
-                  </v-row>
-                  <v-row no-gutters>
-                    <v-col class="ml-9">
-                      <span style="word-break: break-all;">{{
-                        getPhysicalAddressItem('city') + ', ' + getPhysicalAddressItem('provinceCode') + ', ' + getPhysicalAddressItem('countryCode')
-                      }}</span>
-                    </v-col>
-                  </v-row>
-                  <v-row no-gutters>
-                    <v-col class="ml-9">
-                      <span style="word-break: break-all;">{{
-                        getPhysicalAddressItem('postal')
-                      }}</span>
-                    </v-col>
-                  </v-row>
-                </v-col>
-              </v-row>
-              <v-row
-                v-else
-                no-gutters
-              >
-                <v-col>
-                  <v-row
-                    class="ml-9"
-                    no-gutters
-                  >
-                    <v-col
-                      v-if="sameAsMailingCheckbox && !editing"
-                      class="fontItalic"
-                    >
-                      <span>Same as Mailing Address</span>
-                    </v-col>
-                    <v-col v-else>
-                      <v-row no-gutters>
-                        <v-col>
-                          <v-row no-gutters>
-                            <v-col>
-                              <v-row
-                                v-if="!sameAsMailingCheckbox"
-                                no-gutters
-                              >
-                                <v-col>
-                                  <v-row no-gutters>
-                                    <v-col cols="8">
-                                      <v-text-field
-                                        id="physicalAddressLine1"
-                                        v-model="getPhysicalAddressCopy()[0].addressLine1"
-                                        required
-                                        label="Line 1"
-                                        variant="underlined"
-                                        :rules="[rules.required(), rules.noSpecialCharactersAddress()]"
-                                        :maxlength="255"
-                                        class="pb-5"
-                                        hide-details="auto"
-                                      />
-                                    </v-col>
-                                  </v-row>
-                                  <v-row no-gutters>
-                                    <v-col cols="8">
-                                      <v-text-field
-                                        id="physicalAddressLine2"
-                                        v-model="getPhysicalAddressCopy()[0].addressLine2"
-                                        :maxlength="255"
-                                        label="Line 2"
-                                        variant="underlined"
-                                        :rules="[rules.noSpecialCharactersAddress()]"
-                                        class="pb-5"
-                                        hide-details="auto"
-                                      />
-                                    </v-col>
-                                  </v-row>
-                                  <v-row no-gutters>
-                                    <v-col cols="8">
-                                      <v-text-field
-                                        id="physicalAddressCity"
-                                        v-model="getPhysicalAddressCopy()[0].city"
-                                        required
-                                        label="City"
-                                        variant="underlined"
-                                        :rules="[rules.required(), rules.noSpecialCharactersAddress()]"
-                                        :maxlength="255"
-                                        class="pb-5"
-                                        hide-details="auto"
-                                      />
-                                    </v-col>
-                                  </v-row>
-                                  <v-row no-gutters>
-                                    <v-col cols="8">
-                                      <v-select
-                                        id="physicalAddressProvince"
-                                        v-model="getPhysicalAddressCopy()[0].provinceCode"
-                                        label="Province"
-                                        :items="provinceCodeValues"
-                                        item-title="label"
-                                        item-value="provinceCode"
-                                        dense
-                                        variant="underlined"
-                                        required
-                                        :rules="[rules.required()]"
-                                        style="color: black"
-                                      />
-                                    </v-col>
-                                  </v-row>
-                                  <v-row no-gutters>
-                                    <v-col cols="8">
-                                      <v-select
-                                        id="physicalAddressCountry"
-                                        v-model="getPhysicalAddressCopy()[0].countryCode"
-                                        label="Country"
-                                        :items="countryCodeValues"
-                                        item-title="label"
-                                        item-value="countryCode"
-                                        dense
-                                        variant="underlined"
-                                        :rules="[rules.required()]"
-                                        required
-                                        style="color: black"
-                                      />
-                                    </v-col>
-                                  </v-row>
-                                  <v-row no-gutters>
-                                    <v-col cols="8">
-                                      <v-text-field
-                                        id="physicalAddressPostal"
-                                        v-model="getPhysicalAddressCopy()[0].postal"
-                                        required
-                                        label="Postal Code"
-                                        :rules="[rules.required(), rules.postalCode()]"
-                                        :maxlength="6"
-                                        variant="underlined"
-                                      />
-                                    </v-col>
-                                  </v-row>
-                                </v-col>
-                              </v-row>
-                              <v-row no-gutters>
-                                <v-col>
-                                  <v-checkbox
-                                    id="sameAsMailingCheckbox"
-                                    v-model="sameAsMailingCheckbox"
-                                    dense
-                                    label="Same as Mailing Address"
-                                    class="mt-n3 pt-0"
-                                    @update:model-value="clickSameAsAddressButton"
-                                  />
-                                </v-col>
-                              </v-row>
-                            </v-col>
-                          </v-row>
-                        </v-col>
-                      </v-row>
-                    </v-col>
-                  </v-row>
-                </v-col>
-              </v-row>
-            </v-col>
-          </v-row>
-          <v-row>
-            <v-col>
-              <v-row class="mt-6">
-                <v-col class="d-flex justify-start">
-                  <h2>Ministry Notes</h2>
-                </v-col>
-                <InstituteNotes
-                  :notes="authority?.notes ? authority?.notes : []"
-                  :has-access="canEditAuthorities()"
-                  :loading="notesLoading"
-                  @add-institute-note="saveNewAuthorityNote"
-                  @edit-institute-note="saveChangesToAuthorityNote"
-                  @remove-institute-note="removeAuthorityNote"
-                />
-              </v-row>
-              <v-row />
+              <v-card-text class="pt-0">
+                <v-window v-model="tab">
+                  <v-window-item value="details">
+                    <Details 
+                      :authority-i-d="authorityID"
+                      @updateAuthority="saveAuthority"
+                    />
+                  </v-window-item>
+                  <v-window-item value="contacts">
+                    <AuthorityContacts :authority-i-d="authorityID" />
+                  </v-window-item>
+                  <v-window-item value="notes">
+                    <InstituteNotes
+                      :notes="authority?.notes ? authority?.notes : []"
+                      :has-access="canEditAuthorities()"
+                      :loading="notesLoading"
+                      @add-institute-note="saveNewAuthorityNote"
+                      @edit-institute-note="saveChangesToAuthorityNote"
+                      @remove-institute-note="removeAuthorityNote"
+                    />
+                  </v-window-item>
+                </v-window>
+              </v-card-text>
             </v-col>
           </v-row>
         </v-col>
       </v-row>
     </v-container>
-    <v-dialog
-      v-model="openAuthorityStatusEditCard"
-      inset
-      no-click-animation
-      scrollable
-      persistent
-      width="50%"
-    >
-      <AuthorityStatus
-        v-if="openAuthorityStatusEditCard"
-        :authority-open-date="authorityCopy.openedDate"
-        :authority-close-date="authorityCopy.closedDate"
-        :authority-status="authorityCopy.status"
-        :authority-has-open-schools="authorityHasOpenSchools"
-        :date-of-last-school-closure="closedDateOfLastClosingSchool"
-        :list-of-open-schools="listOfOpenSchools"
-        :list-of-closing-schools="listOfClosingSchools"
-        @updateAuthorityDates="handleUpdatesToAuthorityStatus"
-        @authorityStatus:closeEditAuthorityStatusPage="openAuthorityStatusEditCard = !openAuthorityStatusEditCard"
-      />
-    </v-dialog>
   </v-form>
 </template>
 
@@ -809,25 +151,24 @@
 import ApiService from '../../common/apiService';
 import {Routes} from '@/utils/constants';
 import alertMixin from '@/mixins/alertMixin';
-import PrimaryButton from '@/components/util/PrimaryButton.vue';
 import {formatPhoneNumber, formatDate} from '@/utils/format';
 import {getStatusColorAuthorityOrSchool, getStatusAuthorityOrSchool} from '@/utils/institute/status';
 import {mapState} from 'pinia';
 import router from '@/router';
 import {deepCloneObject} from '@/utils/common';
 import * as Rules from '@/utils/institute/formRules';
-import AuthorityStatus from '@/components/institute/AuthorityStatus.vue';
-import {isEmpty, omitBy} from 'lodash';
 import {authStore} from '@/store/modules/auth';
 import {instituteStore} from '@/store/modules/institute';
+import Details from './authority/Details.vue';
+import AuthorityContacts from './authority/AuthoritiesContacts.vue';
 import InstituteNotes from '@/components/institute/common/InstituteNotes.vue';
 
 export default {
   name: 'AuthorityDetailsPage',
   components: {
-    InstituteNotes,
-    AuthorityStatus,
-    PrimaryButton
+    Details,
+    AuthorityContacts,
+    InstituteNotes
   },
   mixins: [alertMixin],
   props: {
@@ -854,6 +195,7 @@ export default {
       countryCodeValues: [],
       listOfOpenSchools: [],
       listOfClosingSchools: [],
+      tab: null,
       excludeShowingPhysicalAddressesForAuthoritiesOfType: [
         'OFFSHORE',
       ],
@@ -888,8 +230,6 @@ export default {
       this.authorityTypes = this.authorityTypeCodes;
     });
     this.getAuthority();
-    this.determineIfAuthorityHasAnyOpenSchools();
-    this.findClosedDateOfLastClosingSchool();
   },
   methods: {
     formatPhoneNumber,
@@ -899,17 +239,8 @@ export default {
       authority.status = getStatusAuthorityOrSchool(authority);
       authority.type = this.getAuthorityType(authority);
     },
-    isNumber: function (evt) {
-      let charCode = (evt.which) ? evt.which : evt.keyCode;
-      if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
-        evt.preventDefault();
-      } else {
-        return true;
-      }
-    },
     getAuthority() {
       this.loading = true;
-
       ApiService.apiAxios.get(Routes.institute.AUTHORITY_DATA_URL + '/' + this.authorityID, {}).then(response => {
         this.authority = response.data;
         this.populateExtraAuthorityFields(this.authority);
@@ -920,104 +251,10 @@ export default {
         this.loading = false;
       });
     },
-    determineIfAuthorityHasAnyOpenSchools() {
-      this.loading = true;
-      ApiService.apiAxios.get(Routes.institute.SCHOOL_PAGINATED_DATA_URL, {
-        params: {
-          pageNumber: 0,
-          pageSize: 100,
-          searchParams: omitBy({
-            status: 'isOpenOrOpening',
-            authorityID: this.authorityID,
-          }, isEmpty),
-        }
-      }).then(response => {
-        this.listOfOpenSchools = response.data.content;
-        this.authorityHasOpenSchools = response.data.content.length > 0;
-      }).catch(error => {
-        console.error(error);
-        this.setFailureAlert(error?.response?.data?.message ? error?.response?.data?.message : 'An error occurred while trying to determine if the authority has any open schools. Please try again later.');
-      }).finally(() => {
-        this.loading = false;
-      });
-    },
-    cancelEdit() {
-      this.editing = !this.editing;
-      this.setHasSamePhysicalFlag();
-    },
-    findClosedDateOfLastClosingSchool() {
-      this.loading = true;
-      ApiService.apiAxios.get(Routes.institute.SCHOOL_PAGINATED_DATA_URL, {
-        params: {
-          pageNumber: 0,
-          pageSize: 100,
-          sort: {
-            closedDate: 'DESC'
-          },
-          searchParams: omitBy({
-            authorityID: this.authorityID,
-            status: 'Closing'
-          }, isEmpty),
-        }
-      }).then(response => {
-        this.listOfClosingSchools = response.data.content;
-        this.closedDateOfLastClosingSchool = response.data.content[0] ? response.data.content[0].closedDate.substring(0, 10) : null;
-      }).catch(error => {
-        console.error(error);
-        this.setFailureAlert(error?.response?.data?.message ? error?.response?.data?.message : 'An error occurred while trying to find the closed date of the last closing school. Please try again later.');
-      }).finally(() => {
-        this.loading = false;
-      });
-    },
     backButtonClick() {
       router.push({name: 'instituteAuthoritiesList'});
     },
     deepCloneObject,
-    addAddressesIfRequired(authority) {
-      let addresses = authority?.addresses;
-      if (!this.hasMailingAddress()) {
-        addresses.push({
-          'createUser': null,
-          'updateUser': null,
-          'createDate': null,
-          'updateDate': null,
-          'addressId': null,
-          'schoolId': null,
-          'districtId': null,
-          'independentAuthorityId': null,
-          'phoneNumber': null,
-          'email': null,
-          'addressLine1': null,
-          'addressLine2': null,
-          'city': null,
-          'postal': null,
-          'addressTypeCode': 'MAILING',
-          'provinceCode': null,
-          'countryCode': null
-        });
-      }
-      if (!this.hasPhysicalAddress()) {
-        addresses.push({
-          'createUser': null,
-          'updateUser': null,
-          'createDate': null,
-          'updateDate': null,
-          'addressId': null,
-          'schoolId': null,
-          'districtId': null,
-          'independentAuthorityId': null,
-          'phoneNumber': null,
-          'email': null,
-          'addressLine1': null,
-          'addressLine2': null,
-          'city': null,
-          'postal': null,
-          'addressTypeCode': 'PHYSICAL',
-          'provinceCode': null,
-          'countryCode': null
-        });
-      }
-    },
     canEditAuthorities() {
       if(this.authority?.authorityTypeCode && this.authority?.authorityTypeCode === 'INDEPENDNT') {
         return this.INDEPENDENT_AUTHORITY_ADMIN_ROLE || this.INDEPENDENT_SCHOOLS_ADMIN_ROLE;
@@ -1036,15 +273,10 @@ export default {
     showEditLinks(fieldValue) {
       return this.canEditAuthorities() && !fieldValue;
     },
-    saveAuthority() {
+    saveAuthority(authorityCopy) {
       this.loading = true;
-
-      if (this.sameAsMailingCheckbox) {
-        this.authorityCopy.addresses = this.authorityCopy.addresses.filter(address => address.addressTypeCode === 'MAILING');
-      }
-
-      const payload = this.authorityCopy;
-      ApiService.apiAxios.post(`${Routes.institute.AUTHORITY_DATA_URL}` + '/' + this.authorityCopy.independentAuthorityId, payload)
+      const payload = authorityCopy;
+      ApiService.apiAxios.post(`${Routes.institute.AUTHORITY_DATA_URL}` + '/' + authorityCopy.independentAuthorityId, payload)
         .then(() => {
           this.setSuccessAlert('Success! The authority details have been updated.');
         })
@@ -1053,72 +285,13 @@ export default {
           this.setFailureAlert(error?.response?.data?.message ? error?.response?.data?.message : 'An error occurred while saving the authority information. Please try again later.');
         })
         .finally(() => {
-          this.toggleEdit();
           this.getAuthority();
         });
     },
-    async toggleEdit() {
-      this.authorityCopy = this.deepCloneObject(this.authority);
-      this.addAddressesIfRequired(this.authorityCopy);
-      this.editing = !this.editing;
-      await this.$nextTick();
-      await this.$refs.authorityForm.validate();
-    },
+   
     getAuthorityType(authority) {
       return this.authorityTypes.find((autorityType) => autorityType.authorityTypeCode === authority?.authorityTypeCode).label;
     },
-    hasMailingAddress() {
-      return this.authority?.addresses.filter(address => address.addressTypeCode === 'MAILING').length > 0;
-    },
-    hasPhysicalAddress() {
-      return this.authority?.addresses.filter(address => address.addressTypeCode === 'PHYSICAL').length > 0;
-    },
-    getMailingAddress() {
-      return this.authority?.addresses.filter(address => address.addressTypeCode === 'MAILING');
-    },
-    getPhysicalAddress() {
-      return this.authority?.addresses.filter(address => address.addressTypeCode === 'PHYSICAL');
-    },
-    getMailingAddressCopy() {
-      return this.authorityCopy.addresses.filter(address => address.addressTypeCode === 'MAILING');
-    },
-    getPhysicalAddressCopy() {
-      return this.authorityCopy.addresses.filter(address => address.addressTypeCode === 'PHYSICAL');
-    },
-    getMailingAddressItem(item) {
-      let mailingAddress = this.authority?.addresses.filter(address => address.addressTypeCode === 'MAILING');
-      for (const x in mailingAddress[0]) {
-        if (x === item) {
-          return mailingAddress[0][item];
-        }
-      }
-    },
-    getPhysicalAddressItem(item) {
-      let physicalAddress = this.authority?.addresses.filter(address => address.addressTypeCode === 'PHYSICAL');
-      for (const x in physicalAddress[0]) {
-        if (x === item) {
-          return physicalAddress[0][item];
-        }
-      }
-    },
-    openAuthorityStatusEdit() {
-      this.openAuthorityStatusEditCard = true;
-    },
-    async handleUpdatesToAuthorityStatus(updatedDatesForAuthority) {
-      await this.$nextTick();
-      if (updatedDatesForAuthority.openedDate) {
-        this.authorityCopy.openedDate = updatedDatesForAuthority.openedDate?.replaceAll('/', '-').concat('T00:00:00');
-      } else {
-        this.authorityCopy.openedDate = null;
-      }
-      if (updatedDatesForAuthority.closedDate) {
-        this.authorityCopy.closedDate = updatedDatesForAuthority.closedDate?.replaceAll('/', '-').concat('T00:00:00');
-      } else {
-        this.authorityCopy.closedDate = null;
-      }
-      this.authorityCopy.status = getStatusAuthorityOrSchool(this.authorityCopy);
-      this.$refs.authorityForm.validate();
-    },
     saveNewAuthorityNote(authorityNote) {
       this.noteRequestCount += 1;
       const payload = {
@@ -1190,8 +363,8 @@ export default {
 }
 
 .containerSetup {
-    padding-right: 24em !important;
-    padding-left: 24em !important;
+    padding-right: 20em !important;
+    padding-left: 20em !important;
 }
 
 .editField {
@@ -1203,5 +376,24 @@ export default {
     text-decoration: underline;
 }
 
+.v-tab {
+    text-transform: none !important;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.tab-divider {
+    border-right: 1px solid lightgray;
+    border-radius: 0;
+}
+
+.tab-divider:last-child {
+    border-right: 0
+}
+
+:deep(.v-btn--variant-text) {
+    color: #003366
+}
+
 
 </style>
diff --git a/frontend/src/components/institute/AuthorityStatus.vue b/frontend/src/components/institute/AuthorityStatus.vue
index ce491245a..a89d6090a 100644
--- a/frontend/src/components/institute/AuthorityStatus.vue
+++ b/frontend/src/components/institute/AuthorityStatus.vue
@@ -55,15 +55,13 @@
                 </v-row>
                 <v-row>
                   <v-col>
-                    <v-text-field
+                    <DatePicker
                       id="newOpenDateTextField"
                       v-model="newOpenDate"
-                      :rules="[rules.required(), rules.dateIsPriorOrEqualTo(newOpenDate, currentDate, `The open date must occur on or prior to ${currentDateFormatted}.`)]"
-                      class="pt-0 mt-0"
                       label="Open Date"
-                      :max="currentDate"
-                      type="date"
-                      clearable
+                      :rules="[rules.required(), rules.dateIsPriorOrEqualTo(newOpenDate, currentDate, true,`The open date must occur on or prior to ${currentDateFormatted}.`)]"
+                      :max-date="cutOffDate"
+                      model-type="yyyy-MM-dd'T'00:00:00"
                       @update:model-value="validateForm"
                     />
                   </v-col>
@@ -104,8 +102,9 @@
                   v-if="showAlertForFutureClosureDate"
                   color="#003366"
                   density="compact"
-                  text
                   type="info"
+                  class="px-2"
+                  variant="tonal"
                 >
                   <p>Some schools under this authority have closing dates in the future.</p>
                   <p>
@@ -132,23 +131,20 @@
                   </ul>
                   <p>Refresh the page to see an updated list of schools.</p>
                 </v-alert>
-                <v-row class="d-flex justify-start">
+                <v-row class="d-flex justify-start mt-3">
                   <h3>Select the closure date</h3>
                 </v-row>
                 <v-row>
                   <v-col>
-                    <v-text-field
+                    <DatePicker
                       id="newCloseDateTextField"
                       v-model="newCloseDate"
+                      label="Close Date"
                       :rules="[rules.required(),
                                rules.dateIsAfterOrEqualTo(newCloseDate, dateOfLastSchoolClosure, true, `The closure date must occur on or after ${dateOfLastSchoolClosureFormatted}.`),
                                rules.dateIsAfterOrEqualTo(newCloseDate, authorityOpenDate, true, `The closure date must occur on or after ${authorityOpenDateFormatted}.`)]"
-                      class="pt-0 mt-0"
-                      label="Close Date"
-                      :min="dateOfLastSchoolClosure"
-                      :show-current="dateOfLastSchoolClosure"
-                      type="date"
-                      clearable
+                      :min-date="dateOfLastSchoolClosure"
+                      model-type="yyyy-MM-dd'T'00:00:00"
                       @update:model-value="validateForm"
                     />
                   </v-col>
@@ -164,8 +160,9 @@
                   v-if="showAlertForFutureClosureDate"
                   color="#003366"
                   density="compact"
-                  text
                   type="info"
+                  class="px-2"
+                  variant="tonal"
                 >
                   <p>Some schools under this authority have closing dates in the future.</p>
                   <p>
@@ -192,23 +189,20 @@
                   </ul>
                   <p>Refresh the page to see an updated list of schools.</p>
                 </v-alert>
-                <v-row class="d-flex justify-start">
+                <v-row class="d-flex justify-start mt-3">
                   <h3>Select the new closing date</h3>
                 </v-row>
                 <v-row>
                   <v-col>
-                    <v-text-field
+                    <DatePicker
                       id="updatedCloseDateTextField"
                       v-model="updatedCloseDate"
-                      :min="dateOfLastSchoolClosure"
+                      label="Close Date"
                       :rules="[rules.required(),
                                rules.dateIsAfterOrEqualTo(updatedCloseDate, dateOfLastSchoolClosure, true, `The closure date must occur on or after ${dateOfLastSchoolClosureFormatted}.`),
                                rules.dateIsAfterOrEqualTo(updatedCloseDate, authorityOpenDate, true, `The closure date must occur on or after ${authorityOpenDateFormatted}.`)]"
-                      class="pt-0 mt-0"
-                      label="Close Date"
-                      variant="underlined"
-                      type="date"
-                      clearable
+                      :min-date="dateOfLastSchoolClosure"
+                      model-type="yyyy-MM-dd'T'00:00:00"
                       @update:model-value="validateForm"
                     />
                   </v-col>
@@ -229,9 +223,9 @@
           id="newContactPostBtn"
           text="Okay"
           width="7rem"
-          @click-action="updateAuthorityDates"
           :disabled="!isFormValid"
           :loading="processing"
+          @click-action="updateAuthorityDates"
         />
       </v-card-actions>
     </v-form>
@@ -243,12 +237,13 @@ import PrimaryButton from '../util/PrimaryButton.vue';
 import alertMixin from '@/mixins/alertMixin';
 import * as Rules from '@/utils/institute/formRules';
 import {formatDate, formatDisplayDate} from '@/utils/format';
-import {parseDate} from '@/utils/dateHelpers';
-import {LocalDate} from '@js-joda/core';
+import {DateTimeFormatter, LocalDate, LocalDateTime} from '@js-joda/core';
+import DatePicker from '@/components/util/DatePicker.vue';
 
 export default {
   name: 'AuthorityStatus',
   components: {
+    DatePicker,
     PrimaryButton,
   },
   mixins: [alertMixin],
@@ -283,16 +278,17 @@ export default {
     }
   },
   data() {
-    let currentLocalDate = LocalDate.now().toString();
+    let currentLocalDate = LocalDate.now();
     return {
-      currentDate: currentLocalDate,
+      currentDate: currentLocalDate.toString(),
+      cutOffDate: currentLocalDate.plusDays(1).toString(),
       isFormValid: false,
       processing: false,
       rules: Rules,
       action: this.defaultUpdateActionForAuthority(),
-      newOpenDate: currentLocalDate,
+      newOpenDate: currentLocalDate.atStartOfDay().format(DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss')),
       newCloseDate: null,
-      updatedCloseDate: this.parseDate(formatDate(this.authorityCloseDate))
+      updatedCloseDate: this.authorityCloseDate
     };
   },
   computed: {
@@ -318,37 +314,13 @@ export default {
       if (!this.dateOfLastSchoolClosure) {
         return '';
       }
-      return this.formatDisplayDate(this.dateOfLastSchoolClosure);
+      return this.formatDate(this.dateOfLastSchoolClosure);
     },
     showAlertForFutureClosureDate() {
       if (!this.dateOfLastSchoolClosure) {
         return false;
       }
-      return LocalDate.now().isBefore(LocalDate.parse(this.dateOfLastSchoolClosure));
-    },
-    newOpenDateFormatted: {
-      get() {
-        return this.formatDisplayDate(this.newOpenDate);
-      },
-      set(newValue) {
-        this.newOpenDate = this.parseDate(newValue);
-      }
-    },
-    newCloseDateFormatted: {
-      get() {
-        return this.formatDisplayDate(this.newCloseDate);
-      },
-      set(newValue) {
-        this.newCloseDate = this.parseDate(newValue);
-      }
-    },
-    updatedCloseDateFormatted: {
-      get() {
-        return this.formatDisplayDate(this.updatedCloseDate);
-      },
-      set(newValue) {
-        this.updatedCloseDate = this.parseDate(newValue);
-      }
+      return LocalDateTime.now().isBefore(LocalDateTime.parse(this.dateOfLastSchoolClosure));
     },
     listOfOpenSchoolsByMincode() {
       return [...this.listOfOpenSchools].sort((schoolA, schoolB) => {
@@ -361,24 +333,6 @@ export default {
       });
     },
   },
-  watch: {
-    //watching effective date to valid form because we need to cross validate expiry and effective date fields
-    'newOpenDate': {
-      handler() {
-        this.validateForm();
-      }
-    },
-    'newCloseDate': {
-      handler() {
-        this.validateForm();
-      }
-    },
-    'updatedCloseDate': {
-      handler() {
-        this.validateForm();
-      }
-    }
-  },
   mounted() {
     this.validateForm();
   },
@@ -394,15 +348,6 @@ export default {
         return '';
       }
     },
-    saveNewOpenDate(date) {
-      this.$refs.newOpenDateFilter.save(date);
-    },
-    saveNewCloseDate(date) {
-      this.$refs.newCloseDateFilter.save(date);
-    },
-    saveUpdatedCloseDate(date) {
-      this.$refs.updatedCloseDateFilter.save(date);
-    },
     closeEditAuthorityStatus() {
       this.resetForm();
       this.$emit('authorityStatus:closeEditAuthorityStatusPage');
@@ -416,20 +361,20 @@ export default {
       switch (this.action) {
       case 'setOpenDate':
         updatedAuthorityDates = {
-          openedDate: this.newOpenDateFormatted,
+          openedDate: this.newOpenDate,
           closedDate: null,
         };
         break;
       case 'setCloseDate':
         updatedAuthorityDates = {
-          openedDate: this.parseDate(formatDate(this.authorityOpenDate)),
-          closedDate: this.newCloseDateFormatted
+          openedDate: this.authorityOpenDate,
+          closedDate: this.newCloseDate
         };
         break;
       case 'updateCloseDate':
         updatedAuthorityDates = {
-          openedDate: this.parseDate(formatDate(this.authorityOpenDate)),
-          closedDate: this.updatedCloseDateFormatted,
+          openedDate: this.authorityOpenDate,
+          closedDate: this.updatedCloseDate,
         };
         break;
       default:
@@ -451,8 +396,7 @@ export default {
       this.isFormValid = isValid.valid;
     },
     formatDate,
-    formatDisplayDate,
-    parseDate
+    formatDisplayDate
   }
 };
 </script>
diff --git a/frontend/src/components/institute/DistrictDetails.vue b/frontend/src/components/institute/DistrictDetails.vue
index 053d164b2..29add1530 100644
--- a/frontend/src/components/institute/DistrictDetails.vue
+++ b/frontend/src/components/institute/DistrictDetails.vue
@@ -1,719 +1,162 @@
 <template>
-  <v-form
-    ref="districtDetailsForm"
-    v-model="districtDetailsFormValid"
+  <v-container
+    class="containerSetup"
+    fluid
   >
-    <v-container
-      class="containerSetup"
-      fluid
+    <v-row>
+      <v-col class="mt-1 mb-4 d-flex justify-start">
+        <v-icon
+          small
+          color="#1976d2"
+        >
+          mdi-arrow-left
+        </v-icon>
+        <a
+          class="ml-1"
+          @click="backButtonClick"
+        >Return to District List</a>
+      </v-col>
+    </v-row>
+    <v-row v-if="loading">
+      <v-col class="d-flex justify-center">
+        <v-progress-circular
+          class="mt-16"
+          :size="70"
+          :width="7"
+          color="primary"
+          indeterminate
+          :active="loading"
+        />
+      </v-col>
+    </v-row>
+    <v-row
+      v-else
+      no-gutters
     >
-      <v-row>
-        <v-col class="mt-1 mb-4 d-flex justify-start">
-          <v-icon
-            small
-            color="#1976d2"
-          >
-            mdi-arrow-left
-          </v-icon>
-          <a
-            class="ml-1"
-            @click="backButtonClick"
-          >Return to District List</a>
-        </v-col>
-      </v-row>
-      <v-row v-if="loading">
-        <v-col class="d-flex justify-center">
-          <v-progress-circular
-            class="mt-16"
-            :size="70"
-            :width="7"
-            color="primary"
-            indeterminate
-            :active="loading"
-          />
-        </v-col>
-      </v-row>
-      <v-row
-        v-else
-        no-gutters
-      >
-        <v-col>
-          <v-row class="d-flex justify-start">
-            <v-col
-              v-if="!editing"
-              cols="6"
-              class="d-flex justify-start"
-            >
-              <h2 id="districtName">
-                {{
-                  district.districtNumber
-                }} - {{
-                  district.displayName
-                }}
-              </h2>
-            </v-col>
-            <v-col
-              v-else
-              class="d-flex"
-            >
-              <h2 id="districtNumber">
-                {{
-                  district.districtNumber
-                }} -
-              </h2>
-              <v-text-field
-                v-model="districtDetailsCopy.displayName"
-                class="mt-n5 ml-3"
-                style="font-size: x-large"
-                :maxlength="255"
-                :rules="[rules.required(), rules.noSpecialCharactersSchDisAuthName()]"
-                required
-                variant="underlined"
-              />
-            </v-col>
-            <v-col
-              v-if="!editing"
-              cols="6"
-              class="d-flex justify-end"
-            >
-              <PrimaryButton
-                id="viewSchoolsInDistrictButton"
-                class="mr-2"
-                secondary
-                icon-left
-                icon="mdi-library-outline"
-                text="View Schools in District"
-                @click-action="viewSchools"
-              />
-              <PrimaryButton
-                id="viewDistrictContactsButton"
-                class="mr-2"
-                secondary
-                icon-left
-                icon="mdi-account-multiple-outline"
-                :to="`/institute/districtContacts/${districtID}`"
-                text="View District Contacts"
-              />
-              <PrimaryButton
-                v-if="canEditDistrictDetails()"
-                id="districtDetailsEditButton"
-                icon-left
-                width="6em"
-                icon="mdi-pencil"
-                text="Edit"
-                @click-action="toggleEdit"
-              />
-            </v-col>
-            <v-col
-              v-else
-              cols="6"
-              class="d-flex justify-end"
-            >
-              <PrimaryButton
-                id="cancelButton"
-                class="mr-2"
-                secondary
-                icon-left
-                width="6em"
-                text="Cancel"
-                @click-action="cancelClicked"
-              />
-              <PrimaryButton
-                id="saveButton"
-                icon-left
-                width="6em"
-                text="Save"
-                :disabled="!districtDetailsFormValid"
-                @click-action="updateDistrictDetails"
-              />
-            </v-col>
-          </v-row>
-          <v-row cols="1">
-            <v-col
-              lg="2"
-              sm="4"
-              class="mt-1"
-            >
-              <v-icon
-                class="pb-1"
-                :color="getStatusColor()"
-                right
-                dark
-              >
-                mdi-circle-medium
-              </v-icon>
-              <span>{{
-                getStatusText()
-              }}</span>
-            </v-col>
-            <v-col
-              cols="2"
-              class="pt-0 pb-0"
-            >
-              <div
-                v-if="!editing"
-                class="mt-4"
-              >
-                <v-icon
-                  class="mb-1 mr-1"
-                  :class="showEditLinks(district.phoneNumber) ? 'mt-n2' : ''"
-                >
-                  mdi-phone-outline
-                </v-icon>
-                <span
-                  v-if="district.phoneNumber"
-                  class="ml-n1"
-                >{{
-                  formatPhoneNumber(district.phoneNumber)
-                }}</span>
-                <a
-                  v-if="showEditLinks(district.phoneNumber)"
-                  class="editField"
-                  @click="toggleEdit"
-                >+Phone</a>
-              </div>
-              <v-text-field
-                v-else
-                id="districtDetailsPhoneNumber"
-                v-model="districtDetailsCopy.phoneNumber"
-                prepend-inner-icon="mdi-phone-outline"
-                class="shrink py-0"
-                required
-                :maxlength="10"
-                variant="underlined"
-                :rules="[rules.required(), rules.phoneNumber()]"
-                @keypress="isNumber($event)"
-              />
-            </v-col>
-            <v-col
-              cols="2"
-              class="pt-0 pb-0"
-            >
-              <div
-                v-if="!editing"
-                class="mt-4"
-              >
-                <v-icon
-                  class="mb-1 mr-1"
-                  :class="showEditLinks(district.faxNumber) ? 'mt-n2' : ''"
-                >
-                  mdi-fax
-                </v-icon>
-                <span
-                  v-if="district.faxNumber"
-                  class="ml-n1"
-                >{{
-                  formatPhoneNumber(district.faxNumber)
-                }}</span>
-                <a
-                  v-if="showEditLinks(district.faxNumber)"
-                  class="editField"
-                  @click="toggleEdit"
-                >+Fax</a>
-              </div>
-              <v-text-field
-                v-else
-                id="districtDetailsFaxNumber"
-                v-model="districtDetailsCopy.faxNumber"
-                prepend-inner-icon="mdi-fax"
-                class="shrink py-0"
-                variant="underlined"
-                :rules="[rules.phoneNumber('Fax number must be valid')]"
-                :maxlength="10"
-                @keypress="isNumber($event)"
-              />
-            </v-col>
-            <v-col
-              cols="3"
-              class="pt-0 pb-0"
-            >
-              <div
-                v-if="!editing"
-                class="mt-4"
-              >
-                <v-icon
-                  class="mb-1 mr-1"
-                  :class="showEditLinks(district.email) ? 'mt-n2' : ''"
-                >
-                  mdi-at
-                </v-icon>
-                <span
-                  v-if="district.email"
-                  style="word-break: break-all;"
-                  class="ml-n1"
-                >{{
-                  district.email
-                }}</span>
-                <a
-                  v-if="showEditLinks(district.email)"
-                  class="editField"
-                  @click="toggleEdit"
-                >+Email</a>
-              </div>
-              <v-text-field
-                v-else
-                id="districtDetailsEmail"
-                v-model="districtDetailsCopy.email"
-                class="py-0"
-                prepend-inner-icon="mdi-at"
-                required
-                variant="underlined"
-                :rules="[rules.email()]"
-                :maxlength="255"
-              />
-            </v-col>
-            <v-col
-              cols="3"
-              class="pt-0 pb-0"
-            >
-              <div
-                v-if="!editing"
-                class="mt-4"
-              >
-                <v-icon
-                  class="mb-1 mr-1"
-                  :class="showEditLinks(cleanWebsiteUrl) ? 'mt-n2' : ''"
-                >
-                  mdi-web
-                </v-icon>
-                <a
-                  v-if="cleanWebsiteUrl"
-                  style="word-break: break-all;"
-                  :href="cleanWebsiteUrl"
-                  target="_blank"
-                >{{
-                  cleanWebsiteUrl
-                }}</a>
-                <a
-                  v-if="showEditLinks(cleanWebsiteUrl)"
-                  class="editField"
-                  @click="toggleEdit"
-                >+Website</a>
-              </div>
-              <v-text-field
-                v-if="editing"
-                v-model="districtDetailsCopy.website"
-                prepend-inner-icon="mdi-web"
-                class="py-0"
-                :rules="[rules.website()]"
-                variant="underlined"
-                :maxlength="255"
-              />
-            </v-col>
-          </v-row>
-          <v-row>
-            <v-col>
-              <v-divider class="divider" />
-            </v-col>
-          </v-row>
-          <v-row class="d-flex mb-2 justify-start">
-            <v-col
-              cols="12"
-              class="d-flex justify-start"
-            >
-              <h2>Addresses</h2>
-            </v-col>
-          </v-row>
-          <v-row
-            v-if="!hasMailingAddress() && !editing"
-            no-gutters
+      <v-col>
+        <v-row class="d-flex justify-start">
+          <v-col
+            v-if="!editing"
+            cols="6"
             class="d-flex justify-start"
           >
-            <v-col>
-              <a
-                class="editField"
-                @click="toggleEdit"
-              >+Address</a>
-            </v-col>
-          </v-row>
-          <v-row
+            <h2 id="districtName">
+              {{
+                district.districtNumber
+              }} - {{
+                district.displayName
+              }}
+            </h2>
+          </v-col>
+          <v-col
             v-else
-            no-gutters
-            class="d-flex justify-start"
+            class="d-flex"
+          >
+            <h2 id="districtNumber">
+              {{
+                district.districtNumber
+              }} -
+            </h2>
+            <v-text-field
+              v-model="districtDetailsCopy.displayName"
+              class="mt-n5 ml-3"
+              style="font-size: x-large"
+              :maxlength="255"
+              :rules="[rules.required(), rules.noSpecialCharactersSchDisAuthName()]"
+              required
+              variant="underlined"
+            />
+          </v-col>
+          <v-col
+            cols="6"
+            class="d-flex justify-end"
+          >
+            <PrimaryButton
+              id="viewSchoolsInDistrictButton"
+              class="mr-2"
+              secondary
+              icon-left
+              icon="mdi-library-outline"
+              text="View Schools in District"
+              @click-action="viewSchools"
+            />
+          </v-col>      
+        </v-row>
+
+        <v-row
+          no-gutters
+          class="mt-1 d-flex justify-start"
+        >
+          <v-col
+            class="d-flex"
           >
-            <v-col
-              v-if="editing || hasMailingAddress()"
-              cols="3"
+            <v-icon
+              class="pb-1"
+              :color="getStatusColor()"
+              right
+              dark
             >
-              <v-row>
-                <v-col>
-                  <v-icon
-                    class="pb-1 mr-1"
-                    right
-                  >
-                    mdi-email-outline
-                  </v-icon>
-                  <span>Mailing Address</span>
-                </v-col>
-              </v-row>
-              <v-row
-                v-if="!editing"
-                no-gutters
+              mdi-circle-medium
+            </v-icon>
+            <span>{{
+              getStatusText()
+            }}</span>
+          </v-col>
+        </v-row>
+                     
+        <v-row>
+          <v-col>
+            <v-divider class="divider" />
+          </v-col>
+        </v-row>
+        <v-row no-gutters>
+          <v-col>
+            <v-tabs v-model="tab">
+              <v-tab value="details">
+                Details
+              </v-tab>
+              <v-tab value="contacts">
+                Contacts
+              </v-tab>
+              <v-tab
+                v-if="!isOffshoreUser()"
+                value="notes"
               >
-                <v-col>
-                  <v-row
-                    class="ml-9"
-                    no-gutters
-                  >
-                    <v-col>
-                      <span style="word-break: break-all;">{{
-                        getMailingAddressItem('addressLine1')
-                      }}</span>
-                    </v-col>
-                  </v-row>
-                  <v-row no-gutters>
-                    <v-col class="ml-9">
-                      <span style="word-break: break-all;">{{
-                        getMailingAddressItem('addressLine2')
-                      }}</span>
-                    </v-col>
-                  </v-row>
-                  <v-row no-gutters>
-                    <v-col class="ml-9">
-                      <span style="word-break: break-all;">{{
-                        getMailingAddressItem('city') + ', ' + getMailingAddressItem('provinceCode') + ', ' + getMailingAddressItem('countryCode')
-                      }}</span>
-                    </v-col>
-                  </v-row>
-                  <v-row no-gutters>
-                    <v-col class="ml-9">
-                      <span style="word-break: break-all;">{{
-                        getMailingAddressItem('postal')
-                      }}</span>
-                    </v-col>
-                  </v-row>
-                </v-col>
-              </v-row>
-              <v-row
-                v-else
-                no-gutters
-              >
-                <v-col>
-                  <v-row
-                    class="ml-9"
-                    no-gutters
-                  >
-                    <v-col cols="8">
-                      <v-text-field
-                        id="mailAddressLine1"
-                        v-model="getMailingAddressCopy()[0].addressLine1"
-                        required
-                        label="Line 1"
-                        :rules="[rules.required(), rules.noSpecialCharactersAddress()]"
-                        :maxlength="255"
-                        variant="underlined"
-                        class="pb-5"
-                        hide-details="auto"
-                      />
-                    </v-col>
-                  </v-row>
-                  <v-row
-                    class="ml-9"
-                    no-gutters
-                  >
-                    <v-col cols="8">
-                      <v-text-field
-                        id="mailAddressLine2"
-                        v-model="getMailingAddressCopy()[0].addressLine2"
-                        label="Line 2"
-                        :rules="[rules.noSpecialCharactersAddress()]"
-                        :maxlength="255"
-                        variant="underlined"
-                        class="pb-5"
-                        hide-details="auto"
-                      />
-                    </v-col>
-                  </v-row>
-                  <v-row
-                    class="ml-9"
-                    no-gutters
-                  >
-                    <v-col cols="8">
-                      <v-text-field
-                        id="mailAddressCity"
-                        v-model="getMailingAddressCopy()[0].city"
-                        required
-                        :rules="[rules.required(), rules.noSpecialCharactersAddress()]"
-                        :maxlength="255"
-                        variant="underlined"
-                        label="City"
-                        class="pb-5"
-                        hide-details="auto"
-                      />
-                    </v-col>
-                  </v-row>
-                  <v-row
-                    class="ml-9"
-                    no-gutters
-                  >
-                    <v-col
-                      cols="8"
-                      class="d-flex"
-                    >
-                      <v-select
-                        id="mailAddressProvince"
-                        v-model="getMailingAddressCopy()[0].provinceCode"
-                        :items="provinceCodeValues"
-                        item-title="label"
-                        item-value="provinceCode"
-                        variant="underlined"
-                        dense
-                        :rules="[rules.required()]"
-                        required
-                        label="Province"
-                        style="color: black"
-                      />
-                    </v-col>
-                  </v-row>
-                  <v-row
-                    class="ml-9"
-                    no-gutters
-                  >
-                    <v-col
-                      cols="8"
-                      class="d-flex"
-                    >
-                      <v-select
-                        id="mailAddressCountry"
-                        v-model="getMailingAddressCopy()[0].countryCode"
-                        :items="countryCodeValues"
-                        item-title="label"
-                        item-value="countryCode"
-                        variant="underlined"
-                        :rules="[rules.required()]"
-                        dense
-                        label="Country"
-                        style="color: black"
-                      />
-                    </v-col>
-                  </v-row>
-                  <v-row
-                    class="ml-9"
-                    no-gutters
-                  >
-                    <v-col cols="8">
-                      <v-text-field
-                        id="mailAddressPostal"
-                        v-model="getMailingAddressCopy()[0].postal"
-                        :maxlength="6"
-                        required
-                        :rules="[rules.required(), rules.postalCode()]"
-                        label="Postal Code"
-                        variant="underlined"
-                      />
-                    </v-col>
-                  </v-row>
-                </v-col>
-              </v-row>
-            </v-col>
-            <v-col cols="3">
-              <v-row>
-                <v-col>
-                  <v-icon
-                    class="pb-1 mr-1"
-                    right
-                  >
-                    mdi-home-outline
-                  </v-icon>
-                  <span>Physical Address</span>
-                </v-col>
-              </v-row>
-              <v-row
-                v-if="!hasSamePhysicalAddress && !editing"
-                no-gutters
-              >
-                <v-col>
-                  <v-row no-gutters>
-                    <v-col class="ml-9">
-                      <span style="word-break: break-all;">{{
-                        getPhysicalAddressItem('addressLine1')
-                      }}</span>
-                    </v-col>
-                  </v-row>
-                  <v-row no-gutters>
-                    <v-col class="ml-9">
-                      <span style="word-break: break-all;">{{
-                        getPhysicalAddressItem('addressLine2')
-                      }}</span>
-                    </v-col>
-                  </v-row>
-                  <v-row no-gutters>
-                    <v-col class="ml-9">
-                      <span style="word-break: break-all;">{{
-                        getPhysicalAddressItem('city') + ', ' + getPhysicalAddressItem('provinceCode') + ', ' + getPhysicalAddressItem('countryCode')
-                      }}</span>
-                    </v-col>
-                  </v-row>
-                  <v-row no-gutters>
-                    <v-col class="ml-9">
-                      <span style="word-break: break-all;">{{
-                        getPhysicalAddressItem('postal')
-                      }}</span>
-                    </v-col>
-                  </v-row>
-                </v-col>
-              </v-row>
-              <v-row
-                v-else
-                no-gutters
-              >
-                <v-col>
-                  <v-row
-                    class="ml-9"
-                    no-gutters
-                  >
-                    <v-col
-                      v-if="sameAsMailingCheckbox && !editing"
-                      class="fontItalic"
-                    >
-                      <span>Same as Mailing Address</span>
-                    </v-col>
-                    <v-col v-else>
-                      <v-row no-gutters>
-                        <v-col>
-                          <v-row no-gutters>
-                            <v-col>
-                              <v-row
-                                v-if="!sameAsMailingCheckbox"
-                                no-gutters
-                              >
-                                <v-col>
-                                  <v-row no-gutters>
-                                    <v-col cols="8">
-                                      <v-text-field
-                                        id="physicalAddressLine1"
-                                        v-model="getPhysicalAddressCopy()[0].addressLine1"
-                                        required
-                                        :rules="[rules.required(), rules.noSpecialCharactersAddress()]"
-                                        :maxlength="255"
-                                        variant="underlined"
-                                        label="Line 1"
-                                        class="pb-5"
-                                        hide-details="auto"
-                                      />
-                                    </v-col>
-                                  </v-row>
-                                  <v-row no-gutters>
-                                    <v-col cols="8">
-                                      <v-text-field
-                                        id="physicalAddressLine2"
-                                        v-model="getPhysicalAddressCopy()[0].addressLine2"
-                                        :rules="[rules.noSpecialCharactersAddress()]"
-                                        :maxlength="255"
-                                        variant="underlined"
-                                        label="Line 2"
-                                        class="pb-5"
-                                        hide-details="auto"
-                                      />
-                                    </v-col>
-                                  </v-row>
-                                  <v-row no-gutters>
-                                    <v-col cols="8">
-                                      <v-text-field
-                                        id="physicalAddressCity"
-                                        v-model="getPhysicalAddressCopy()[0].city"
-                                        required
-                                        :rules="[rules.required(), rules.noSpecialCharactersAddress()]"
-                                        :maxlength="255"
-                                        variant="underlined"
-                                        label="City"
-                                        class="pb-5"
-                                        hide-details="auto"
-                                      />
-                                    </v-col>
-                                  </v-row>
-                                  <v-row no-gutters>
-                                    <v-col cols="8">
-                                      <v-select
-                                        id="physicalAddressProvince"
-                                        v-model="getPhysicalAddressCopy()[0].provinceCode"
-                                        :items="provinceCodeValues"
-                                        item-title="label"
-                                        item-value="provinceCode"
-                                        dense
-                                        required
-                                        :rules="[rules.required()]"
-                                        variant="underlined"
-                                        label="Province"
-                                        style="color: black"
-                                      />
-                                    </v-col>
-                                  </v-row>
-                                  <v-row no-gutters>
-                                    <v-col cols="8">
-                                      <v-select
-                                        id="physicalAddressCountry"
-                                        v-model="getPhysicalAddressCopy()[0].countryCode"
-                                        :items="countryCodeValues"
-                                        item-title="label"
-                                        item-value="countryCode"
-                                        dense
-                                        :rules="[rules.required()]"
-                                        required
-                                        variant="underlined"
-                                        label="Country"
-                                        style="color: black"
-                                      />
-                                    </v-col>
-                                  </v-row>
-                                  <v-row no-gutters>
-                                    <v-col cols="8">
-                                      <v-text-field
-                                        id="physicalAddressPostal"
-                                        v-model="getPhysicalAddressCopy()[0].postal"
-                                        required
-                                        :rules="[rules.required(), rules.postalCode()]"
-                                        :maxlength="6"
-                                        label="Postal Code"
-                                        variant="underlined"
-                                      />
-                                    </v-col>
-                                  </v-row>
-                                </v-col>
-                              </v-row>
-                              <v-row no-gutters>
-                                <v-col>
-                                  <v-checkbox
-                                    id="sameAsMailingCheckbox"
-                                    v-model="sameAsMailingCheckbox"
-                                    dense
-                                    label="Same as Mailing Address"
-                                    class="mt-n3 pt-0"
-                                    @update:model-value="clickSameAsAddressButton"
-                                  />
-                                </v-col>
-                              </v-row>
-                            </v-col>
-                          </v-row>
-                        </v-col>
-                      </v-row>
-                    </v-col>
-                  </v-row>
-                </v-col>
-              </v-row>
-            </v-col>
-          </v-row>
-          <v-row v-if="!isOffshoreUser()">
-            <v-col>
-              <v-row>
-                <v-col class="d-flex justify-start">
-                  <h2>Ministry Notes</h2>
-                </v-col>
-                <InstituteNotes
-                  :notes="district?.notes ? district?.notes : []"
-                  :has-access="canEditDistrictDetails()"
-                  :loading="notesLoading"
-                  @add-institute-note="saveNewDistrictNote"
-                  @edit-institute-note="saveChangesToDistrictNote"
-                  @remove-institute-note="removeDistrictNote"
-                />
-              </v-row>
-            </v-col>
-          </v-row>
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-form>
+                Ministry Notes
+              </v-tab>
+            </v-tabs>
+          </v-col>
+        </v-row>
+        <v-row no-gutters>
+          <v-col>
+            <v-card-text class="pt-0">
+              <v-window v-model="tab">
+                <v-window-item value="details">
+                  <Details 
+                    :district-i-d="districtID"
+                    @updateDistrict="updateDistrictDetails"
+                  />
+                </v-window-item>
+                <v-window-item value="contacts">
+                  <DistrictContacts :district-i-d="districtID" />
+                </v-window-item>
+                <v-window-item value="notes">
+                  <InstituteNotes
+                    :notes="district?.notes ? district?.notes : []"
+                    :has-access="canEditDistrictDetails()"
+                    :loading="notesLoading"
+                    @add-institute-note="saveNewDistrictNote"
+                    @edit-institute-note="saveChangesToDistrictNote"
+                    @remove-institute-note="removeDistrictNote"
+                  />
+                </v-window-item>
+              </v-window>
+            </v-card-text>
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
@@ -733,12 +176,16 @@ import {authStore} from '@/store/modules/auth';
 import {instituteStore} from '@/store/modules/institute';
 import {edxStore} from '@/store/modules/edx';
 import InstituteNotes from '@/components/institute/common/InstituteNotes.vue';
+import Details from './district/Details.vue';
+import DistrictContacts from './district/DistrictContacts.vue';
 
 export default {
   name: 'DistrictDetails',
   components: {
     InstituteNotes,
-    PrimaryButton
+    PrimaryButton,
+    Details,
+    DistrictContacts
   },
   mixins: [alertMixin],
   props: {
@@ -755,11 +202,11 @@ export default {
       noteRequestCount: 0,
       cleanWebsiteUrl: '',
       editing: false,
-      districtDetailsFormValid: true,
       districtDetailsCopy: {},
       provinceCodeValues: [],
       countryCodeValues: [],
-      sameAsMailingCheckbox: true
+      sameAsMailingCheckbox: true,
+      tab: null
     };
   },
   computed: {
@@ -803,17 +250,6 @@ export default {
           this.loading = false;
         });
     },
-    async clickSameAsAddressButton() {
-      await this.$nextTick();
-      await this.$refs.districtDetailsForm.validate();
-    },
-    cancelClicked() {
-      this.editing = false;
-      this.setHasSamePhysicalFlag();
-    },
-    showEditLinks(fieldValue) {
-      return this.canEditDistrictDetails() && !fieldValue;
-    },
     setHasSamePhysicalFlag() {
       this.sameAsMailingCheckbox = this.hasSamePhysicalAddress;
     },
@@ -829,13 +265,7 @@ export default {
       this.setSchoolSearchParams(this.schoolSearchParams);
       this.$router.push({name: 'instituteSchoolList'});
     },
-    async toggleEdit() {
-      this.districtDetailsCopy = this.deepCloneObject(this.district);
-      this.addAddressesIfRequired(this.districtDetailsCopy);
-      this.editing = !this.editing;
-      await this.$nextTick();
-      this.$refs.districtDetailsForm.validate();
-    },
+
     getStatusColor() {
       if (this.district.districtStatusCode === 'ACTIVE') {
         return 'green';
@@ -845,59 +275,11 @@ export default {
     },
     canEditDistrictDetails() {
       return this.DISTRICT_ADMIN_ROLE;
-    },
-    addAddressesIfRequired(district) {
-      let addresses = district.addresses;
-      if (!this.hasMailingAddress()) {
-        addresses.push({
-          'createUser': null,
-          'updateUser': null,
-          'createDate': null,
-          'updateDate': null,
-          'addressId': null,
-          'schoolId': null,
-          'districtId': null,
-          'independentAuthorityId': null,
-          'phoneNumber': null,
-          'email': null,
-          'addressLine1': null,
-          'addressLine2': null,
-          'city': null,
-          'postal': null,
-          'addressTypeCode': 'MAILING',
-          'provinceCode': null,
-          'countryCode': null
-        });
-      }
-      if (!this.hasPhysicalAddress()) {
-        addresses.push({
-          'createUser': null,
-          'updateUser': null,
-          'createDate': null,
-          'updateDate': null,
-          'addressId': null,
-          'schoolId': null,
-          'districtId': null,
-          'independentAuthorityId': null,
-          'phoneNumber': null,
-          'email': null,
-          'addressLine1': null,
-          'addressLine2': null,
-          'city': null,
-          'postal': null,
-          'addressTypeCode': 'PHYSICAL',
-          'provinceCode': null,
-          'countryCode': null
-        });
-      }
-    },
-    async updateDistrictDetails() {
+    },     
+    async updateDistrictDetails(districtDetailsCopy) {
       this.loading = true;
 
-      if (this.sameAsMailingCheckbox) {
-        this.districtDetailsCopy.addresses = this.districtDetailsCopy.addresses.filter(address => address.addressTypeCode === 'MAILING');
-      }
-      ApiService.apiAxios.put(`${Routes.institute.DISTRICT_DATA_URL}` + '/' + this.districtDetailsCopy.districtId, this.districtDetailsCopy)
+      ApiService.apiAxios.put(`${Routes.institute.DISTRICT_DATA_URL}` + '/' + districtDetailsCopy.districtId, districtDetailsCopy)
         .then(() => {
           this.setSuccessAlert('Success! The district details have been updated.');
         })
@@ -906,7 +288,6 @@ export default {
           this.setFailureAlert(error?.response?.data?.message ? error?.response?.data?.message : 'An error occurred while saving the district information. Please try again later.');
         })
         .finally(() => {
-          this.toggleEdit();
           this.getDistrict();
         });
     },
@@ -920,34 +301,6 @@ export default {
         return 'Inactive';
       }
     },
-    hasMailingAddress() {
-      return this.district.addresses.filter(address => address.addressTypeCode === 'MAILING').length > 0;
-    },
-    hasPhysicalAddress() {
-      return this.district.addresses?.filter(address => address.addressTypeCode === 'PHYSICAL').length > 0;
-    },
-    getMailingAddressCopy() {
-      return this.districtDetailsCopy.addresses?.filter(address => address.addressTypeCode === 'MAILING');
-    },
-    getPhysicalAddressCopy() {
-      return this.districtDetailsCopy.addresses?.filter(address => address.addressTypeCode === 'PHYSICAL');
-    },
-    getMailingAddressItem(item) {
-      let mailingAddress = this.district.addresses.filter(address => address.addressTypeCode === 'MAILING');
-      for (const x in mailingAddress[0]) {
-        if (x === item) {
-          return mailingAddress[0][item];
-        }
-      }
-    },
-    getPhysicalAddressItem(item) {
-      let physicalAddress = this.district.addresses.filter(address => address.addressTypeCode === 'PHYSICAL');
-      for (const x in physicalAddress[0]) {
-        if (x === item) {
-          return physicalAddress[0][item];
-        }
-      }
-    },
     backButtonClick() {
       router.push({name: 'instituteDistrict'});
     },
@@ -1022,8 +375,8 @@ export default {
 }
 
 .containerSetup {
-    padding-right: 24em !important;
-    padding-left: 24em !important;
+    padding-right: 20em !important;
+    padding-left: 20em !important;
 }
 
 .editField {
@@ -1035,4 +388,23 @@ export default {
     text-decoration: underline;
 }
 
+.v-tab {
+    text-transform: none !important;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.tab-divider {
+    border-right: 1px solid lightgray;
+    border-radius: 0;
+}
+
+.tab-divider:last-child {
+    border-right: 0
+}
+
+:deep(.v-btn--variant-text) {
+    color: #003366
+}
+
 </style>
diff --git a/frontend/src/components/institute/DistrictList.vue b/frontend/src/components/institute/DistrictList.vue
index 0af5b6f38..8235c945f 100644
--- a/frontend/src/components/institute/DistrictList.vue
+++ b/frontend/src/components/institute/DistrictList.vue
@@ -122,7 +122,7 @@
         :headers="headers"
         :items="filteredDistrictList"
         items-per-page="-1"
-        class="elevation-1 mt-5"
+        class="elevation-1 mt-5 rounded"
         mobile-breakpoint="0"
       >
         <template #item="{ item }">
@@ -156,31 +156,8 @@
                 getPhoneNumber(item.raw.phoneNumber)
               }}</span>
             </v-col>
-            <v-col class="d-flex justify-end">
-              <v-tooltip bottom>
-                <template #activator="{ props }">
-                  <v-btn
-                    id="districtContacts"
-                    color="#003366"
-                    outlined
-                    v-bind="props"
-                    class="mt-0 pt-0 filterButton ml-2"
-                    style="text-transform: initial"
-                    @click.stop.prevent="openDistrictContacts(item.raw.districtId)"
-                  >
-                    <v-icon
-                      color="white"
-                      style="margin-top: 0.07em"
-                      dark
-                    >
-                      mdi-account-multiple-outline
-                    </v-icon>
-                  </v-btn>
-                </template>
-                <span>View Contacts</span>
-              </v-tooltip>
-            </v-col>
           </v-row>
+          <v-divider />
         </template>
 
         <template #no-data>
@@ -331,17 +308,6 @@ export default {
     padding-left: 30em !important;
 }
 
-.hoverTable {
-    border-bottom-style: groove;
-    border-left-style: groove;
-    border-right-style: groove;
-    border-color: rgb(255 255 255 / 45%);
-}
-
-.hoverTable:nth-child(1) {
-    border-top-style: groove;
-}
-
 .hoverTable:hover {
     background-color: #e8e8e8;
     cursor: pointer;
diff --git a/frontend/src/components/institute/MoveSchoolPage.vue b/frontend/src/components/institute/MoveSchoolPage.vue
index ba2014188..0d7cd0619 100644
--- a/frontend/src/components/institute/MoveSchoolPage.vue
+++ b/frontend/src/components/institute/MoveSchoolPage.vue
@@ -47,14 +47,13 @@
             </v-row>
             <v-row>
               <v-col cols="4">
-                <v-text-field
+                <DatePicker
                   id="moveDateTextField"
                   v-model="moveSchoolObject.moveDate"
-                  :rules="[rules.required(), rules.dateIsAfterOrEqualTo(moveSchoolObject.moveDate, school.openedDate, true, `The move date must occur on or after ${schoolOpenDateFormatted}.`)]"
-                  class="pt-0"
                   label="Move Date"
-                  variant="underlined"
-                  type="date"
+                  :rules="[rules.required(), rules.dateIsAfterOrEqualTo(moveSchoolObject.moveDate, school.openedDate, true, `The move date must occur on or after ${schoolOpenDateFormatted}.`)]"
+                  model-type="yyyy-MM-dd'T'00:00:00"
+                  @update:model-value="validateForm"
                 />
               </v-col>
               <v-col cols="4">
@@ -492,14 +491,16 @@ import * as Rules from '@/utils/institute/formRules';
 import {sortByNameValue, formatDate} from '@/utils/format';
 import {isNumber} from '@/utils/institute/formInput';
 import {sortBy} from 'lodash';
-import {LocalDate} from '@js-joda/core';
+import {DateTimeFormatter, LocalDate} from '@js-joda/core';
 import {isOpenNotClosingAuthority} from '@/utils/common';
 import {authStore} from '@/store/modules/auth';
 import {instituteStore} from '@/store/modules/institute';
+import DatePicker from '@/components/util/DatePicker.vue';
 
 export default {
   name: 'MoveSchoolPage',
   components: {
+    DatePicker,
     PrimaryButton,
   },
   mixins: [alertMixin],
@@ -564,7 +565,6 @@ export default {
         moveDate: this.calculateDefaultMoveDate(),
       },
       rules: Rules,
-      moveDatePicker: null,
       sameAsMailingCheckbox: true,
       showAddress: false,
     };
@@ -720,9 +720,6 @@ export default {
       }
       return true;
     },
-    saveMoveSchoolDate(date) {
-      this.$refs.moveDateFilter.save(date);
-    },
     closeMoveSchoolPage() {
       this.$emit('moveSchool:closeMoveSchoolPage');
     },
@@ -746,7 +743,7 @@ export default {
         });
     },
     calculateDefaultMoveDate() {
-      return (LocalDate.now()).toString();
+      return (LocalDate.now().atStartOfDay().format(DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss'))).toString();
     },
     schoolDistrictChanged() {
       this.schoolCategoryDisabled = false;
diff --git a/frontend/src/components/institute/NewAuthorityPage.vue b/frontend/src/components/institute/NewAuthorityPage.vue
index bbfa57d6c..1003bcf71 100644
--- a/frontend/src/components/institute/NewAuthorityPage.vue
+++ b/frontend/src/components/institute/NewAuthorityPage.vue
@@ -31,20 +31,16 @@
                   variant="underlined"
                   :items="authorityTypes"
                   :rules="[rules.required()]"
-                  clearable
+                  :clearable="true"
                 />
               </v-col>
               <v-col cols="6">
-                <v-text-field
+                <DatePicker
                   id="newAuthorityOpenDateTextField"
                   v-model="newAuthority.openDate"
-                  :rules="[rules.required()]"
-                  class="mt-0"
-                  variant="underlined"
                   label="Open Date"
-                  :max="new Date(localDate.now().toString()).toISOString().substr(0, 10)"
-                  type="date"
-                  clearable
+                  :rules="[rules.required()]"
+                  model-type="yyyy-MM-dd'T'00:00:00"
                   @update:model-value="validateForm"
                 />
               </v-col>
@@ -256,9 +252,9 @@
         id="newAuthorityPostBtn"
         text="Save"
         width="7rem"
-        @click-action="addNewAuthority"
         :disabled="!isFormValid"
         :loading="processing"
+        @click-action="addNewAuthority"
       />
     </v-card-actions>
   </v-card>
@@ -272,21 +268,23 @@ import ApiService from '@/common/apiService';
 import {Routes} from '@/utils/constants';
 import * as Rules from '@/utils/institute/formRules';
 import {isNumber} from '@/utils/institute/formInput';
-import {LocalDate} from '@js-joda/core';
+import {DateTimeFormatter, LocalDate} from '@js-joda/core';
 import {authStore} from '@/store/modules/auth';
 import {instituteStore} from '@/store/modules/institute';
+import DatePicker from '@/components/util/DatePicker.vue';
 
 export default {
   name: 'NewAuthorityPage',
   components: {
+    DatePicker,
     PrimaryButton
   },
   mixins: [alertMixin],
+  emits: ['newAuthority:closeNewAuthorityPage'],
   data() {
     return {
       isFormValid: false,
       processing: false,
-      localDate: LocalDate,
       newAuthority: {
         authorityName: null,
         authorityTypeCode: null,
@@ -308,7 +306,6 @@ export default {
         physicalAddrPostal: null,
       },
       rules: Rules,
-      newAuthorityOpenDatePicker: null,
       schoolFacilityTypes: [],
       schoolCategoryTypes: [],
       schoolOrganizationTypes: [],
@@ -323,9 +320,6 @@ export default {
       ],
     };
   },
-  mounted() {
-    this.validateForm();
-  },
   computed: {
     ...mapState(authStore, ['isAuthenticated', 'userInfo']),
     ...mapState(instituteStore, ['authorityTypeCodes', 'provinceCodes', 'countryCodes']),
@@ -333,6 +327,9 @@ export default {
       return !this.excludeShowingPhysicalAddressesForAuthoritiesOfType.includes(this.newAuthority.authorityTypeCode);
     }
   },
+  mounted() {
+    this.validateForm();
+  },
   created() {
     const instStore = instituteStore();
     instStore.getAllAuthorityTypeCodes().then(() => {
@@ -347,10 +344,7 @@ export default {
   },
   methods: {
     calculateDefaultOpenDate() {
-      return LocalDate.now().toString();
-    },
-    openDatePicker() {
-      this.$refs.newAuthorityDatePicker.openMenu();
+      return LocalDate.now().atStartOfDay().format(DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss')).toString();
     },
     closeNewAuthorityPage() {
       this.resetForm();
@@ -401,13 +395,4 @@ export default {
     font-size: medium !important;
     font-weight: bolder !important;
 }
-
-:deep(.dp__input) {
-    display: none;
-}
-
-:deep(.dp__icon) {
-    display: none;
-}
-
 </style>
diff --git a/frontend/src/components/institute/NewSchoolPage.vue b/frontend/src/components/institute/NewSchoolPage.vue
index cf71cf71a..da2aa7f59 100644
--- a/frontend/src/components/institute/NewSchoolPage.vue
+++ b/frontend/src/components/institute/NewSchoolPage.vue
@@ -66,15 +66,12 @@
                 />
               </v-col>
               <v-col cols="4">
-                <v-text-field
+                <DatePicker
                   id="newSchoolOpenDateTextField"
                   v-model="newSchool.openedDate"
-                  :rules="[rules.required()]"
-                  class="pt-0 mt-0"
                   label="Open Date"
-                  variant="underlined"
-                  type="date"
-                  clearable
+                  :rules="[rules.required()]"
+                  model-type="yyyy-MM-dd'T'00:00:00"
                   @update:model-value="validateForm"
                 />
               </v-col>
@@ -499,10 +496,12 @@ import {findUpcomingDate} from '@/utils/dateHelpers';
 import {sortBy} from 'lodash';
 import {authStore} from '@/store/modules/auth';
 import {instituteStore} from '@/store/modules/institute';
+import DatePicker from '@/components/util/DatePicker.vue';
 
 export default {
   name: 'NewSchoolPage',
   components: {
+    DatePicker,
     PrimaryButton
   },
   mixins: [alertMixin],
@@ -565,7 +564,6 @@ export default {
         physicalAddrPostal: null,
       },
       rules: Rules,
-      newSchoolOpenDatePicker: null,
       sameAsMailingCheckbox: true,
       showAddress: false,
       addressButton: {
@@ -646,9 +644,6 @@ export default {
     this.preselectSchoolDistrict();
   },
   methods: {
-    openEffectiveDatePicker() {
-      this.$refs.newSchoolDatePicker.openMenu();
-    },
     preselectSchoolDistrict() {
       if (this.filteredDistrictNames.length !== 1) {
         return;
diff --git a/frontend/src/components/institute/SchoolDetails.vue b/frontend/src/components/institute/SchoolDetails.vue
index b619ba1de..8f5e5fe12 100644
--- a/frontend/src/components/institute/SchoolDetails.vue
+++ b/frontend/src/components/institute/SchoolDetails.vue
@@ -210,6 +210,7 @@ import SchoolFunding from './common/SchoolFunding.vue';
 import {authStore} from '@/store/modules/auth';
 import {notificationsStore} from '@/store/modules/notifications';
 import InstituteNotes from '@/components/institute/common/InstituteNotes.vue';
+import {appStore} from '@/store/modules/app';
 
 export default {
   name: 'SchoolDetailsPage',
@@ -247,6 +248,7 @@ export default {
   computed: {
     ...mapState(authStore, ['isAuthenticated', 'userInfo', 'SCHOOL_ADMIN_ROLE', 'INDEPENDENT_SCHOOLS_ADMIN_ROLE', 'OFFSHORE_SCHOOLS_ADMIN_ROLE']),
     ...mapState(notificationsStore, ['notification']),
+    ...mapState(appStore, ['config']),
     notesLoading() {
       return this.noteRequestCount > 0;
     },
@@ -344,7 +346,7 @@ export default {
       return this.SCHOOL_ADMIN_ROLE;
     },
     canViewFundingTab() {
-      return this.independentArray.includes(this.school.schoolCategoryCode) && (this.INDEPENDENT_SCHOOLS_ADMIN_ROLE || this.SCHOOL_ADMIN_ROLE);
+      return this.independentArray.includes(this.school.schoolCategoryCode) && (this.INDEPENDENT_SCHOOLS_ADMIN_ROLE || this.SCHOOL_ADMIN_ROLE) && !this.config.DISABLE_SDC_FUNCTIONALITY;
     },
     saveNewSchoolNote(schoolNote) {
       this.noteRequestCount += 1;
diff --git a/frontend/src/components/institute/SchoolList.vue b/frontend/src/components/institute/SchoolList.vue
index ca029b76d..540601685 100644
--- a/frontend/src/components/institute/SchoolList.vue
+++ b/frontend/src/components/institute/SchoolList.vue
@@ -274,7 +274,7 @@
               v-model:items="schools"
               v-model:items-length="totalSchools"
               :loading="loadingTable"
-              class="elevation-1"
+              class="elevation-1 rounded"
               hide-default-header
               mobile-breakpoint="0"
             >
@@ -374,6 +374,7 @@
                     </v-row>
                   </v-col>
                 </v-row>
+                <v-divider />
               </template>
             </v-data-table-server>
           </v-col>
@@ -851,17 +852,6 @@ export default {
     padding-left: 24em !important;
 }
 
-.hoverTable {
-    border-bottom-style: groove;
-    border-left-style: groove;
-    border-right-style: groove;
-    border-color: rgb(255 255 255 / 45%);
-}
-
-.hoverTable:nth-child(1) {
-    border-top-style: groove;
-}
-
 .hoverTable:hover {
     background-color: #e8e8e8;
     cursor: pointer;
diff --git a/frontend/src/components/institute/SchoolStatus.vue b/frontend/src/components/institute/SchoolStatus.vue
index c4891c296..725fd97dc 100644
--- a/frontend/src/components/institute/SchoolStatus.vue
+++ b/frontend/src/components/institute/SchoolStatus.vue
@@ -97,15 +97,12 @@
                   </v-row>
                   <v-row>
                     <v-col cols="4">
-                      <v-text-field
+                      <DatePicker
                         id="newOpenDateTextField"
                         v-model="newOpenDate"
-                        :rules="[rules.required()]"
-                        class="pt-0 mt-0"
                         label="Open Date"
-                        variant="underlined"
-                        clearable
-                        type="date"
+                        :rules="[rules.required()]"
+                        model-type="yyyy-MM-dd'T'00:00:00"
                         @update:model-value="validateForm"
                       />
                     </v-col>
@@ -122,15 +119,12 @@
                   </v-row>
                   <v-row>
                     <v-col cols="4">
-                      <v-text-field
+                      <DatePicker
                         id="updatedOpenDateTextField"
                         v-model="updatedOpenDate"
-                        :rules="[rules.required()]"
-                        class="pt-0 mt-0"
                         label="Open Date"
-                        variant="underlined"
-                        clearable
-                        type="date"
+                        :rules="[rules.required()]"
+                        model-type="yyyy-MM-dd'T'00:00:00"
                         @update:model-value="validateForm"
                       />
                     </v-col>
@@ -147,15 +141,12 @@
                   </v-row>
                   <v-row>
                     <v-col cols="4">
-                      <v-text-field
+                      <DatePicker
                         id="newCloseDateTextField"
                         v-model="newCloseDate"
-                        :rules="[rules.required(), rules.dateIsAfterOrEqualTo(newCloseDate, schoolOpenDate, true, `The closure date must occur on or after ${openDateFormatted}.`)]"
-                        class="pt-0 mt-0"
-                        variant="underlined"
                         label="Close Date"
-                        type="date"
-                        clearable
+                        :rules="[rules.required(), rules.dateIsAfterOrEqualTo(newCloseDate, schoolOpenDate, true, `The closure date must occur on or after ${openDateFormatted}.`)]"
+                        model-type="yyyy-MM-dd'T'00:00:00"
                         @update:model-value="validateForm"
                       />
                     </v-col>
@@ -172,15 +163,12 @@
                   </v-row>
                   <v-row>
                     <v-col cols="6">
-                      <v-text-field
+                      <DatePicker
                         id="updatedCloseDateTextField"
                         v-model="updatedCloseDate"
-                        :rules="[rules.required(), rules.dateIsAfterOrEqualTo(updatedCloseDate, schoolOpenDate, true, `The closure date must occur on or after ${openDateFormatted}.`)]"
-                        class="pt-0 mt-0"
                         label="Close Date"
-                        variant="underlined"
-                        type="date"
-                        clearable
+                        :rules="[rules.required(), rules.dateIsAfterOrEqualTo(updatedCloseDate, schoolOpenDate, true, `The closure date must occur on or after ${openDateFormatted}.`)]"
+                        model-type="yyyy-MM-dd'T'00:00:00"
                         @update:model-value="validateForm"
                       />
                     </v-col>
@@ -215,12 +203,14 @@
 import PrimaryButton from '../util/PrimaryButton.vue';
 import alertMixin from '@/mixins/alertMixin';
 import * as Rules from '@/utils/institute/formRules';
-import {formatDate, formatDisplayDate} from '@/utils/format';
-import {findUpcomingDate, parseDate} from '@/utils/dateHelpers';
+import {formatDate} from '@/utils/format';
+import {findUpcomingDate} from '@/utils/dateHelpers';
+import DatePicker from '@/components/util/DatePicker.vue';
 
 export default {
   name: 'SchoolStatus',
   components: {
+    DatePicker,
     PrimaryButton,
   },
   mixins: [alertMixin],
@@ -249,9 +239,9 @@ export default {
       rules: Rules,
       action: this.defaultUpdateActionForSchool(),
       newOpenDate: findUpcomingDate(7, 1).toString(),
-      updatedOpenDate: this.parseDate(formatDate(this.schoolOpenDate)),
+      updatedOpenDate: this.schoolOpenDate,
       newCloseDate: findUpcomingDate(6, 30).toString(),
-      updatedCloseDate: this.parseDate(formatDate(this.schoolCloseDate))
+      updatedCloseDate: this.schoolCloseDate
     };
   },
   computed: {
@@ -270,38 +260,6 @@ export default {
     displayOptionsForNeverOpenedSchoolStatus() {
       return this.schoolStatus === 'Never Opened';
     },
-    newOpenDateFormatted: {
-      get() {
-        return this.formatDisplayDate(this.newOpenDate);
-      },
-      set(newValue) {
-        this.newOpenDate = this.parseDate(newValue);
-      }
-    },
-    updatedOpenDateFormatted: {
-      get() {
-        return this.formatDisplayDate(this.updatedOpenDate);
-      },
-      set(newValue) {
-        this.updatedOpenDate = this.parseDate(newValue);
-      }
-    },
-    newCloseDateFormatted: {
-      get() {
-        return this.formatDisplayDate(this.newCloseDate);
-      },
-      set(newValue) {
-        this.newCloseDate = this.parseDate(newValue);
-      }
-    },
-    updatedCloseDateFormatted: {
-      get() {
-        return this.formatDisplayDate(this.updatedCloseDate);
-      },
-      set(newValue) {
-        this.updatedCloseDate = this.parseDate(newValue);
-      }
-    },
     openDateFormatted() {
       if (!this.schoolOpenDate) {
         return '';
@@ -309,29 +267,6 @@ export default {
       return this.formatDate(this.schoolOpenDate);
     }
   },
-  watch: {
-    //watching effective date to valid form because we need to cross validate expiry and effective date fields
-    'newOpenDate': {
-      handler() {
-        this.validateForm();
-      }
-    },
-    'updatedOpenDate': {
-      handler() {
-        this.validateForm();
-      }
-    },
-    'newCloseDate': {
-      handler() {
-        this.validateForm();
-      }
-    },
-    'updatedCloseDate': {
-      handler() {
-        this.validateForm();
-      }
-    }
-  },
   mounted() {
     if (this.isSchoolStatusUpdateAllowed) {
       this.validateForm();
@@ -352,18 +287,6 @@ export default {
         return '';
       }
     },
-    saveNewOpenDate(date) {
-      this.$refs.newOpenDateFilter.save(date);
-    },
-    saveUpdatedOpenDate(date) {
-      this.$refs.updatedOpenDateFilter.save(date);
-    },
-    saveNewCloseDate(date) {
-      this.$refs.newCloseDateFilter.save(date);
-    },
-    saveUpdatedCloseDate(date) {
-      this.$refs.updatedCloseDateFilter.save(date);
-    },
     closeEditSchoolStatus() {
       this.resetForm();
       this.$emit('schoolStatus:closeEditSchoolStatusPage');
@@ -382,26 +305,26 @@ export default {
         break;
       case 'setOpenDate':
         updatedSchoolDates = {
-          openedDate: this.newOpenDateFormatted,
+          openedDate: this.newOpenDate,
           closedDate: null,
         };
         break;
       case 'updateOpenDate':
         updatedSchoolDates = {
-          openedDate: this.updatedOpenDateFormatted,
+          openedDate: this.updatedOpenDate,
           closedDate: null,
         };
         break;
       case 'setCloseDate':
         updatedSchoolDates = {
-          openedDate: this.parseDate(formatDate(this.schoolOpenDate)),
-          closedDate: this.newCloseDateFormatted
+          openedDate: this.schoolOpenDate,
+          closedDate: this.newCloseDate
         };
         break;
       case 'updateCloseDate':
         updatedSchoolDates = {
-          openedDate: this.parseDate(formatDate(this.schoolOpenDate)),
-          closedDate: this.updatedCloseDateFormatted,
+          openedDate: this.schoolOpenDate,
+          closedDate: this.updatedCloseDate,
         };
         break;
       default:
@@ -418,9 +341,7 @@ export default {
       const isValid = await this.$refs.schoolStatusForm.validate();
       this.isFormValid = isValid.valid;
     },
-    formatDate,
-    formatDisplayDate,
-    parseDate
+    formatDate
   }
 };
 </script>
diff --git a/frontend/src/components/institute/AuthoritiesContacts.vue b/frontend/src/components/institute/authority/AuthoritiesContacts.vue
similarity index 86%
rename from frontend/src/components/institute/AuthoritiesContacts.vue
rename to frontend/src/components/institute/authority/AuthoritiesContacts.vue
index c23c180b1..34abdf3a7 100644
--- a/frontend/src/components/institute/AuthoritiesContacts.vue
+++ b/frontend/src/components/institute/authority/AuthoritiesContacts.vue
@@ -1,6 +1,5 @@
 <template>
   <v-container
-    class="containerSetup"
     fluid
   >
     <v-row v-if="loading">
@@ -16,43 +15,6 @@
       </v-col>
     </v-row>
     <template v-if="!loading">
-      <v-row>
-        <v-col class="mt-1 d-flex justify-start">
-          <v-icon
-            class="mt-1"
-            small
-            color="#1976d2"
-          >
-            mdi-arrow-left
-          </v-icon>
-          <a
-            class="ml-1 mt-1"
-            @click="backButtonClick"
-          >Return to Authority List</a>
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-col
-          cols="12"
-          class="d-flex justify-start"
-        >
-          <v-row no-gutters>
-            <v-col cols="12">
-              <h2
-                id="authorityNameAndNumber"
-                class="subjectHeading"
-              >
-                {{
-                  authority.authorityNumber
-                }} -
-                {{
-                  authority.displayName
-                }}
-              </h2>
-            </v-col>
-          </v-row>
-        </v-col>
-      </v-row>
       <v-row cols="2">
         <v-col class="d-flex justify-start">
           <v-chip
@@ -72,15 +34,6 @@
           </v-chip>
         </v-col>
         <v-col class="d-flex justify-end">
-          <PrimaryButton
-            id="viewAuthorityDetailsButton"
-            class="mr-2"
-            secondary
-            icon-left
-            icon="mdi-domain"
-            :to="`/authority/${authorityID}`"
-            text="View Authority Details"
-          />
           <PrimaryButton
             v-if="canEditAuthorityContact"
             icon-left
@@ -94,9 +47,10 @@
       <div
         v-for="authorityContactType in authorityContactTypes"
         :key="authorityContactType.code"
+        class="pb-4"
       >
         <v-row>
-          <v-col>
+          <v-col class="pb-0">
             <h2
               id="authorityTypeLabel"
               style="color:#1A5A96"
@@ -114,6 +68,7 @@
           <v-col
             v-for="contact in authorityContacts.get(authorityContactType.authorityContactTypeCode)"
             :key="contact.independentAuthorityId"
+            class="pt-0"
             cols="5"
             lg="4"
           >
@@ -129,7 +84,7 @@
           v-else
           cols="2"
         >
-          <v-col>
+          <v-col class="pt-0">
             <p>No contacts of this type have been listed.</p>
           </v-col>
         </v-row>
@@ -173,22 +128,22 @@
 
 <script>
 
-import ApiService from '../../common/apiService';
+import ApiService from '../../../common/apiService';
 import {Routes} from '@/utils/constants';
-import PrimaryButton from '../util/PrimaryButton.vue';
+import PrimaryButton from '../../util/PrimaryButton.vue';
 import alertMixin from '@/mixins/alertMixin';
 import {isExpired, getStatusAuthorityOrSchool} from '@/utils/institute/status';
 import {mapState} from 'pinia';
-import AuthorityContact from '@/components/institute/AuthorityContact.vue';
-import NewAuthorityContactPage from '@/components/institute/NewAuthorityContactPage.vue';
+import AuthorityContact from '@/components/institute/authority/AuthorityContact.vue';
+import NewAuthorityContactPage from '@/components/institute/authority/NewAuthorityContactPage.vue';
 import {sortBy} from 'lodash';
-import EditAuthorityContactPage from '@/components/institute/EditAuthorityContactPage.vue';
+import EditAuthorityContactPage from '@/components/institute/authority/EditAuthorityContactPage.vue';
 import ConfirmationDialog from '@/components/util/ConfirmationDialog.vue';
 import {authStore} from '@/store/modules/auth';
 import {instituteStore} from '@/store/modules/institute';
 
 export default {
-  name: 'AuthorityContactPage',
+  name: 'AuthorityContacts',
   components: {
     EditAuthorityContactPage,
     PrimaryButton,
diff --git a/frontend/src/components/institute/AuthorityContact.vue b/frontend/src/components/institute/authority/AuthorityContact.vue
similarity index 100%
rename from frontend/src/components/institute/AuthorityContact.vue
rename to frontend/src/components/institute/authority/AuthorityContact.vue
diff --git a/frontend/src/components/institute/authority/Details.vue b/frontend/src/components/institute/authority/Details.vue
new file mode 100644
index 000000000..44c474880
--- /dev/null
+++ b/frontend/src/components/institute/authority/Details.vue
@@ -0,0 +1,1189 @@
+<template>
+  <v-form
+    ref="authorityForm"
+    v-model="authorityFormValid"
+  >
+    <v-container fluid>
+      <v-row v-if="loading">
+        <v-col class="d-flex justify-center">
+          <v-progress-circular
+            class="mt-16"
+            :size="70"
+            :width="7"
+            color="primary"
+            indeterminate
+            :active="loading"
+          />
+        </v-col>
+      </v-row>
+      <v-row
+        v-else
+        no-gutters
+      >
+        <v-col>
+          <v-row class="d-flex justify-start">
+            <v-col
+              v-if="!editing"
+              class="d-flex justify-end"
+            >
+              <PrimaryButton
+                v-if="canEditAuthorities()"
+                id="editButton"
+                icon-left
+                width="6em"
+                icon="mdi-pencil"
+                text="Edit"
+                @click-action="toggleEdit"
+              />
+            </v-col>
+            <v-col
+              v-else
+              class="d-flex justify-end"
+            >
+              <PrimaryButton
+                id="cancelButton"
+                class="mr-2"
+                secondary
+                icon-left
+                width="6em"
+                text="Cancel"
+                @click-action="cancelEdit"
+              />
+              <PrimaryButton
+                id="saveButton"
+                icon-left
+                width="6em"
+                text="Save"
+                :disabled="!authorityFormValid"
+                @click-action="saveAuthority"
+              />
+            </v-col>
+          </v-row>
+
+          <v-row
+            v-if="editing"
+            class="d-flex justify-start"
+          >
+            <v-col
+              lg="4"
+              class="pb-0 pt-0"
+            >
+              <v-text-field
+                v-model="authorityCopy.displayName"
+                class="mt-n4 ml-3"
+                required
+                variant="underlined"
+                :rules="[rules.required(), rules.noSpecialCharactersSchDisAuthName()]"
+                :maxlength="255"
+                style="font-size: x-large"
+              />
+            </v-col>
+          </v-row>
+
+          <v-row class="pl-3">
+            <v-col
+              cols="4"
+              lg="3"
+              class="pb-0 pt-0"
+            >
+              <v-row
+                no-gutters
+                class="d-flex justify-start"
+              >
+                <v-col
+                  cols="10"
+                  class="d-flex justify-start"
+                >
+                  <span style="color: grey">Status</span>
+                </v-col>
+              </v-row>
+
+              <v-row no-gutters>
+                <v-col class="d-flex justify-start">
+                  <span v-if="!editing">
+                    <v-icon
+                      class="pb-1"
+                      :color="getStatusColorAuthorityOrSchool(authority?.status)"
+                      right
+                      dark
+                    >
+                      mdi-circle-medium
+                    </v-icon>
+                    <span>{{
+                      authority?.status
+                    }}</span>
+                  </span>
+
+                  <v-col
+                    v-else
+                    class="mt-n4 pl-0"
+                  >
+                    <v-btn
+                      id="editAuthorityStatusButton"
+                      density="compact"
+                      variant="outlined"
+                      class="mt-1 mb-1"
+                      :secondary="true"
+                      @click="openAuthorityStatusEdit"
+                    >
+                      <v-icon
+                        class="ml-n1 pr-3"
+                        :color="getStatusColorAuthorityOrSchool(authorityCopy.status)"
+                        dark
+                      >
+                        mdi-circle-medium
+                      </v-icon>
+                      <span>{{
+                        authorityCopy.status
+                      }}</span>
+                    </v-btn>
+                  </v-col>
+                </v-col>
+              </v-row>
+            </v-col>
+
+
+
+
+
+            <v-col
+              cols="4"
+              lg="3"
+              class="pb-0 pt-0"
+            >
+              <v-row no-gutters>
+                <v-col
+                  cols="10"
+                  class="pt-2 pr-0"
+                >
+                  <span style="color: grey">Open Date</span>
+                </v-col>
+              </v-row>
+              <v-row no-gutters>
+                <v-col
+                  cols="10"
+                  class="pb-1 pr-0"
+                >
+                  <span
+                    v-if="!editing"
+                    class="ministryLine"
+                    style="color: black"
+                  >{{
+                    formatDate(authority?.openedDate) || '-'
+                  }}</span>
+                  <span
+                    v-else
+                    class="ministryLine"
+                    style="color: black"
+                  >{{
+                    formatDate(authorityCopy.openedDate) || '-'
+                  }}</span>
+                </v-col>
+              </v-row>
+            </v-col>
+            <v-col
+              cols="4"
+              lg="3"
+              class="pb-0 pt-0"
+            >
+              <v-row no-gutters>
+                <v-col
+                  cols="10"
+                  class=" pt-2 pr-0"
+                >
+                  <span style="color: grey">Close Date</span>
+                </v-col>
+              </v-row>
+              <v-row no-gutters>
+                <v-col
+                  cols="10"
+                  class="pb-1 pr-0"
+                >
+                  <span
+                    v-if="!editing"
+                    class="ministryLine"
+                    style="color: black"
+                  >{{
+                    formatDate(authority?.closedDate) || '-'
+                  }}</span>
+                  <span
+                    v-else
+                    class="ministryLine"
+                    style="color: black"
+                  >{{
+                    formatDate(authorityCopy.closedDate) || '-'
+                  }}</span>
+                </v-col>
+              </v-row>
+            </v-col>
+            <v-col
+              cols="4"
+              lg="3"
+              class="pb-0 pt-0"
+            >
+              <v-row
+                v-if="!editing"
+                no-gutters
+              >
+                <v-col
+                  cols="10"
+                  class="pt-2 pr-0"
+                >
+                  <span style="color: grey">Authority Type</span>
+                </v-col>
+              </v-row>
+              <v-row no-gutters>
+                <v-col
+                  cols="10"
+                  class="pb-1 pr-0"
+                >
+                  <span
+                    v-if="!editing"
+                    class="ministryLine"
+                    style="color: black"
+                  >{{
+                    authority?.type
+                  }}</span>
+                  <v-select
+                    v-else
+                    id="authorityTypeSelect"
+                    v-model="authorityCopy.authorityTypeCode"
+                    label="Authority Type"
+                    :items="authorityTypes"
+                    item-title="label"
+                    item-value="authorityTypeCode"
+                    variant="underlined"
+                    dense
+                    class="ministryLine mt-2"
+                    style="color: black"
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+
+          <v-row
+            no-gutters
+            class="mt-6 d-flex justify-start"
+          >
+            <v-col
+              cols="12"
+              class="d-flex justify-start"
+            >
+              <h3 class="subHeading pt-4">
+                Contact Information
+              </h3>
+            </v-col>
+          </v-row>
+
+          <v-row class="d-flex justify-start">
+            <v-col
+              cols="3"
+              lg="3"
+              class="pb=0 pt-0"
+            >
+              <v-row
+                v-if="!editing"
+                no-gutters
+                class="d-flex justify-start"
+              >
+                <v-col
+                  cols="10"
+                  class="d-flex justify-start"
+                >
+                  <span style="color: grey">Phone</span>
+                </v-col>
+              </v-row>
+              <v-row no-gutters>
+                <v-col
+                  cols="10"
+                  class="d-flex justify-start"
+                >
+                  <div v-if="!editing">
+                    <span v-if="authority?.phoneNumber">{{
+                      formatPhoneNumber(authority?.phoneNumber)
+                    }}</span>
+
+                    <a
+                      v-if="showEditLinks(authority?.phoneNumber)"
+                      class="editField"
+                      @click="toggleEdit"
+                    >+Phone</a>
+                  </div>
+                  <v-text-field
+                    v-else
+                    id="phoneNumberField"
+                    v-model="authorityCopy.phoneNumber"
+                    label="Phone"
+                    variant="underlined"
+                    class="shrink py-0"
+                    required
+                    :maxlength="10"
+                    :rules="[rules.required(), rules.phoneNumber()]"
+                    @keypress="isNumber($event)"
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+
+
+
+            <v-col
+              cols="3"
+              lg="3"
+              class="pb-0 pt-0"
+            >
+              <v-row
+                v-if="!editing"
+                no-gutters
+                class="d-flex justify-start"
+              >
+                <v-col
+                  cols="10"
+                  class="d-flex justify-start"
+                >
+                  <span style="color: grey">Fax</span>
+                </v-col>
+              </v-row>
+
+              <v-row no-gutters>
+                <v-col
+                  cols="10"
+                  class="d-flex justify-start"
+                >
+                  <div v-if="!editing">
+                    <span
+                      v-if="authority?.faxNumber"
+                      class="ml-n1"
+                    >{{
+                      formatPhoneNumber(authority?.faxNumber)
+                    }}</span>
+                    <a
+                      v-if="showEditLinks(authority?.faxNumber)"
+                      class="editField mt-n1"
+                      @click="toggleEdit"
+                    >+Fax</a>
+                  </div>
+
+                  <v-text-field
+                    v-else
+                    id="faxNumberField"
+                    v-model="authorityCopy.faxNumber"
+                    label="Fax"
+                    variant="underlined"
+                    class="shrink py-0"
+                    :rules="[rules.phoneNumber('Fax number must be valid')]"
+                    :maxlength="10"
+                    @keypress="isNumber($event)"
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+
+
+
+            <v-col
+              cols="4"
+              lg="4"
+              class="pb-0 pt-0"
+            >
+              <v-row
+                v-if="!editing"
+                no-gutters
+                class="d-flex justify-start"
+              >
+                <v-col
+                  cols="10"
+                  class="d-flex justify-start"
+                >
+                  <span style="color: grey">Email</span>
+                </v-col>
+              </v-row>
+
+
+              <v-row no-gutters>
+                <v-col
+                  cols="10"
+                  class="d-flex justify-start"
+                >
+                  <div v-if="!editing">
+                    <span
+                      v-if="authority?.email"
+                      style="word-break: break-all;"
+                      class="ml-n1"
+                    >{{
+                      authority?.email
+                    }}</span>
+
+                    <a
+                      v-if="showEditLinks(authority?.email)"
+                      class="editField mt-n1"
+                      @click="toggleEdit"
+                    >+Email</a>
+                  </div>
+                  <v-text-field
+                    v-else
+                    id="emailField"
+                    v-model="authorityCopy.email"
+                    label="Email"
+                    variant="underlined"
+                    class="py-0"
+                    required
+                    :rules="[rules.email(), rules.required()]"
+                    :maxlength="255"
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+
+          <v-row
+            no-gutters
+            class="mt-6 d-flex justify-start"
+          >
+            <v-col
+              cols="12"
+              class="d-flex justify-start"
+            >
+              <h3 class="subHeading pt-4">
+                Addresses
+              </h3>
+            </v-col>
+          </v-row>
+          <div v-if="!editing">
+            <v-row
+              v-if="!hasMailingAddress() && !editing"
+              no-gutters
+              class="d-flex justify-start"
+            >
+              <v-col>
+                <a
+                  class="editField"
+                  @click="toggleEdit"
+                >+Address</a>
+              </v-col>
+            </v-row>
+            <v-row
+              v-else
+              no-gutters
+              class="d-flex justify-start"
+            >
+              <v-col cols="3">
+                <v-row>
+                  <v-col>
+                    <v-icon
+                      class="pb-1 mr-1"
+                      right
+                    >
+                      mdi-email-outline
+                    </v-icon>
+                    <span style="color: grey">Mailing Address</span>
+                  </v-col>
+                </v-row>
+                <v-row
+                  v-if="!editing"
+                  no-gutters
+                >
+                  <v-col v-if="hasMailingAddress()">
+                    <v-row
+                      class="ml-6"
+                      no-gutters
+                    >
+                      <v-col>
+                        <span style="word-break: break-all;">{{
+                          getMailingAddressItem('addressLine1')
+                        }}</span>
+                      </v-col>
+                    </v-row>
+                    <v-row no-gutters>
+                      <v-col class="ml-6">
+                        <span style="word-break: break-all;">{{
+                          getMailingAddressItem('addressLine2')
+                        }}</span>
+                      </v-col>
+                    </v-row>
+                    <v-row no-gutters>
+                      <v-col class="ml-6">
+                        <span style="word-break: break-all;">{{
+                          getMailingAddressItem('city') + ', ' +
+                            getMailingAddressItem('provinceCode')
+                            + ', ' + getMailingAddressItem('countryCode')
+                        }}</span>
+                      </v-col>
+                    </v-row>
+                    <v-row no-gutters>
+                      <v-col class="ml-6">
+                        <span style="word-break: break-all;">{{
+                          getMailingAddressItem('postal')
+                        }}</span>
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </v-row>
+              </v-col> 
+              <v-col
+                v-if="showPhysicalAddress"
+                cols="3"
+              >
+                <v-row>
+                  <v-col>
+                    <v-icon
+                      class="pb-1 mr-1"
+                      right
+                    >
+                      mdi-home-outline
+                    </v-icon>
+                    <span style="color: grey">Physical Address</span>
+                  </v-col>
+                </v-row>
+                <v-row
+                  v-if="!hasSamePhysicalAddress && !editing"
+                  no-gutters
+                >
+                  <v-col>
+                    <v-row no-gutters>
+                      <v-col class="ml-6">
+                        <span style="word-break: break-all;">{{
+                          getPhysicalAddressItem('addressLine1')
+                        }}</span>
+                      </v-col>
+                    </v-row>
+                    <v-row no-gutters>
+                      <v-col class="ml-6">
+                        <span style="word-break: break-all;">{{
+                          getPhysicalAddressItem('addressLine2')
+                        }}</span>
+                      </v-col>
+                    </v-row>
+                    <v-row no-gutters>
+                      <v-col class="ml-6">
+                        <span style="word-break: break-all;">{{
+                          getPhysicalAddressItem('city') + ', ' +
+                            getPhysicalAddressItem('provinceCode') + ', ' +
+                            getPhysicalAddressItem('countryCode')
+                        }}</span>
+                      </v-col>
+                    </v-row>
+                    <v-row no-gutters>
+                      <v-col class="ml-6">
+                        <span style="word-break: break-all;">{{
+                          getPhysicalAddressItem('postal')
+                        }}</span>
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </v-row>
+
+                <v-row
+                  v-else
+                  no-gutters
+                >
+                  <v-col>
+                    <v-row
+                      class="ml-6"
+                      no-gutters
+                    >
+                      <v-col
+                        v-if="sameAsMailingCheckbox && !editing"
+                        class="fontItalic"
+                      >
+                        <span>Same as Mailing Address</span>
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+          </div>
+
+          <div v-else>
+            <v-row no-gutters>
+              <v-col>
+                <v-row
+                  no-gutters
+                  class="mt-3"
+                >
+                  <v-col cols="4">
+                    <h3>Mailing Address</h3>
+                  </v-col>
+                </v-row>
+
+                <v-row>
+                  <v-col cols="4">
+                    <v-text-field
+                      id="mailAddressLine1"
+                      v-model="getMailingAddressCopy()[0].addressLine1"
+                      required
+                      label="Line 1"
+                      variant="underlined"
+                      :rules="[rules.required(), rules.noSpecialCharactersAddress()]"
+                      :maxlength="255"
+                      class="pb-5"
+                      hide-details="auto"
+                    />
+                  </v-col>
+
+                  <v-col cols="4">
+                    <v-text-field
+                      id="mailAddressLine2"
+                      v-model="getMailingAddressCopy()[0].addressLine2"
+                      variant="underlined"
+                      label="Line 2"
+                      :rules="[rules.noSpecialCharactersAddress()]"
+                      :maxlength="255"
+                      class="pb-5"
+                      hide-details="auto"
+                    />
+                  </v-col>
+
+                  <v-col cols="4">
+                    <v-text-field
+                      id="mailAddressCity"
+                      v-model="getMailingAddressCopy()[0].city"
+                      required
+                      label="City"
+                      variant="underlined"
+                      :rules="[rules.required(), rules.noSpecialCharactersAddress()]"
+                      :maxlength="255"
+                      class="pb-5"
+                      hide-details="auto"
+                    />
+                  </v-col>
+                </v-row>
+
+                <v-row>
+                  <v-col cols="4">
+                    <v-select
+                      id="mailAddressProvince"
+                      v-model="getMailingAddressCopy()[0].provinceCode"
+                      :items="provinceCodeValues"
+                      item-title="label"
+                      item-value="provinceCode"
+                      dense
+                      label="Province"
+                      variant="underlined"
+                      :rules="[rules.required()]"
+                      required
+                      style="color: black"
+                    />
+                  </v-col>
+
+
+                  <v-col cols="4">
+                    <v-select
+                      id="mailAddressCountry"
+                      v-model="getMailingAddressCopy()[0].countryCode"
+                      :items="countryCodeValues"
+                      item-title="label"
+                      item-value="countryCode"
+                      :rules="[rules.required()]"
+                      label="Country"
+                      dense
+                      variant="underlined"
+                      style="color: black"
+                    />
+                  </v-col>
+
+                  <v-col cols="4">
+                    <v-text-field
+                      id="mailAddressPostal"
+                      v-model="getMailingAddressCopy()[0].postal"
+                      :maxlength="6"
+                      label="Postal Code"
+                      required
+                      :rules="[rules.required(), rules.postalCode()]"
+                      variant="underlined"
+                    />
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+
+            <v-row v-if="showPhysicalAddress">
+              <v-col>
+                <v-row
+                  no-gutters
+                  class="mt-5"
+                >
+                  <v-col cols="4">
+                    <h3>Physical Address</h3>
+                  </v-col>
+                </v-row>
+
+                <v-row
+                  v-if="!sameAsMailingCheckbox"
+                  no-gutters
+                >
+                  <v-col>
+                    <v-row>
+                      <v-col cols="4">
+                        <v-text-field
+                          id="physicalAddressLine1"
+                          v-model="getPhysicalAddressCopy()[0].addressLine1"
+                          required
+                          label="Line 1"
+                          variant="underlined"
+                          :rules="[rules.required(), rules.noSpecialCharactersAddress()]"
+                          :maxlength="255"
+                          class="pb-5"
+                          hide-details="auto"
+                        />
+                      </v-col>
+
+                      <v-col cols="4">
+                        <v-text-field
+                          id="physicalAddressLine2"
+                          v-model="getPhysicalAddressCopy()[0].addressLine2"
+                          :maxlength="255"
+                          label="Line 2"
+                          variant="underlined"
+                          :rules="[rules.noSpecialCharactersAddress()]"
+                          class="pb-5"
+                          hide-details="auto"
+                        />
+                      </v-col>
+
+                      <v-col cols="4">
+                        <v-text-field
+                          id="physicalAddressCity"
+                          v-model="getPhysicalAddressCopy()[0].city"
+                          required
+                          label="City"
+                          variant="underlined"
+                          :rules="[rules.required(), rules.noSpecialCharactersAddress()]"
+                          :maxlength="255"
+                          class="pb-5"
+                          hide-details="auto"
+                        />
+                      </v-col>
+                    </v-row>
+
+                    <v-row>
+                      <v-col cols="4">
+                        <v-select
+                          id="physicalAddressProvince"
+                          v-model="getPhysicalAddressCopy()[0].provinceCode"
+                          label="Province"
+                          :items="provinceCodeValues"
+                          item-title="label"
+                          item-value="provinceCode"
+                          dense
+                          variant="underlined"
+                          required
+                          :rules="[rules.required()]"
+                          style="color: black"
+                        />
+                      </v-col>
+
+                      <v-col cols="4">
+                        <v-select
+                          id="physicalAddressCountry"
+                          v-model="getPhysicalAddressCopy()[0].countryCode"
+                          label="Country"
+                          :items="countryCodeValues"
+                          item-title="label"
+                          item-value="countryCode"
+                          dense
+                          variant="underlined"
+                          :rules="[rules.required()]"
+                          required
+                          style="color: black"
+                        />
+                      </v-col>
+
+                      <v-col cols="4">
+                        <v-text-field
+                          id="physicalAddressPostal"
+                          v-model="getPhysicalAddressCopy()[0].postal"
+                          required
+                          label="Postal Code"
+                          :rules="[rules.required(), rules.postalCode()]"
+                          :maxlength="6"
+                          variant="underlined"
+                        />
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+
+            <v-row v-if="showPhysicalAddress" no-gutters>
+              <v-col>
+                <v-checkbox
+                  id="sameAsMailingCheckbox"
+                  v-model="sameAsMailingCheckbox"
+                  dense
+                  label="Same as Mailing Address"
+                  class="mt-n3 pt-0"
+                  @update:model-value="clickSameAsAddressButton"
+                />
+              </v-col>
+            </v-row>
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-dialog
+      v-model="openAuthorityStatusEditCard"
+      inset
+      no-click-animation
+      scrollable
+      persistent
+      width="50%"
+    >
+      <AuthorityStatus
+        v-if="openAuthorityStatusEditCard"
+        :authority-open-date="authorityCopy.openedDate"
+        :authority-close-date="authorityCopy.closedDate"
+        :authority-status="authorityCopy.status"
+        :authority-has-open-schools="authorityHasOpenSchools"
+        :date-of-last-school-closure="closedDateOfLastClosingSchool"
+        :list-of-open-schools="listOfOpenSchools"
+        :list-of-closing-schools="listOfClosingSchools"
+        @update-authority-dates="handleUpdatesToAuthorityStatus"
+        @authority-status:close-edit-authority-status-page="openAuthorityStatusEditCard = !openAuthorityStatusEditCard"
+      />
+    </v-dialog>
+  </v-form>
+</template>
+  
+<script>
+
+import ApiService from '../../../common/apiService';
+import { Routes } from '@/utils/constants';
+import alertMixin from '@/mixins/alertMixin';
+import PrimaryButton from '@/components/util/PrimaryButton.vue';
+import { formatPhoneNumber, formatDate } from '@/utils/format';
+import { getStatusColorAuthorityOrSchool, getStatusAuthorityOrSchool } from '@/utils/institute/status';
+import { mapState } from 'pinia';
+import router from '@/router';
+import { deepCloneObject } from '@/utils/common';
+import * as Rules from '@/utils/institute/formRules';
+import AuthorityStatus from '@/components/institute/AuthorityStatus.vue';
+import { isEmpty, omitBy } from 'lodash';
+import { authStore } from '@/store/modules/auth';
+import { instituteStore } from '@/store/modules/institute';
+
+export default {
+  name: 'Details',
+  components: {
+    AuthorityStatus,
+    PrimaryButton
+  },
+  mixins: [alertMixin],
+  props: {
+    authorityID: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      sameAsMailingCheckbox: true,
+      editing: false,
+      authority: null,
+      authorityFormValid: false,
+      authorityCopy: null,
+      loading: false,
+      noteRequestCount: 0,
+      openAuthorityStatusEditCard: false,
+      authorityHasOpenSchools: false,
+      closedDateOfLastClosingSchool: null,
+      rules: Rules,
+      authorityTypes: [],
+      provinceCodeValues: [],
+      countryCodeValues: [],
+      listOfOpenSchools: [],
+      listOfClosingSchools: [],
+      excludeShowingPhysicalAddressesForAuthoritiesOfType: [
+        'OFFSHORE',
+      ],
+
+    };
+  },
+  computed: {
+    ...mapState(instituteStore, ['authorityTypeCodes', 'provinceCodes', 'countryCodes']),
+    ...mapState(authStore, ['INDEPENDENT_AUTHORITY_ADMIN_ROLE', 'INDEPENDENT_SCHOOLS_ADMIN_ROLE', 'OFFSHORE_SCHOOLS_ADMIN_ROLE']),
+    notesLoading() {
+      return this.noteRequestCount > 0;
+    },
+    hasSamePhysicalAddress() {
+      return !this.authority?.addresses.filter(address => address.addressTypeCode === 'PHYSICAL').length > 0;
+    },
+    showPhysicalAddress() {
+      if (this.editing) {
+        return !this.excludeShowingPhysicalAddressesForAuthoritiesOfType.includes(this.authorityCopy?.authorityTypeCode);
+      }
+      return !this.excludeShowingPhysicalAddressesForAuthoritiesOfType.includes(this.authority?.authorityTypeCode);
+    }
+  },
+  created() {
+    const instStore = instituteStore();
+    instStore.getAllProvinceCodes().then(() => {
+      this.provinceCodeValues = this.provinceCodes.filter(province => province.provinceCode === 'BC' || province.provinceCode === 'YT');
+    });
+    instStore.getAllCountryCodes().then(() => {
+      this.countryCodeValues = this.countryCodes;
+    });
+    instStore.getAllAuthorityTypeCodes().then(() => {
+      this.authorityTypes = this.authorityTypeCodes;
+    });
+    this.getAuthority();
+    this.determineIfAuthorityHasAnyOpenSchools();
+    this.findClosedDateOfLastClosingSchool();
+  },
+  methods: {
+    formatPhoneNumber,
+    formatDate,
+    getStatusColorAuthorityOrSchool,
+    populateExtraAuthorityFields(authority) {
+      authority.status = getStatusAuthorityOrSchool(authority);
+      authority.type = this.getAuthorityType(authority);
+    },
+    isNumber: function (evt) {
+      let charCode = (evt.which) ? evt.which : evt.keyCode;
+      if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
+        evt.preventDefault();
+      } else {
+        return true;
+      }
+    },
+    getAuthority() {
+      this.loading = true;
+
+      ApiService.apiAxios.get(Routes.institute.AUTHORITY_DATA_URL + '/' + this.authorityID, {}).then(response => {
+        this.authority = response.data;
+        this.populateExtraAuthorityFields(this.authority);
+      }).catch(error => {
+        console.error(error);
+      }).finally(() => {
+        this.setHasSamePhysicalFlag();
+        this.loading = false;
+      });
+    },
+    determineIfAuthorityHasAnyOpenSchools() {
+      this.loading = true;
+      ApiService.apiAxios.get(Routes.institute.SCHOOL_PAGINATED_DATA_URL, {
+        params: {
+          pageNumber: 0,
+          pageSize: 100,
+          searchParams: omitBy({
+            status: 'isOpenOrOpening',
+            authorityID: this.authorityID,
+          }, isEmpty),
+        }
+      }).then(response => {
+        this.listOfOpenSchools = response.data.content;
+        this.authorityHasOpenSchools = response.data.content.length > 0;
+      }).catch(error => {
+        console.error(error);
+        this.setFailureAlert(error?.response?.data?.message ? error?.response?.data?.message : 'An error occurred while trying to determine if the authority has any open schools. Please try again later.');
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    cancelEdit() {
+      this.editing = !this.editing;
+      this.setHasSamePhysicalFlag();
+    },
+    findClosedDateOfLastClosingSchool() {
+      this.loading = true;
+      ApiService.apiAxios.get(Routes.institute.SCHOOL_PAGINATED_DATA_URL, {
+        params: {
+          pageNumber: 0,
+          pageSize: 100,
+          sort: {
+            closedDate: 'DESC'
+          },
+          searchParams: omitBy({
+            authorityID: this.authorityID,
+            status: 'Closing'
+          }, isEmpty),
+        }
+      }).then(response => {
+        this.listOfClosingSchools = response.data.content;
+        this.closedDateOfLastClosingSchool = response.data.content[0] ? response.data.content[0].closedDate : null;
+      }).catch(error => {
+        console.error(error);
+        this.setFailureAlert(error?.response?.data?.message ? error?.response?.data?.message : 'An error occurred while trying to find the closed date of the last closing school. Please try again later.');
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    backButtonClick() {
+      router.push({ name: 'instituteAuthoritiesList' });
+    },
+    deepCloneObject,
+    addAddressesIfRequired(authority) {
+      let addresses = authority?.addresses;
+      if (!this.hasMailingAddress()) {
+        addresses.push({
+          'createUser': null,
+          'updateUser': null,
+          'createDate': null,
+          'updateDate': null,
+          'addressId': null,
+          'schoolId': null,
+          'districtId': null,
+          'independentAuthorityId': null,
+          'phoneNumber': null,
+          'email': null,
+          'addressLine1': null,
+          'addressLine2': null,
+          'city': null,
+          'postal': null,
+          'addressTypeCode': 'MAILING',
+          'provinceCode': null,
+          'countryCode': null
+        });
+      }
+      if (!this.hasPhysicalAddress()) {
+        addresses.push({
+          'createUser': null,
+          'updateUser': null,
+          'createDate': null,
+          'updateDate': null,
+          'addressId': null,
+          'schoolId': null,
+          'districtId': null,
+          'independentAuthorityId': null,
+          'phoneNumber': null,
+          'email': null,
+          'addressLine1': null,
+          'addressLine2': null,
+          'city': null,
+          'postal': null,
+          'addressTypeCode': 'PHYSICAL',
+          'provinceCode': null,
+          'countryCode': null
+        });
+      }
+    },
+    canEditAuthorities() {
+      if (this.authority?.authorityTypeCode && this.authority?.authorityTypeCode === 'INDEPENDNT') {
+        return this.INDEPENDENT_AUTHORITY_ADMIN_ROLE || this.INDEPENDENT_SCHOOLS_ADMIN_ROLE;
+      } else if (this.authority?.authorityTypeCode && this.authority?.authorityTypeCode === 'OFFSHORE') {
+        return this.INDEPENDENT_AUTHORITY_ADMIN_ROLE || this.OFFSHORE_SCHOOLS_ADMIN_ROLE;
+      }
+      return this.INDEPENDENT_AUTHORITY_ADMIN_ROLE;
+    },
+    setHasSamePhysicalFlag() {
+      this.sameAsMailingCheckbox = this.hasSamePhysicalAddress;
+    },
+    async clickSameAsAddressButton() {
+      await this.$nextTick();
+      this.$refs.authorityForm.validate();
+    },
+    showEditLinks(fieldValue) {
+      return this.canEditAuthorities() && !fieldValue;
+    },
+    saveAuthority() {
+      if (this.sameAsMailingCheckbox) {
+        this.authorityCopy.addresses = this.authorityCopy.addresses.filter(address => address.addressTypeCode === 'MAILING');
+      }
+      this.$emit('updateAuthority', this.authorityCopy);
+    },
+    async toggleEdit() {
+      this.authorityCopy = this.deepCloneObject(this.authority);
+      this.addAddressesIfRequired(this.authorityCopy);
+      this.editing = !this.editing;
+      await this.$nextTick();
+      await this.$refs.authorityForm.validate();
+    },
+    getAuthorityType(authority) {
+      return this.authorityTypes.find((autorityType) => autorityType.authorityTypeCode === authority?.authorityTypeCode).label;
+    },
+    hasMailingAddress() {
+      return this.authority?.addresses.filter(address => address.addressTypeCode === 'MAILING').length > 0;
+    },
+    hasPhysicalAddress() {
+      return this.authority?.addresses.filter(address => address.addressTypeCode === 'PHYSICAL').length > 0;
+    },
+    getMailingAddress() {
+      return this.authority?.addresses.filter(address => address.addressTypeCode === 'MAILING');
+    },
+    getPhysicalAddress() {
+      return this.authority?.addresses.filter(address => address.addressTypeCode === 'PHYSICAL');
+    },
+    getMailingAddressCopy() {
+      return this.authorityCopy.addresses.filter(address => address.addressTypeCode === 'MAILING');
+    },
+    getPhysicalAddressCopy() {
+      return this.authorityCopy.addresses.filter(address => address.addressTypeCode === 'PHYSICAL');
+    },
+    getMailingAddressItem(item) {
+      let mailingAddress = this.authority?.addresses.filter(address => address.addressTypeCode === 'MAILING');
+      for (const x in mailingAddress[0]) {
+        if (x === item) {
+          return mailingAddress[0][item];
+        }
+      }
+    },
+    getPhysicalAddressItem(item) {
+      let physicalAddress = this.authority?.addresses.filter(address => address.addressTypeCode === 'PHYSICAL');
+      for (const x in physicalAddress[0]) {
+        if (x === item) {
+          return physicalAddress[0][item];
+        }
+      }
+    },
+    openAuthorityStatusEdit() {
+      this.openAuthorityStatusEditCard = true;
+    },
+    async handleUpdatesToAuthorityStatus(updatedDatesForAuthority) {
+      await this.$nextTick();
+      if (updatedDatesForAuthority.openedDate) {
+        this.authorityCopy.openedDate = updatedDatesForAuthority.openedDate;
+      } else {
+        this.authorityCopy.openedDate = null;
+      }
+      if (updatedDatesForAuthority.closedDate) {
+        this.authorityCopy.closedDate = updatedDatesForAuthority.closedDate;
+      } else {
+        this.authorityCopy.closedDate = null;
+      }
+      this.authorityCopy.status = getStatusAuthorityOrSchool(this.authorityCopy);
+      this.$refs.authorityForm.validate();
+    },       
+  }
+};
+</script>
+  
+<style scoped>
+.divider {
+    border-color: #FCBA19;
+    border-width: 3px;
+    opacity: unset;
+}
+
+.sheetHeader {
+    background-color: #003366;
+    color: white;
+    font-size: medium !important;
+    font-weight: bolder !important;
+}
+
+.fontItalic {
+    font-style: italic;
+}
+
+.containerSetup {
+    padding-right: 24em !important;
+    padding-left: 24em !important;
+}
+
+.editField {
+    font-size: 14px;
+    color: rgb(0, 51, 102);
+}
+
+.editField:hover {
+    text-decoration: underline;
+}
+
+.subHeading {
+    color: #38598a;
+}
+</style>
+  
diff --git a/frontend/src/components/institute/EditAuthorityContactPage.vue b/frontend/src/components/institute/authority/EditAuthorityContactPage.vue
similarity index 82%
rename from frontend/src/components/institute/EditAuthorityContactPage.vue
rename to frontend/src/components/institute/authority/EditAuthorityContactPage.vue
index 2130a662a..83d6aa67a 100644
--- a/frontend/src/components/institute/EditAuthorityContactPage.vue
+++ b/frontend/src/components/institute/authority/EditAuthorityContactPage.vue
@@ -104,29 +104,25 @@
             </v-row>
             <v-row>
               <v-col cols="6">
-                <v-text-field
+                <DatePicker
                   id="editAuthorityContactEffectiveDateTextField"
                   v-model="editContact.effectiveDate"
-                  :rules="[rules.required()]"
-                  class="pt-0 mt-0"
                   label="Start Date"
-                  variant="underlined"
-                  clearable
-                  type="date"
+                  :rules="[rules.required()]"
+                  model-type="yyyy-MM-dd'T'00:00:00"
                   @update:model-value="validateForm"
+                  @clear-date="clearEffectiveDate"
                 />
               </v-col>
               <v-col cols="6">
-                <v-text-field
+                <DatePicker
                   id="editAuthorityContactExpiryDateTextField"
                   v-model="editContact.expiryDate"
-                  :rules="[rules.endDateRule(editContact.effectiveDate, editContact.expiryDate)]"
-                  class="pt-0 mt-0"
-                  variant="underlined"
                   label="End Date"
-                  clearable
-                  type="date"
+                  :rules="[rules.endDateRule(editContact.effectiveDate, editContact.expiryDate)]"
+                  model-type="yyyy-MM-dd'T'00:00:00"
                   @update:model-value="validateForm"
+                  @clear-date="clearExpiryDate"
                 />
               </v-col>
             </v-row>
@@ -145,30 +141,30 @@
         id="saveChangesToAuthorityContactButton"
         text="Save"
         width="7rem"
-        @click-action="saveChangesToAuthorityContact"
         :disabled="!isFormValid"
         :loading="processing"
+        @click-action="saveChangesToAuthorityContact"
       />
     </v-card-actions>
   </v-card>
 </template>
 
 <script>
-import PrimaryButton from '../util/PrimaryButton.vue';
+import PrimaryButton from '../../util/PrimaryButton.vue';
 import {mapState} from 'pinia';
 import alertMixin from '@/mixins/alertMixin';
 import ApiService from '@/common/apiService';
 import {Routes} from '@/utils/constants';
 import * as Rules from '@/utils/institute/formRules';
 import {isNumber} from '@/utils/institute/formInput';
-import {formatDate, formatDisplayDate} from '@/utils/format';
-import {parseDate} from '@/utils/dateHelpers';
 import {authStore} from '@/store/modules/auth';
 import _ from 'lodash';
+import DatePicker from '@/components/util/DatePicker.vue';
 
 export default {
   name: 'EditAuthorityContactPage',
   components: {
+    DatePicker,
     PrimaryButton,
   },
   mixins: [alertMixin],
@@ -188,40 +184,28 @@ export default {
   },
   data() {
     let clonedContact = _.cloneDeep(this.contact);
-    clonedContact.effectiveDate = this.parseDate(formatDate(clonedContact.effectiveDate));
-    clonedContact.expiryDate = this.parseDate(formatDate(clonedContact.expiryDate));
     return {
       isFormValid: false,
       processing: false,
       editContact: clonedContact,
-      rules: Rules,
-      editAuthorityContactEffectiveDatePicker: null,
-      editAuthorityContactExpiryDatePicker: null
+      rules: Rules
     };
   },
-  mounted() {
-    this.validateForm();
-  },
   computed: {
     ...mapState(authStore, ['isAuthenticated', 'userInfo']),
-    authorityContactEffectiveDateFormatted: {
-      get() {
-        return this.formatDisplayDate(this.editContact.effectiveDate);
-      },
-      set(newValue) {
-        this.editContact.effectiveDate = this.parseDate(newValue);
-      }
-    },
-    authorityContactExpiryDateFormatted: {
-      get() {
-        return this.formatDisplayDate(this.editContact.expiryDate);
-      },
-      set(newValue) {
-        this.editContact.expiryDate = this.parseDate(newValue);
-      }
-    }
+  },
+  mounted() {
+    this.validateForm();
   },
   methods: {
+    clearEffectiveDate() {
+      this.editContact.effectiveDate = null;
+      this.validateForm();
+    },
+    clearExpiryDate() {
+      this.editContact.expiryDate = null;
+      this.validateForm();
+    },
     cancelEditAuthorityContactPage() {
       this.resetForm();
       this.$emit('editAuthorityContact:cancelEditAuthorityContactPage');
@@ -253,18 +237,7 @@ export default {
       const isValid = await this.$refs.editAuthorityContactForm.validate();
       this.isFormValid = isValid.valid;
     },
-    isNumber,
-    formatDate,
-    formatDisplayDate,
-    parseDate
-  },
-  watch: {
-    //watching effective date to valid form because we need to cross validate expiry and effective date fields
-    'editContact.effectiveDate': {
-      handler() {
-        this.validateForm();
-      }
-    }
+    isNumber
   }
 };
 </script>
diff --git a/frontend/src/components/institute/NewAuthorityContactPage.vue b/frontend/src/components/institute/authority/NewAuthorityContactPage.vue
similarity index 87%
rename from frontend/src/components/institute/NewAuthorityContactPage.vue
rename to frontend/src/components/institute/authority/NewAuthorityContactPage.vue
index 474941bd6..20c58f8d1 100644
--- a/frontend/src/components/institute/NewAuthorityContactPage.vue
+++ b/frontend/src/components/institute/authority/NewAuthorityContactPage.vue
@@ -104,28 +104,22 @@
             </v-row>
             <v-row>
               <v-col cols="6">
-                <v-text-field
+                <DatePicker
                   id="newContactEffectiveDateTextField"
                   v-model="newContact.effectiveDate"
-                  :rules="[rules.required()]"
-                  class="pt-0 mt-0"
-                  variant="underlined"
                   label="Start Date"
-                  type="date"
-                  clearable
+                  :rules="[rules.required()]"
+                  model-type="yyyy-MM-dd'T'00:00:00"
                   @update:model-value="validateForm"
                 />
               </v-col>
               <v-col cols="6">
-                <v-text-field
+                <DatePicker
                   id="newContactExpiryDateTextField"
                   v-model="newContact.expiryDate"
-                  :rules="[rules.endDateRule(newContact.effectiveDate, newContact.expiryDate)]"
-                  class="pt-0 mt-0"
-                  variant="underlined"
                   label="End Date"
-                  type="date"
-                  clearable
+                  :rules="[rules.endDateRule(newContact.effectiveDate, newContact.expiryDate)]"
+                  model-type="yyyy-MM-dd'T'00:00:00"
                   @update:model-value="validateForm"
                 />
               </v-col>
@@ -145,28 +139,30 @@
         id="newContactPostBtn"
         text="Save"
         width="7rem"
-        @click-action="addNewAuthorityContact"
         :disabled="!isFormValid"
         :loading="processing"
+        @click-action="addNewAuthorityContact"
       />
     </v-card-actions>
   </v-card>
 </template>
 
 <script>
-import PrimaryButton from '../util/PrimaryButton.vue';
+import PrimaryButton from '../../util/PrimaryButton.vue';
 import {mapState} from 'pinia';
 import alertMixin from '@/mixins/alertMixin';
 import ApiService from '@/common/apiService';
 import {Routes} from '@/utils/constants';
 import * as Rules from '@/utils/institute/formRules';
 import {isNumber} from '@/utils/institute/formInput';
-import {LocalDate} from '@js-joda/core';
+import {DateTimeFormatter, LocalDate} from '@js-joda/core';
 import {authStore} from '@/store/modules/auth';
+import DatePicker from '@/components/util/DatePicker.vue';
 
 export default {
   name: 'NewAuthorityContactPage',
   components: {
+    DatePicker,
     PrimaryButton,
   },
   mixins: [alertMixin],
@@ -193,29 +189,19 @@ export default {
         phoneExtension: null,
         alternatePhoneNumber: null,
         alternatePhoneExtension: null,
-        effectiveDate: LocalDate.now().toString(),
+        effectiveDate: LocalDate.now().atStartOfDay().format(DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss')).toString(),
         expiryDate: null
       },
-      rules: Rules,
-      effectiveDateFilter: false,
-      newContactEffectiveDatePicker: null,
-      expiryDateFilter: false,
-      newContactExpiryDatePicker: null
+      rules: Rules
     };
   },
-  mounted() {
-    this.validateForm();
-  },
   computed: {
     ...mapState(authStore, ['isAuthenticated', 'userInfo']),
   },
+  mounted() {
+    this.validateForm();
+  },
   methods: {
-    saveNewContactEffectiveDate(date) {
-      this.$refs.newContactEffectiveDateFilter.save(date);
-    },
-    saveNewContactExpiryDate(date) {
-      this.$refs.newContactExpiryDateFilter.save(date);
-    },
     closeNewContactPage() {
       this.resetForm();
       this.$emit('newAuthorityContact:closeNewAuthorityContactPage');
@@ -246,14 +232,6 @@ export default {
       this.isFormValid = isValid.valid;
     },
     isNumber,
-  },
-  watch: {
-    //watching effective date to valid form because we need to cross validate expiry and effective date fields
-    'newContact.effectiveDate': {
-      handler() {
-        this.validateForm();
-      }
-    }
   }
 };
 </script>
diff --git a/frontend/src/components/institute/common/Details.vue b/frontend/src/components/institute/common/Details.vue
index aabe5e863..cee7e1ca2 100644
--- a/frontend/src/components/institute/common/Details.vue
+++ b/frontend/src/components/institute/common/Details.vue
@@ -762,7 +762,7 @@
                     >
                       mdi-email-outline
                     </v-icon>
-                    <span>Mailing Address</span>
+                    <span style="color: grey">Mailing Address</span>
                   </v-col>
                 </v-row>
                 <v-row
@@ -771,7 +771,7 @@
                 >
                   <v-col>
                     <v-row
-                      class="ml-9"
+                      class="ml-6"
                       no-gutters
                     >
                       <v-col>
@@ -781,21 +781,21 @@
                       </v-col>
                     </v-row>
                     <v-row no-gutters>
-                      <v-col class="ml-9">
+                      <v-col class="ml-6">
                         <span style="word-break: break-all;">{{
                           getMailingAddressItem('addressLine2')
                         }}</span>
                       </v-col>
                     </v-row>
                     <v-row no-gutters>
-                      <v-col class="ml-9">
+                      <v-col class="ml-6">
                         <span style="word-break: break-all;">{{
                           getMailingAddressItem('city') + ', ' + getMailingAddressItem('provinceCode') + ', ' + getMailingAddressItem('countryCode')
                         }}</span>
                       </v-col>
                     </v-row>
                     <v-row no-gutters>
-                      <v-col class="ml-9">
+                      <v-col class="ml-6">
                         <span style="word-break: break-all;">{{
                           getMailingAddressItem('postal')
                         }}</span>
@@ -816,7 +816,7 @@
                     >
                       mdi-home-outline
                     </v-icon>
-                    <span>Physical Address</span>
+                    <span style="color: grey">Physical Address</span>
                   </v-col>
                 </v-row>
                 <v-row
@@ -825,28 +825,28 @@
                 >
                   <v-col>
                     <v-row no-gutters>
-                      <v-col class="ml-9">
+                      <v-col class="ml-6">
                         <span style="word-break: break-all;">{{
                           getPhysicalAddressItem('addressLine1')
                         }}</span>
                       </v-col>
                     </v-row>
                     <v-row no-gutters>
-                      <v-col class="ml-9">
+                      <v-col class="ml-6">
                         <span style="word-break: break-all;">{{
                           getPhysicalAddressItem('addressLine2')
                         }}</span>
                       </v-col>
                     </v-row>
                     <v-row no-gutters>
-                      <v-col class="ml-9">
+                      <v-col class="ml-6">
                         <span style="word-break: break-all;">{{
                           getPhysicalAddressItem('city') + ', ' + getPhysicalAddressItem('provinceCode') + ', ' + getPhysicalAddressItem('countryCode')
                         }}</span>
                       </v-col>
                     </v-row>
                     <v-row no-gutters>
-                      <v-col class="ml-9">
+                      <v-col class="ml-6">
                         <span style="word-break: break-all;">{{
                           getPhysicalAddressItem('postal')
                         }}</span>
@@ -1589,12 +1589,12 @@ export default {
     async handleUpdatesToSchoolStatus(updatedDatesForSchool) {
       await this.$nextTick();
       if (updatedDatesForSchool.openedDate) {
-        this.schoolDetailsCopy.openedDate = updatedDatesForSchool.openedDate?.replaceAll('/', '-').concat('T00:00:00');
+        this.schoolDetailsCopy.openedDate = updatedDatesForSchool.openedDate;
       } else {
         this.schoolDetailsCopy.openedDate = null;
       }
       if (updatedDatesForSchool.closedDate) {
-        this.schoolDetailsCopy.closedDate = updatedDatesForSchool.closedDate?.replaceAll('/', '-').concat('T00:00:00');
+        this.schoolDetailsCopy.closedDate = updatedDatesForSchool.closedDate;
       } else {
         this.schoolDetailsCopy.closedDate = null;
       }
diff --git a/frontend/src/components/institute/common/EditSchoolContactPage.vue b/frontend/src/components/institute/common/EditSchoolContactPage.vue
index a565dcefe..b8a592313 100644
--- a/frontend/src/components/institute/common/EditSchoolContactPage.vue
+++ b/frontend/src/components/institute/common/EditSchoolContactPage.vue
@@ -112,28 +112,25 @@
             </v-row>
             <v-row>
               <v-col cols="6">
-                <v-text-field
+                <DatePicker
                   id="editSchoolContactEffectiveDateTextField"
                   v-model="editContact.effectiveDate"
-                  :rules="[rules.required()]"
                   label="Start Date"
-                  clearable
-                  type="date"
-                  variant="underlined"
+                  :rules="[rules.required()]"
+                  model-type="yyyy-MM-dd'T'00:00:00"
                   @update:model-value="validateForm"
+                  @clear-date="clearEffectiveDate"
                 />
               </v-col>
               <v-col cols="6">
-                <v-text-field
+                <DatePicker
                   id="editSchoolContactExpiryDateTextField"
                   v-model="editContact.expiryDate"
-                  :rules="[rules.endDateRule(editContact.effectiveDate, editContact.expiryDate)]"
-                  class="pt-0 mt-0"
                   label="End Date"
-                  type="date"
-                  clearable
-                  variant="underlined"
+                  :rules="[rules.endDateRule(editContact.effectiveDate, editContact.expiryDate)]"
+                  model-type="yyyy-MM-dd'T'00:00:00"
                   @update:model-value="validateForm"
+                  @clear-date="clearExpiryDate"
                 />
               </v-col>
             </v-row>
@@ -152,9 +149,9 @@
         id="saveChangesToSchoolContactButton"
         text="Save"
         width="7rem"
-        @click-action="saveChangesToSchoolContact"
         :disabled="!isFormValid"
         :loading="processing"
+        @click-action="saveChangesToSchoolContact"
       />
     </v-card-actions>
   </v-card>
@@ -168,14 +165,14 @@ import ApiService from '@/common/apiService';
 import {Routes} from '@/utils/constants';
 import * as Rules from '@/utils/institute/formRules';
 import {isNumber} from '@/utils/institute/formInput';
-import {formatDate, formatDisplayDate} from '@/utils/format';
-import {parseDate} from '@/utils/dateHelpers';
 import {authStore} from '@/store/modules/auth';
 import _ from 'lodash';
+import DatePicker from '@/components/util/DatePicker.vue';
 
 export default {
   name: 'EditSchoolContactPage',
   components: {
+    DatePicker,
     PrimaryButton,
   },
   mixins: [alertMixin],
@@ -193,42 +190,32 @@ export default {
       required: true
     }
   },
+  emits: ['editSchoolContact:editSchoolContactSuccess', 'editSchoolContact:cancelEditSchoolContactPage'],
   data() {
     let clonedContact = _.cloneDeep(this.contact);
-    clonedContact.effectiveDate = this.parseDate(formatDate(clonedContact.effectiveDate));
-    clonedContact.expiryDate = this.parseDate(formatDate(clonedContact.expiryDate));
     return {
       isFormValid: false,
       processing: false,
       editContact: clonedContact,
-      rules: Rules,
-      editSchoolContactEffectiveDatePicker: null,
-      editSchoolContactExpiryDatePicker: null
+      rules: Rules
     };
   },
-  mounted() {
-    this.validateForm();
-  },
   computed: {
     ...mapState(authStore, ['isAuthenticated', 'userInfo']),
-    schoolContactEffectiveDateFormatted: {
-      get() {
-        return this.formatDisplayDate(this.editContact.effectiveDate);
-      },
-      set(newValue) {
-        this.editContact.effectiveDate = this.parseDate(newValue);
-      }
-    },
-    schoolContactExpiryDateFormatted: {
-      get() {
-        return this.formatDisplayDate(this.editContact.expiryDate);
-      },
-      set(newValue) {
-        this.editContact.expiryDate = this.parseDate(newValue);
-      }
-    }
+  },
+
+  mounted() {
+    this.validateForm();
   },
   methods: {
+    clearEffectiveDate() {
+      this.editContact.effectiveDate = null;
+      this.validateForm();
+    },
+    clearExpiryDate() {
+      this.editContact.expiryDate = null;
+      this.validateForm();
+    },
     cancelEditSchoolContactPage() {
       this.resetForm();
       this.$emit('editSchoolContact:cancelEditSchoolContactPage');
@@ -253,9 +240,6 @@ export default {
           this.processing = false;
         });
     },
-    saveEditSchoolContactExpiryDate(date) {
-      this.$refs.editSchoolContactExpiryDateFilter.save(date);
-    },
     resetForm() {
       this.$refs.editSchoolContactForm.reset();
     },
@@ -265,18 +249,7 @@ export default {
         this.isFormValid = isValid.valid;
       }
     },
-    isNumber,
-    formatDate,
-    formatDisplayDate,
-    parseDate
-  },
-  watch: {
-    //watching effective date to valid form because we need to cross validate expiry and effective date fields
-    'editContact.effectiveDate': {
-      handler() {
-        this.validateForm();
-      }
-    }
+    isNumber
   }
 };
 </script>
diff --git a/frontend/src/components/institute/common/NewSchoolContactPage.vue b/frontend/src/components/institute/common/NewSchoolContactPage.vue
index 91b8b21ea..d4323c109 100644
--- a/frontend/src/components/institute/common/NewSchoolContactPage.vue
+++ b/frontend/src/components/institute/common/NewSchoolContactPage.vue
@@ -112,28 +112,22 @@
             </v-row>
             <v-row>
               <v-col cols="6">
-                <v-text-field
+                <DatePicker
                   id="newContactEffectiveDateTextField"
                   v-model="newContact.effectiveDate"
-                  :rules="[rules.required()]"
-                  class="pt-0 mt-0"
-                  variant="underlined"
                   label="Start Date"
-                  type="date"
-                  clearable
+                  :rules="[rules.required()]"
+                  model-type="yyyy-MM-dd'T'00:00:00"
                   @update:model-value="validateForm"
                 />
               </v-col>
               <v-col cols="6">
-                <v-text-field
+                <DatePicker
                   id="newContactExpiryDateTextField"
                   v-model="newContact.expiryDate"
-                  :rules="[rules.endDateRule(newContact.effectiveDate, newContact.expiryDate)]"
-                  class="pt-0 mt-0"
-                  variant="underlined"
                   label="End Date"
-                  type="date"
-                  clearable
+                  :rules="[rules.endDateRule(newContact.effectiveDate, newContact.expiryDate)]"
+                  model-type="yyyy-MM-dd'T'00:00:00"
                   @update:model-value="validateForm"
                 />
               </v-col>
@@ -153,9 +147,9 @@
         id="newContactPostBtn"
         text="Save"
         width="7rem"
-        @click-action="addNewSchoolContact"
         :disabled="!isFormValid"
         :loading="processing"
+        @click-action="addNewSchoolContact"
       />
     </v-card-actions>
   </v-card>
@@ -169,12 +163,14 @@ import ApiService from '@/common/apiService';
 import {Routes} from '@/utils/constants';
 import * as Rules from '@/utils/institute/formRules';
 import {isNumber} from '@/utils/institute/formInput';
-import {LocalDate} from '@js-joda/core';
+import {DateTimeFormatter, LocalDate} from '@js-joda/core';
 import {authStore} from '@/store/modules/auth';
+import DatePicker from '@/components/util/DatePicker.vue';
 
 export default {
   name: 'NewSchoolContactPage',
   components: {
+    DatePicker,
     PrimaryButton,
   },
   mixins: [alertMixin],
@@ -202,27 +198,19 @@ export default {
         phoneExtension: null,
         alternatePhoneNumber: null,
         alternatePhoneExtension: null,
-        effectiveDate: LocalDate.now().toString(),
+        effectiveDate: LocalDate.now().atStartOfDay().format(DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss')).toString(),
         expiryDate: null
       },
-      rules: Rules,
-      newContactEffectiveDatePicker: null,
-      newContactExpiryDatePicker: null
+      rules: Rules
     };
   },
-  mounted() {
-    this.validateForm();
-  },
   computed: {
     ...mapState(authStore, ['isAuthenticated', 'userInfo']),
   },
+  mounted() {
+    this.validateForm();
+  },
   methods: {
-    saveNewContactEffectiveDate(date) {
-      this.$refs.newContactEffectiveDateFilter.save(date);
-    },
-    saveNewContactExpiryDate(date) {
-      this.$refs.newContactExpiryDateFilter.save(date);
-    },
     closeNewContactPage() {
       this.resetForm();
       this.$emit('newSchoolContact:closeNewSchoolContactPage');
@@ -253,14 +241,6 @@ export default {
       this.isFormValid = isValid.valid;
     },
     isNumber,
-  },
-  watch: {
-    //watching effective date to valid form because we need to cross validate expiry and effective date fields
-    'newContact.effectiveDate': {
-      handler() {
-        this.validateForm();
-      }
-    }
   }
 };
 </script>
diff --git a/frontend/src/components/institute/common/SchoolContacts.vue b/frontend/src/components/institute/common/SchoolContacts.vue
index 5cd80a58c..4771d1d5d 100644
--- a/frontend/src/components/institute/common/SchoolContacts.vue
+++ b/frontend/src/components/institute/common/SchoolContacts.vue
@@ -46,9 +46,10 @@
       <div
         v-for="schoolContactType in schoolContactTypes"
         :key="schoolContactType.code"
+        class="pb-4"
       >
         <v-row>
-          <v-col>
+          <v-col class="pb-0">
             <h2 style="color:#1A5A96">
               {{
                 schoolContactType.label
@@ -60,7 +61,10 @@
           v-if="!schoolContactType.publiclyAvailable"
           cols="2"
         >
-          <v-col cols="12">
+          <v-col
+            class="pt-0"
+            cols="12"
+          >
             <v-alert
               :id="`publiclyAvailableAlert${schoolContactType.label}`"
               color="#003366"
@@ -81,6 +85,7 @@
           <v-col
             v-for="contact in schoolContacts.get(schoolContactType.schoolContactTypeCode)"
             :key="contact.schoolId"
+            class="pt-0"
             cols="5"
             lg="4"
           >
@@ -96,7 +101,7 @@
           v-else
           cols="2"
         >
-          <v-col>
+          <v-col class="pt-0">
             <p>No contacts of this type have been listed.</p>
           </v-col>
         </v-row>
diff --git a/frontend/src/components/institute/district/Details.vue b/frontend/src/components/institute/district/Details.vue
new file mode 100644
index 000000000..4977deb75
--- /dev/null
+++ b/frontend/src/components/institute/district/Details.vue
@@ -0,0 +1,936 @@
+<template>
+  <v-form
+    ref="districtDetailsForm"
+    v-model="districtDetailsFormValid"
+  >
+    <v-container fluid>
+      <v-row v-if="loading">
+        <v-col class="d-flex justify-center">
+          <v-progress-circular
+            class="mt-16"
+            :size="70"
+            :width="7"
+            color="primary"
+            indeterminate
+            :active="loading"
+          />
+        </v-col>
+      </v-row>
+      <v-row
+        v-else
+        no-gutters
+      >
+        <v-col>
+          <v-row class="d-flex justify-start">
+            <v-col
+              v-if="!editing"
+              class="d-flex justify-end"
+            >
+              <PrimaryButton
+                v-if="canEditDistrictDetails()"
+                id="districtDetailsEditButton"
+                icon-left
+                width="6em"
+                icon="mdi-pencil"
+                text="Edit"
+                @click-action="toggleEdit"
+              />
+            </v-col>
+            <v-col
+              v-else
+              class="d-flex justify-end"
+            >
+              <PrimaryButton
+                id="cancelButton"
+                class="mr-2"
+                secondary
+                icon-left
+                width="6em"
+                text="Cancel"
+                @click-action="cancelClicked"
+              />
+              <PrimaryButton
+                id="saveButton"
+                icon-left
+                width="6em"
+                text="Save"
+                :disabled="!districtDetailsFormValid"
+                @click-action="updateDistrictDetails"
+              />
+            </v-col>
+          </v-row>
+
+          <v-row
+            v-if="editing"
+            class="d-flex justify-start"
+          >
+            <v-col
+              cols="4"
+              lg="3"
+              class="pb-0 pt-0"
+            >
+              <v-text-field
+                v-model="districtDetailsCopy.displayName"
+                class="mt-n5"
+                label="District Name"
+                :maxlength="255"
+                :rules="[rules.required(), rules.noSpecialCharactersSchDisAuthName()]"
+                required
+                variant="underlined"
+              />
+            </v-col>
+          </v-row>
+
+          <v-row
+            no-gutters
+            class="d-flex justify-start"
+          >
+            <v-col
+              cols="12"
+              class="d-flex justify-start"
+            >
+              <h3 class="subHeading pt-2">
+                Contact Information
+              </h3>
+            </v-col>
+          </v-row>
+
+          <v-row class="d-flex justify-start">
+            <v-col
+              cols="2"
+              lg="2"
+              class="pt-0 pb-0"
+            >
+              <v-row
+                v-if="!editing"
+                no-gutters
+                class="d-flex justify-start"
+              >
+                <v-col
+                  cols="10"
+                  class="d-flex justify-start"
+                >
+                  <span style="color: grey">Phone</span>
+                </v-col>
+              </v-row>
+              <v-row no-gutters>
+                <v-col
+                  cols="10"
+                  class="d-flex justify-start"
+                >
+                  <div v-if="!editing">
+                    <span v-if="district.phoneNumber">{{
+                      formatPhoneNumber(district.phoneNumber)
+                    }}</span>
+                    <a
+                      v-if="showEditLinks(district.phoneNumber)"
+                      class="editField"
+                      @click="toggleEdit"
+                    >+Phone</a>
+                  </div>
+                  <v-text-field
+                    v-else
+                    id="districtDetailsPhoneNumber"
+                    v-model="districtDetailsCopy.phoneNumber"
+                    label="Phone"
+                    required
+                    :maxlength="10"
+                    variant="underlined"
+                    :rules="[rules.required(), rules.phoneNumber()]"
+                    @keypress="isNumber($event)"
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-col
+              cols="2"
+              lg="2"
+              class="pt-0 pb-0"
+            >
+              <v-row
+                v-if="!editing"
+                no-gutters
+                class="d-flex justify-start"
+              >
+                <v-col
+                  cols="10"
+                  class="d-flex justify-start"
+                >
+                  <span style="color: grey">Fax</span>
+                </v-col>
+              </v-row>
+              <v-row no-gutters>
+                <v-col
+                  cols="10"
+                  class="d-flex justify-start"
+                >
+                  <div v-if="!editing">
+                    <span v-if="district.faxNumber">{{
+                      formatPhoneNumber(district.faxNumber)
+                    }}</span>
+                    <a
+                      v-if="showEditLinks(district.faxNumber)"
+                      class="editField"
+                      @click="toggleEdit"
+                    >+Fax</a>
+                  </div>
+                  <v-text-field
+                    v-else
+                    id="districtDetailsFaxNumber"
+                    v-model="districtDetailsCopy.faxNumber"
+                    variant="underlined"
+                    label="Fax Number"
+                    :rules="[rules.phoneNumber('Fax number must be valid')]"
+                    :maxlength="10"
+                    @keypress="isNumber($event)"
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+            <v-col
+              cols="4"
+              lg="4"
+              class="pt-0 pb-0"
+            >
+              <v-row
+                v-if="!editing"
+                no-gutters
+                class="d-flex justify-start"
+              >
+                <v-col
+                  cols="10"
+                  class="d-flex justify-start"
+                >
+                  <span style="color: grey">Email</span>
+                </v-col>
+              </v-row>
+              <v-row no-gutters>
+                <v-col
+                  cols="10"
+                  class="d-flex justify-start"
+                >
+                  <div v-if="!editing">
+                    <span
+                      v-if="district.email"
+                      style="word-break: break-all;"
+                    >{{
+                      district.email
+                    }}</span>
+                    <a
+                      v-if="showEditLinks(district.email)"
+                      class="editField"
+                      @click="toggleEdit"
+                    >+Email</a>
+                  </div>
+                  <v-text-field
+                    v-else
+                    id="districtDetailsEmail"
+                    v-model="districtDetailsCopy.email"
+                    label="Email"
+                    required
+                    variant="underlined"
+                    :rules="[rules.email()]"
+                    :maxlength="255"
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+            <v-col
+              cols="4"
+              lg="4"
+              class="pt-0 pb-0"
+            >
+              <v-row
+                v-if="!editing"
+                no-gutters
+                class="d-flex justify-start"
+              >
+                <v-col
+                  cols="10"
+                  class="d-flex justify-start"
+                >
+                  <span style="color: grey">Website</span>
+                </v-col>
+              </v-row>
+              <v-row no-gutters>
+                <v-col
+                  cols="10"
+                  class="d-flex justify-start"
+                >
+                  <div v-if="!editing">
+                    <a
+                      v-if="cleanWebsiteUrl"
+                      style="word-break: break-all;"
+                      :href="cleanWebsiteUrl"
+                      target="_blank"
+                    >{{
+                      cleanWebsiteUrl
+                    }}</a>
+                    <a
+                      v-if="showEditLinks(cleanWebsiteUrl)"
+                      class="editField"
+                      @click="toggleEdit"
+                    >+Website</a>
+                  </div>
+                  <v-text-field
+                    v-if="editing"
+                    v-model="districtDetailsCopy.website"
+                    label="Website"
+                    :rules="[rules.website()]"
+                    variant="underlined"
+                    :maxlength="255"
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+
+          <v-row
+            no-gutters
+            class="mt-6 d-flex justify-start"
+          >
+            <v-col
+              cols="12"
+              class="d-flex justify-start"
+            >
+              <h3 class="subHeading pt-4">
+                Addresses
+              </h3>
+            </v-col>
+          </v-row>
+          <div v-if="!editing">
+            <v-row
+              v-if="!hasMailingAddress() && !editing"
+              no-gutters
+              class="mt-2 d-flex justify-start"
+            >
+              <v-col>
+                <a
+                  class="editField"
+                  @click="toggleEdit"
+                >+Address</a>
+              </v-col>
+            </v-row>
+            <v-row
+              v-else
+              no-gutters
+              class="d-flex justify-start mt-2"
+            >
+              <v-col
+                v-if="editing || hasMailingAddress()"
+                cols="3"
+              >
+                <v-row>
+                  <v-col>
+                    <v-icon
+                      class="pb-1 mr-1"
+                      right
+                    >
+                      mdi-email-outline
+                    </v-icon>
+                    <span style="color: grey">Mailing Address</span>
+                  </v-col>
+                </v-row>
+                <v-row
+                  v-if="!editing"
+                  no-gutters
+                >
+                  <v-col>
+                    <v-row
+                      class="ml-6"
+                      no-gutters
+                    >
+                      <v-col>
+                        <span style="word-break: break-all;">{{
+                          getMailingAddressItem('addressLine1')
+                        }}</span>
+                      </v-col>
+                    </v-row>
+                    <v-row no-gutters>
+                      <v-col class="ml-6">
+                        <span style="word-break: break-all;">{{
+                          getMailingAddressItem('addressLine2')
+                        }}</span>
+                      </v-col>
+                    </v-row>
+                    <v-row no-gutters>
+                      <v-col class="ml-6">
+                        <span style="word-break: break-all;">{{
+                          getMailingAddressItem('city') + ', ' +
+                            getMailingAddressItem('provinceCode')
+                            + ', '
+                            + getMailingAddressItem('countryCode')
+                        }}</span>
+                      </v-col>
+                    </v-row>
+                    <v-row no-gutters>
+                      <v-col class="ml-6">
+                        <span style="word-break: break-all;">{{
+                          getMailingAddressItem('postal')
+                        }}</span>
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </v-row>
+              </v-col>
+              <v-col cols="3">
+                <v-row>
+                  <v-col>
+                    <v-icon
+                      class="pb-1 mr-1"
+                      right
+                    >
+                      mdi-home-outline
+                    </v-icon>
+                    <span style="color: grey">Physical Address</span>
+                  </v-col>
+                </v-row>
+                <v-row
+                  v-if="!hasSamePhysicalAddress && !editing"
+                  no-gutters
+                >
+                  <v-col>
+                    <v-row no-gutters>
+                      <v-col class="ml-6">
+                        <span style="word-break: break-all;">{{
+                          getPhysicalAddressItem('addressLine1')
+                        }}</span>
+                      </v-col>
+                    </v-row>
+                    <v-row no-gutters>
+                      <v-col class="ml-6">
+                        <span style="word-break: break-all;">{{
+                          getPhysicalAddressItem('addressLine2')
+                        }}</span>
+                      </v-col>
+                    </v-row>
+                    <v-row no-gutters>
+                      <v-col class="ml-6">
+                        <span style="word-break: break-all;">{{
+                          getPhysicalAddressItem('city') + ', ' +
+                            getPhysicalAddressItem('provinceCode') + ',' +
+                            getPhysicalAddressItem('countryCode')
+                        }}</span>
+                      </v-col>
+                    </v-row>
+                    <v-row no-gutters>
+                      <v-col class="ml-6">
+                        <span style="word-break: break-all;">{{
+                          getPhysicalAddressItem('postal')
+                        }}</span>
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </v-row>
+                <v-row
+                  v-else
+                  no-gutters
+                >
+                  <v-col>
+                    <v-row
+                      class="ml-6"
+                      no-gutters
+                    >
+                      <v-col
+                        v-if="sameAsMailingCheckbox && !editing"
+                        class="fontItalic"
+                      >
+                        <span>Same as Mailing Address</span>
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+          </div>
+          <div v-else>
+            <v-row no-gutters>
+              <v-col>
+                <v-row
+                  no-gutters
+                  class="mt-3"
+                >
+                  <v-col cols="4">
+                    <h3>Mailing Address</h3>
+                  </v-col>
+                </v-row>
+
+                <v-row>
+                  <v-col cols="4">
+                    <v-text-field
+                      id="mailAddressLine1"
+                      v-model="getMailingAddressCopy()[0].addressLine1"
+                      required
+                      label="Line 1"
+                      :rules="[rules.required(), rules.noSpecialCharactersAddress()]"
+                      :maxlength="255"
+                      variant="underlined"
+                      class="pb-5"
+                      hide-details="auto"
+                    />
+                  </v-col>
+
+                  <v-col cols="4">
+                    <v-text-field
+                      id="mailAddressLine2"
+                      v-model="getMailingAddressCopy()[0].addressLine2"
+                      label="Line 2"
+                      :rules="[rules.noSpecialCharactersAddress()]"
+                      :maxlength="255"
+                      variant="underlined"
+                      class="pb-5"
+                      hide-details="auto"
+                    />
+                  </v-col>
+
+                  <v-col cols="4">
+                    <v-text-field
+                      id="mailAddressCity"
+                      v-model="getMailingAddressCopy()[0].city"
+                      required
+                      :rules="[rules.required(), rules.noSpecialCharactersAddress()]"
+                      :maxlength="255"
+                      variant="underlined"
+                      label="City"
+                      class="pb-5"
+                      hide-details="auto"
+                    />
+                  </v-col>
+                </v-row>
+
+
+
+                <v-row>
+                  <v-col cols="4">
+                    <v-select
+                      id="mailAddressProvince"
+                      v-model="getMailingAddressCopy()[0].provinceCode"
+                      :items="provinceCodeValues"
+                      item-title="label"
+                      item-value="provinceCode"
+                      variant="underlined"
+                      dense
+                      :rules="[rules.required()]"
+                      required
+                      label="Province"
+                      style="color: black"
+                    />
+                  </v-col>
+
+                  <v-col cols="4">
+                    <v-select
+                      id="mailAddressCountry"
+                      v-model="getMailingAddressCopy()[0].countryCode"
+                      :items="countryCodeValues"
+                      item-title="label"
+                      item-value="countryCode"
+                      variant="underlined"
+                      :rules="[rules.required()]"
+                      dense
+                      label="Country"
+                      style="color: black"
+                    />
+                  </v-col>
+
+                  <v-col cols="4">
+                    <v-text-field
+                      id="mailAddressPostal"
+                      v-model="getMailingAddressCopy()[0].postal"
+                      :maxlength="6"
+                      required
+                      :rules="[rules.required(), rules.postalCode()]"
+                      label="Postal Code"
+                      variant="underlined"
+                    />
+                  </v-col>
+                </v-row>
+
+
+                <v-row />
+              </v-col>
+            </v-row>
+
+            <v-row>
+              <v-col>
+                <v-row
+                  no-gutters
+                  class="mt-5"
+                >
+                  <v-col cols="4">
+                    <h3>Physical Address</h3>
+                  </v-col>
+                </v-row>
+                <v-row
+                  v-if="!sameAsMailingCheckbox"
+                  no-gutters
+                >
+                  <v-col>
+                    <v-row>
+                      <v-col cols="4">
+                        <v-text-field
+                          id="physicalAddressLine1"
+                          v-model="getPhysicalAddressCopy()[0].addressLine1"
+                          required
+                          :rules="[rules.required(), rules.noSpecialCharactersAddress()]"
+                          :maxlength="255"
+                          variant="underlined"
+                          label="Line 1"
+                          class="pb-5"
+                          hide-details="auto"
+                        />
+                      </v-col>
+
+                      <v-col cols="4">
+                        <v-text-field
+                          id="physicalAddressLine2"
+                          v-model="getPhysicalAddressCopy()[0].addressLine2"
+                          :rules="[rules.noSpecialCharactersAddress()]"
+                          :maxlength="255"
+                          variant="underlined"
+                          label="Line 2"
+                          class="pb-5"
+                          hide-details="auto"
+                        />
+                      </v-col>
+
+                      <v-col cols="4">
+                        <v-text-field
+                          id="physicalAddressCity"
+                          v-model="getPhysicalAddressCopy()[0].city"
+                          required
+                          :rules="[rules.required(), rules.noSpecialCharactersAddress()]"
+                          :maxlength="255"
+                          variant="underlined"
+                          label="City"
+                          class="pb-5"
+                          hide-details="auto"
+                        />
+                      </v-col>
+                    </v-row>
+
+                    <v-row>
+                      <v-col cols="4">
+                        <v-select
+                          id="physicalAddressProvince"
+                          v-model="getPhysicalAddressCopy()[0].provinceCode"
+                          :items="provinceCodeValues"
+                          item-title="label"
+                          item-value="provinceCode"
+                          dense
+                          required
+                          :rules="[rules.required()]"
+                          variant="underlined"
+                          label="Province"
+                          style="color: black"
+                        />
+                      </v-col>
+
+                      <v-col cols="4">
+                        <v-select
+                          id="physicalAddressCountry"
+                          v-model="getPhysicalAddressCopy()[0].countryCode"
+                          :items="countryCodeValues"
+                          item-title="label"
+                          item-value="countryCode"
+                          dense
+                          :rules="[rules.required()]"
+                          required
+                          variant="underlined"
+                          label="Country"
+                          style="color: black"
+                        />
+                      </v-col>
+
+                      <v-col cols="4">
+                        <v-text-field
+                          id="physicalAddressPostal"
+                          v-model="getPhysicalAddressCopy()[0].postal"
+                          required
+                          :rules="[rules.required(), rules.postalCode()]"
+                          :maxlength="6"
+                          label="Postal Code"
+                          variant="underlined"
+                        />
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+
+            <v-row no-gutters>
+              <v-col>
+                <v-checkbox
+                  id="sameAsMailingCheckbox"
+                  v-model="sameAsMailingCheckbox"
+                  dense
+                  label="Same as Mailing Address"
+                  class="mt-n3 pt-0"
+                  @update:model-value="clickSameAsAddressButton"
+                />
+              </v-col>
+            </v-row>
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-form>
+</template>
+  
+<script>
+
+import ApiService from '../../../common/apiService';
+import { Routes } from '@/utils/constants';
+import alertMixin from '@/mixins/alertMixin';
+import PrimaryButton from '@/components/util/PrimaryButton.vue';
+import { formatPhoneNumber, formatDate } from '@/utils/format';
+import { sanitizeUrl } from '@braintree/sanitize-url';
+import { mapState, mapActions } from 'pinia';
+import { deepCloneObject } from '@/utils/common';
+import * as Rules from '@/utils/institute/formRules';
+import { isNumber } from '@/utils/institute/formInput';
+import { authStore } from '@/store/modules/auth';
+import { instituteStore } from '@/store/modules/institute';
+import { edxStore } from '@/store/modules/edx';
+
+export default {
+  name: 'Details',
+  components: {
+    PrimaryButton
+  },
+  mixins: [alertMixin],
+  props: {
+    districtID: {
+      type: String,
+      required: true,
+    }
+  },
+  data() {
+    return {
+      district: null,
+      rules: Rules,
+      loading: false,
+      noteRequestCount: 0,
+      cleanWebsiteUrl: '',
+      editing: false,
+      districtDetailsFormValid: true,
+      districtDetailsCopy: {},
+      provinceCodeValues: [],
+      countryCodeValues: [],
+      sameAsMailingCheckbox: true
+    };
+  },
+  computed: {
+    ...mapState(authStore, ['DISTRICT_ADMIN_ROLE', 'OFFSHORE_SCHOOLS_ADMIN_ROLE']),
+    ...mapState(instituteStore, ['provinceCodes', 'countryCodes']),
+    ...mapState(edxStore, ['schoolSearchParams']),
+    notesLoading() {
+      return this.noteRequestCount > 0;
+    },
+    hasSamePhysicalAddress() {
+      return !this.district.addresses.filter(address => address.addressTypeCode === 'PHYSICAL').length > 0;
+    }
+  },
+  created() {
+    this.getDistrict();
+
+    instituteStore().getAllProvinceCodes().then(() => {
+      this.provinceCodeValues = this.provinceCodes.filter(province => province.provinceCode === 'BC' || province.provinceCode === 'YT');
+    });
+    instituteStore().getAllCountryCodes().then(() => {
+      this.countryCodeValues = this.countryCodes;
+    });
+  },
+  methods: {
+    ...mapActions(edxStore, ['setSchoolSearchParams']),
+    formatPhoneNumber,
+    isOffshoreUser() {
+      return this.OFFSHORE_SCHOOLS_ADMIN_ROLE;
+    },
+    getDistrict() {
+      this.loading = true;
+      ApiService.apiAxios.get(`${Routes.institute.DISTRICT_DATA_URL}/${this.districtID}`)
+        .then(response => {
+          this.district = response.data;
+          this.cleanWebsiteUrl = this.district.website ? sanitizeUrl(this.district.website) : '';
+          this.setHasSamePhysicalFlag();
+        }).catch(error => {
+          console.error(error);
+          this.setFailureAlert(error.response?.data?.message || error.message);
+        }).finally(() => {
+          this.loading = false;
+        });
+    },
+    async clickSameAsAddressButton() {
+      await this.$nextTick();
+      await this.$refs.districtDetailsForm.validate();
+    },
+    cancelClicked() {
+      this.editing = false;
+      this.setHasSamePhysicalFlag();
+    },
+    showEditLinks(fieldValue) {
+      return this.canEditDistrictDetails() && !fieldValue;
+    },
+    setHasSamePhysicalFlag() {
+      this.sameAsMailingCheckbox = this.hasSamePhysicalAddress;
+    },
+    viewSchools() {
+      this.schoolSearchParams.schoolID = null;
+      this.schoolSearchParams.districtID = this.districtID;
+      this.schoolSearchParams.authorityID = null;
+      this.schoolSearchParams.status = 'Open';
+      this.schoolSearchParams.facilityType = null;
+      this.schoolSearchParams.schoolCategory = null;
+      this.schoolSearchParams.schoolReportingRequirementCode = null;
+      this.schoolSearchParams.pageNumber = 1;
+      this.setSchoolSearchParams(this.schoolSearchParams);
+      this.$router.push({ name: 'instituteSchoolList' });
+    },
+    async toggleEdit() {
+      this.districtDetailsCopy = this.deepCloneObject(this.district);
+      this.addAddressesIfRequired(this.districtDetailsCopy);
+      this.editing = !this.editing;
+      await this.$nextTick();
+      this.$refs.districtDetailsForm.validate();
+    },
+    getStatusColor() {
+      if (this.district.districtStatusCode === 'ACTIVE') {
+        return 'green';
+      } else {
+        return 'red';
+      }
+    },
+    canEditDistrictDetails() {
+      return this.DISTRICT_ADMIN_ROLE;
+    },
+    addAddressesIfRequired(district) {
+      let addresses = district.addresses;
+      if (!this.hasMailingAddress()) {
+        addresses.push({
+          'createUser': null,
+          'updateUser': null,
+          'createDate': null,
+          'updateDate': null,
+          'addressId': null,
+          'schoolId': null,
+          'districtId': null,
+          'independentAuthorityId': null,
+          'phoneNumber': null,
+          'email': null,
+          'addressLine1': null,
+          'addressLine2': null,
+          'city': null,
+          'postal': null,
+          'addressTypeCode': 'MAILING',
+          'provinceCode': null,
+          'countryCode': null
+        });
+      }
+      if (!this.hasPhysicalAddress()) {
+        addresses.push({
+          'createUser': null,
+          'updateUser': null,
+          'createDate': null,
+          'updateDate': null,
+          'addressId': null,
+          'schoolId': null,
+          'districtId': null,
+          'independentAuthorityId': null,
+          'phoneNumber': null,
+          'email': null,
+          'addressLine1': null,
+          'addressLine2': null,
+          'city': null,
+          'postal': null,
+          'addressTypeCode': 'PHYSICAL',
+          'provinceCode': null,
+          'countryCode': null
+        });
+      }
+    },
+    async updateDistrictDetails() {
+      if (this.sameAsMailingCheckbox) {
+        this.districtDetailsCopy.addresses = this.districtDetailsCopy.addresses.filter(address => address.addressTypeCode === 'MAILING');
+      }
+      this.$emit('updateDistrict', this.districtDetailsCopy);
+    },
+    deepCloneObject,
+    isNumber,
+    formatDate,
+    getStatusText() {
+      if (this.district.districtStatusCode === 'ACTIVE') {
+        return 'Active';
+      } else {
+        return 'Inactive';
+      }
+    },
+    hasMailingAddress() {
+      return this.district.addresses.filter(address => address.addressTypeCode === 'MAILING').length > 0;
+    },
+    hasPhysicalAddress() {
+      return this.district.addresses?.filter(address => address.addressTypeCode === 'PHYSICAL').length > 0;
+    },
+    getMailingAddressCopy() {
+      return this.districtDetailsCopy.addresses?.filter(address => address.addressTypeCode === 'MAILING');
+    },
+    getPhysicalAddressCopy() {
+      return this.districtDetailsCopy.addresses?.filter(address => address.addressTypeCode === 'PHYSICAL');
+    },
+    getMailingAddressItem(item) {
+      let mailingAddress = this.district.addresses.filter(address => address.addressTypeCode === 'MAILING');
+      for (const x in mailingAddress[0]) {
+        if (x === item) {
+          return mailingAddress[0][item];
+        }
+      }
+    },
+    getPhysicalAddressItem(item) {
+      let physicalAddress = this.district.addresses.filter(address => address.addressTypeCode === 'PHYSICAL');
+      for (const x in physicalAddress[0]) {
+        if (x === item) {
+          return physicalAddress[0][item];
+        }
+      }
+    }
+  }
+};
+</script>
+  
+<style scoped>
+.divider {
+    border-color: #FCBA19;
+    border-width: 3px;
+    opacity: unset;
+}
+
+.sheetHeader {
+    background-color: #003366;
+    color: white;
+    font-size: medium !important;
+    font-weight: bolder !important;
+}
+
+.fontItalic {
+    font-style: italic;
+}
+
+.containerSetup {
+    padding-right: 24em !important;
+    padding-left: 24em !important;
+}
+
+.editField {
+    font-size: 14px;
+    color: rgb(0, 51, 102);
+}
+
+.editField:hover {
+    text-decoration: underline;
+}
+
+.subHeading {
+    color: #38598a;
+}
+</style>
diff --git a/frontend/src/components/institute/DistrictContact.vue b/frontend/src/components/institute/district/DistrictContact.vue
similarity index 100%
rename from frontend/src/components/institute/DistrictContact.vue
rename to frontend/src/components/institute/district/DistrictContact.vue
diff --git a/frontend/src/components/institute/DistrictContacts.vue b/frontend/src/components/institute/district/DistrictContacts.vue
similarity index 88%
rename from frontend/src/components/institute/DistrictContacts.vue
rename to frontend/src/components/institute/district/DistrictContacts.vue
index 87847b9d9..81889d47e 100644
--- a/frontend/src/components/institute/DistrictContacts.vue
+++ b/frontend/src/components/institute/district/DistrictContacts.vue
@@ -1,20 +1,7 @@
 <template>
   <v-container
-    class="containerSetup"
     fluid
   >
-    <v-col class="mt-1 d-flex justify-start">
-      <v-icon
-        small
-        color="#1976d2"
-      >
-        mdi-arrow-left
-      </v-icon>
-      <a
-        class="ml-1"
-        @click="backButtonClick"
-      >Return to District List</a>
-    </v-col>
     <v-row v-if="loading">
       <v-col class="d-flex justify-center">
         <v-progress-circular
@@ -28,24 +15,6 @@
       </v-col>
     </v-row>
     <template v-if="!loading">
-      <v-row>
-        <v-col
-          cols="12"
-          class="d-flex justify-start"
-        >
-          <v-row no-gutters>
-            <v-col cols="12">
-              <h2 class="subjectHeading">
-                {{
-                  districtDetails.districtNumber
-                }} - {{
-                  districtDetails.displayName
-                }}
-              </h2>
-            </v-col>
-          </v-row>
-        </v-col>
-      </v-row>
       <v-row cols="2">
         <v-col class="d-flex justify-start">
           <v-chip
@@ -65,15 +34,6 @@
           </v-chip>
         </v-col>
         <v-col class="d-flex justify-end">
-          <PrimaryButton
-            id="viewDistrictDetailsButton"
-            class="mr-2"
-            secondary
-            icon-left
-            icon="mdi-domain"
-            :to="`/district/${districtID}`"
-            text="View District Details"
-          />
           <PrimaryButton
             v-if="canEditDistrictContact"
             icon-left
@@ -85,7 +45,7 @@
         </v-col>
       </v-row>
       <v-row
-        :class="['d-sm-flex', 'align-center', 'searchBox', 'elevation-2']"
+        :class="['d-sm-flex', 'align-center', 'searchBox', 'elevation-2', 'mb-3']"
         @keydown.enter="searchButtonClicked"
       >
         <v-col>
@@ -107,7 +67,7 @@
             v-model="searchFilter.firstName"
             variant="underlined"
             label="Contact First Name"
-            clearable="true"
+            clearable
           />
         </v-col>
         <v-col>
@@ -116,7 +76,7 @@
             v-model="searchFilter.lastName"
             variant="underlined"
             label="Contact Last Name"
-            clearable="true"
+            clearable
           />
         </v-col>
         <v-col
@@ -139,14 +99,11 @@
       <div
         v-for="districtContactType in districtContactTypes"
         :key="districtContactType.code"
-        class="mt-5"
+        class="pb-4"
       >
         <div v-if="hasContactsWhenFiltered(districtContactType)">
-          <v-row
-            class="mb-1"
-            no-gutters
-          >
-            <v-col>
+          <v-row>
+            <v-col class="pb-0">
               <h2 style="color:#1A5A96">
                 {{
                   districtContactType.label
@@ -158,7 +115,10 @@
             v-if="!districtContactType.publiclyAvailable"
             cols="2"
           >
-            <v-col cols="12">
+            <v-col
+              class="pt-0"
+              cols="12"
+            >
               <v-alert
                 :id="`publiclyAvailableAlert${districtContactType.label}`"
                 color="#003366"
@@ -174,12 +134,12 @@
           </v-row>
           <v-row
             v-if="hasContactsForThisType(districtContactType)"
-            class="mt-0 mb-0"
             cols="2"
           >
             <v-col
               v-for="contact in filteredDistrictContacts.get(districtContactType.districtContactTypeCode)"
               :key="contact.schoolId"
+              class="pt-0"
               cols="5"
               lg="4"
             >
@@ -193,10 +153,9 @@
           </v-row>
           <v-row
             v-else
-            no-gutters
             cols="2"
           >
-            <v-col class="mt-2">
+            <v-col class="pt-0">
               <p>No contacts of this type have been listed.</p>
             </v-col>
           </v-row>
@@ -240,12 +199,12 @@
 
 <script>
 
-import ApiService from '../../common/apiService';
+import ApiService from '../../../common/apiService';
 import {Routes} from '@/utils/constants';
-import PrimaryButton from '../util/PrimaryButton.vue';
-import DistrictContact from '@/components/institute/DistrictContact.vue';
-import NewDistrictContactPage from '@/components/institute/NewDistrictContactPage.vue';
-import EditDistrictContactPage from '@/components/institute/EditDistrictContactPage.vue';
+import PrimaryButton from '../../util/PrimaryButton.vue';
+import DistrictContact from '@/components/institute/district/DistrictContact.vue';
+import NewDistrictContactPage from '@/components/institute/district/NewDistrictContactPage.vue';
+import EditDistrictContactPage from '@/components/institute/district/EditDistrictContactPage.vue';
 import ConfirmationDialog from '@/components/util/ConfirmationDialog.vue';
 import alertMixin from '@/mixins/alertMixin';
 import {mapState} from 'pinia';
@@ -255,7 +214,7 @@ import {authStore} from '@/store/modules/auth';
 import {setEmptyInputParams} from '@/utils/common';
 
 export default {
-  name: 'DistrictContactsPage',
+  name: 'DistrictContacts',
   components: {
     NewDistrictContactPage,
     EditDistrictContactPage,
diff --git a/frontend/src/components/institute/EditDistrictContactPage.vue b/frontend/src/components/institute/district/EditDistrictContactPage.vue
similarity index 81%
rename from frontend/src/components/institute/EditDistrictContactPage.vue
rename to frontend/src/components/institute/district/EditDistrictContactPage.vue
index 185bcd495..0dcf65911 100644
--- a/frontend/src/components/institute/EditDistrictContactPage.vue
+++ b/frontend/src/components/institute/district/EditDistrictContactPage.vue
@@ -112,29 +112,25 @@
             </v-row>
             <v-row>
               <v-col cols="6">
-                <v-text-field
+                <DatePicker
                   id="editDistrictContactEffectiveDateTextField"
                   v-model="editContact.effectiveDate"
-                  :rules="[rules.required()]"
-                  class="pt-0 mt-0"
                   label="Start Date"
-                  variant="underlined"
-                  type="date"
-                  clearable
+                  :rules="[rules.required()]"
+                  model-type="yyyy-MM-dd'T'00:00:00"
                   @update:model-value="validateForm"
+                  @clear-date="clearEffectiveDate"
                 />
               </v-col>
               <v-col cols="6">
-                <v-text-field
+                <DatePicker
                   id="editDistrictContactExpiryDateTextField"
                   v-model="editContact.expiryDate"
-                  :rules="[rules.endDateRule(editContact.effectiveDate, editContact.expiryDate)]"
-                  class="pt-0 mt-0"
                   label="End Date"
-                  variant="underlined"
-                  clearable
-                  type="date"
+                  :rules="[rules.endDateRule(editContact.effectiveDate, editContact.expiryDate)]"
+                  model-type="yyyy-MM-dd'T'00:00:00"
                   @update:model-value="validateForm"
+                  @clear-date="clearExpiryDate"
                 />
               </v-col>
             </v-row>
@@ -153,30 +149,30 @@
         id="saveChangesToDistrictContactButton"
         text="Save"
         width="7rem"
-        @click-action="saveChangesToDistrictContact"
         :disabled="!isFormValid"
         :loading="processing"
+        @click-action="saveChangesToDistrictContact"
       />
     </v-card-actions>
   </v-card>
 </template>
 
 <script>
-import PrimaryButton from '../util/PrimaryButton.vue';
+import PrimaryButton from '../../util/PrimaryButton.vue';
 import {mapState} from 'pinia';
 import alertMixin from '@/mixins/alertMixin';
 import ApiService from '@/common/apiService';
 import {Routes} from '@/utils/constants';
 import * as Rules from '@/utils/institute/formRules';
 import {isNumber} from '@/utils/institute/formInput';
-import {formatDate, formatDisplayDate} from '@/utils/format';
-import {parseDate} from '@/utils/dateHelpers';
 import {authStore} from '@/store/modules/auth';
 import _ from 'lodash';
+import DatePicker from '@/components/util/DatePicker.vue';
 
 export default {
   name: 'EditDistrictContactPage',
   components: {
+    DatePicker,
     PrimaryButton,
   },
   mixins: [alertMixin],
@@ -197,48 +193,28 @@ export default {
   emits: ['edit-district-contact:cancel-edit-district-contact-page', 'edit-district-contact:edit-district-contact-success'],
   data() {
     let clonedContact = _.cloneDeep(this.contact);
-    clonedContact.effectiveDate = this.parseDate(formatDate(clonedContact.effectiveDate));
-    clonedContact.expiryDate = this.parseDate(formatDate(clonedContact.expiryDate));
     return {
       isFormValid: false,
       processing: false,
       editContact: clonedContact,
-      rules: Rules,
-      editDistrictContactEffectiveDatePicker: null,
-      editDistrictContactExpiryDatePicker: null
+      rules: Rules
     };
   },
   computed: {
     ...mapState(authStore, ['isAuthenticated', 'userInfo']),
-    districtContactEffectiveDateFormatted: {
-      get() {
-        return this.formatDisplayDate(this.editContact.effectiveDate);
-      },
-      set(newValue) {
-        this.editContact.effectiveDate = this.parseDate(newValue);
-      }
-    },
-    districtContactExpiryDateFormatted: {
-      get() {
-        return this.formatDisplayDate(this.editContact.expiryDate);
-      },
-      set(newValue) {
-        this.editContact.expiryDate = this.parseDate(newValue);
-      }
-    }
-  },
-  watch: {
-    //watching effective date to valid form because we need to cross validate expiry and effective date fields
-    'editContact.effectiveDate': {
-      handler() {
-        this.validateForm();
-      }
-    }
   },
   mounted() {
     this.validateForm();
   },
   methods: {
+    clearEffectiveDate() {
+      this.editContact.effectiveDate = null;
+      this.validateForm();
+    },
+    clearExpiryDate() {
+      this.editContact.expiryDate = null;
+      this.validateForm();
+    },
     cancelEditDistrictContactPage() {
       this.resetForm();
       this.$emit('edit-district-contact:cancel-edit-district-contact-page');
@@ -263,12 +239,6 @@ export default {
           this.processing = false;
         });
     },
-    saveEditDistrictContactEffectiveDate(date) {
-      this.$refs.editDistrictContactEffectiveDateFilter.save(date);
-    },
-    saveEditDistrictContactExpiryDate(date) {
-      this.$refs.editDistrictContactExpiryDateFilter.save(date);
-    },
     resetForm() {
       this.$refs.editDistrictContactForm.reset();
     },
@@ -276,10 +246,7 @@ export default {
       const isValid = await this.$refs.editDistrictContactForm.validate();
       this.isFormValid = isValid.valid;
     },
-    isNumber,
-    formatDate,
-    formatDisplayDate,
-    parseDate
+    isNumber
   }
 };
 </script>
diff --git a/frontend/src/components/institute/NewDistrictContactPage.vue b/frontend/src/components/institute/district/NewDistrictContactPage.vue
similarity index 88%
rename from frontend/src/components/institute/NewDistrictContactPage.vue
rename to frontend/src/components/institute/district/NewDistrictContactPage.vue
index 6ca7901fe..aa14c99f6 100644
--- a/frontend/src/components/institute/NewDistrictContactPage.vue
+++ b/frontend/src/components/institute/district/NewDistrictContactPage.vue
@@ -113,28 +113,22 @@
             </v-row>
             <v-row>
               <v-col cols="6">
-                <v-text-field
+                <DatePicker
                   id="newContactEffectiveDateTextField"
                   v-model="newContact.effectiveDate"
-                  :rules="[rules.required()]"
-                  class="pt-0 mt-0"
                   label="Start Date"
-                  variant="underlined"
-                  type="date"
-                  clearable
+                  :rules="[rules.required()]"
+                  model-type="yyyy-MM-dd'T'00:00:00"
                   @update:model-value="validateForm"
                 />
               </v-col>
               <v-col cols="6">
-                <v-text-field
+                <DatePicker
                   id="newContactExpiryDateTextField"
                   v-model="newContact.expiryDate"
-                  :rules="[rules.endDateRule(newContact.effectiveDate, newContact.expiryDate)]"
-                  class="pt-0 mt-0"
                   label="End Date"
-                  variant="underlined"
-                  type="date"
-                  clearable
+                  :rules="[rules.endDateRule(newContact.effectiveDate, newContact.expiryDate)]"
+                  model-type="yyyy-MM-dd'T'00:00:00"
                   @update:model-value="validateForm"
                 />
               </v-col>
@@ -154,28 +148,30 @@
         id="newContactPostBtn"
         text="Save"
         width="7rem"
-        @click-action="addNewDistrictContact"
         :disabled="!isFormValid"
         :loading="processing"
+        @click-action="addNewDistrictContact"
       />
     </v-card-actions>
   </v-card>
 </template>
 
 <script>
-import PrimaryButton from '../util/PrimaryButton.vue';
+import PrimaryButton from '../../util/PrimaryButton.vue';
 import {mapState} from 'pinia';
 import alertMixin from '@/mixins/alertMixin';
 import ApiService from '@/common/apiService';
 import {Routes} from '@/utils/constants';
 import * as Rules from '@/utils/institute/formRules';
 import {isNumber} from '@/utils/institute/formInput';
-import {LocalDate} from '@js-joda/core';
+import {DateTimeFormatter, LocalDate} from '@js-joda/core';
 import {authStore} from '@/store/modules/auth';
+import DatePicker from '@/components/util/DatePicker.vue';
 
 export default {
   name: 'NewDistrictContactPage',
   components: {
+    DatePicker,
     PrimaryButton,
   },
   mixins: [alertMixin],
@@ -204,35 +200,19 @@ export default {
         phoneExtension: null,
         alternatePhoneNumber: null,
         alternatePhoneExtension: null,
-        effectiveDate: LocalDate.now().toString(),
+        effectiveDate: LocalDate.now().atStartOfDay().format(DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss')).toString(),
         expiryDate: null
       },
-      rules: Rules,
-      newContactEffectiveDatePicker: null,
-      newContactExpiryDatePicker: null
+      rules: Rules
     };
   },
   computed: {
     ...mapState(authStore, ['isAuthenticated', 'userInfo']),
   },
-  watch: {
-    //watching effective date to valid form because we need to cross validate expiry and effective date fields
-    'newContact.effectiveDate': {
-      handler() {
-        this.validateForm();
-      }
-    }
-  },
   mounted() {
     this.validateForm();
   },
   methods: {
-    saveNewContactEffectiveDate(date) {
-      this.$refs.newContactEffectiveDateFilter.save(date);
-    },
-    saveNewContactExpiryDate(date) {
-      this.$refs.newContactExpiryDateFilter.save(date);
-    },
     closeNewContactPage() {
       this.resetForm();
       this.$emit('new-district-contact:close-new-district-contact-page', 'new-district-contact:add-new-district-contact');
diff --git a/frontend/src/components/secure-message/AccessDistrictUsersPage.vue b/frontend/src/components/secure-message/AccessDistrictUsersPage.vue
index c5bd19951..d225adcdb 100644
--- a/frontend/src/components/secure-message/AccessDistrictUsersPage.vue
+++ b/frontend/src/components/secure-message/AccessDistrictUsersPage.vue
@@ -76,7 +76,6 @@
             id="generateNewPrimaryEdxActivationCodeDialog"
             :class="['d-sm-flex', 'align-center', 'searchBox']"
             class="px-2 mb-4"
-            style="margin-right: 14em;margin-left: 14em;"
           >
             <v-col>
               <v-row no-gutters>
@@ -184,8 +183,9 @@
           <v-col
             v-for="user in filteredUsers"
             :key="user.digitalID"
-            xl="4"
-            cols="6"
+            lg="4"
+            sm="6"
+            cols="12"
             class="pb-0"
           >
             <AccessUserCard
@@ -199,8 +199,9 @@
             />
           </v-col>
           <v-col
-            xl="4"
-            cols="6"
+            lg="4"
+            sm="6"
+            cols="12"
             class="pb-0"
           >
             <v-row style="height: 100%;">
@@ -536,9 +537,4 @@ export default {
     min-height: 150px;
 }
 
-.containerSetup {
-    padding-right: 10em !important;
-    padding-left: 10em !important;
-}
-
 </style>
diff --git a/frontend/src/components/secure-message/AccessSchoolUsersPage.vue b/frontend/src/components/secure-message/AccessSchoolUsersPage.vue
index c8cdc60e8..fe89b4175 100644
--- a/frontend/src/components/secure-message/AccessSchoolUsersPage.vue
+++ b/frontend/src/components/secure-message/AccessSchoolUsersPage.vue
@@ -58,7 +58,6 @@
         id="generateNewPrimaryEdxActivationCodeDialog"
         :class="['d-sm-flex', 'align-center', 'searchBox']"
         class="px-2 mb-4"
-        style="margin-right: 14em;margin-left: 14em;"
       >
         <v-col>
           <v-row no-gutters>
@@ -117,7 +116,7 @@
           v-model="searchFilter.roleName"
           clearable
           variant="underlined"
-          :items="schoolRoles"
+          :items="filteredSchoolRoles"
           item-title="label"
           item-value="edxRoleCode"
           label="Role"
@@ -166,23 +165,25 @@
       <v-col
         v-for="user in filteredUsers"
         :key="user.digitalID"
-        xl="4"
-        cols="6"
+        lg="4"
+        sm="6"
+        cols="12"
         class="pb-0"
       >
         <AccessUserCard
           :user-roles="user.edxUserSchools[0].edxUserSchoolRoles"
           :user="user"
           :institute-code="schoolID"
-          :institute-roles="schoolRoles"
+          :institute-roles="filteredSchoolRoles"
           institute-type-code="SCHOOL"
           institute-type-label="School"
           @refresh="getUsersData"
         />
       </v-col>
       <v-col
-        xl="4"
-        cols="6"
+        lg="4"
+        sm="6"
+        cols="12"
         class="pb-0"
       >
         <v-row style="height: 100%;">
@@ -246,7 +247,7 @@
         <v-divider />
         <v-card-text>
           <InviteUserPage
-            :user-roles="schoolRoles"
+            :user-roles="filteredSchoolRoles"
             :institute-code="schoolID"
             institute-type-code="SCHOOL"
             institute-type-label="School"
@@ -278,6 +279,7 @@ import ClipboardButton from '@/components/util/ClipboardButton.vue';
 import {appStore} from '@/store/modules/app';
 import {edxStore} from '@/store/modules/edx';
 import { ROLE } from '@/utils/constants/Roles';
+import { PERMISSION } from '@/utils/constants/Permission';
 
 export default {
   name: 'AccessUsersPage',
@@ -310,12 +312,15 @@ export default {
     };
   },
   computed: {
-    ...mapState(appStore, ['schoolMap']),
+    ...mapState(appStore, ['schoolMap', 'config']),
     ...mapState(edxStore, ['schoolRoles','schoolRolesCopy']),
     hasAdminUsers() {
       return this.users.filter(user => {
         return user.edxUserSchools.some(school => school.edxUserSchoolRoles.some(role => role.edxRoleCode === ROLE.EDX_SCHOOL_ADMIN));
       })?.length > 0;
+    },
+    filteredSchoolRoles() {
+      return this.config.DISABLE_SDC_FUNCTIONALITY ? this.schoolRoles.filter(role => role.edxRoleCode !== PERMISSION.STUDENT_DATA_COLLECTION) : this.schoolRoles;
     }
   },
   async beforeMount() {
@@ -497,9 +502,5 @@ export default {
   }
 }
 
-.containerSetup{
-  padding-right: 10em !important;
-  padding-left: 10em !important;
-}
 
 </style>
diff --git a/frontend/src/components/secure-message/AccessUserCard.vue b/frontend/src/components/secure-message/AccessUserCard.vue
index 5e06938cf..cd6ddfeeb 100644
--- a/frontend/src/components/secure-message/AccessUserCard.vue
+++ b/frontend/src/components/secure-message/AccessUserCard.vue
@@ -92,51 +92,74 @@
           class="pt-2"
           :style="[editState ? {'background-color': '#e7ebf0'} : {'background-color': 'white'}]"
         >
-          <v-chip-group v-if="!editState">
-            <v-chip
-              v-for="role in userRoles"
-              :key="role.edxRoleCode"
-              disabled
+          <div v-if="!editState">
+            <v-chip-group>
+              <v-chip
+                v-for="role in userRoles"
+                :key="role.edxRoleCode"
+                disabled
+              >
+                {{ getRoleLabel(role) }}
+              </v-chip>
+            </v-chip-group>
+            <p 
+              v-if="getExpiryDate(user)"
+              class="expiry-date"
             >
-              {{ getRoleLabel(role) }}
-            </v-chip>
-          </v-chip-group>
-          <v-list
-            v-else
-            v-model:selected="selectedRoles"
-            lines="two"
-            return-object
-            select-strategy="classic"
-            style="background-color: #e7ebf0"
-            @update:selected="selectedRolesChanged"
-          >
-            <div
-              v-for="newrole in instituteRoles"
-              :key="newrole.edxRoleCode"
-              :value="newrole.edxRoleCode"
+              <v-icon size="large">
+                mdi-delete-clock-outline
+              </v-icon>
+              {{ formatExpiryDate(getExpiryDate(user)) }}
+            </p>
+          </div>
+          
+          <div v-else>
+            <v-list
+              v-model:selected="selectedRoles"
+              lines="two"
+              return-object
+              select-strategy="classic"
+              style="background-color: #e7ebf0"
+              @update:selected="selectedRolesChanged"
             >
-              <v-list-item
-                :disabled="roleDisabled(newrole)"
+              <div
+                v-for="newrole in instituteRoles"
+                :key="newrole.edxRoleCode"
                 :value="newrole.edxRoleCode"
               >
-                <template #prepend="{ isActive }">
-                  <v-list-item-action>
-                    <v-checkbox-btn :model-value="isActive" />
-                  </v-list-item-action>
-                </template>
+                <v-list-item
+                  :disabled="roleDisabled(newrole)"
+                  :value="newrole.edxRoleCode"
+                >
+                  <template #prepend="{ isActive }">
+                    <v-list-item-action>
+                      <v-checkbox-btn :model-value="isActive" />
+                    </v-list-item-action>
+                  </template>
 
-                <v-list-item-title>{{ newrole.label }}</v-list-item-title>
+                  <v-list-item-title>{{ newrole.label }}</v-list-item-title>
 
-                <v-list-item-subtitle v-if="newrole.edxRoleCode === edxInstituteAdminRole">
-                  EDX {{ instituteTypeLabel }} Admin users will be set up with all
-                  {{ instituteTypeLabel.toLowerCase() }} roles.
-                </v-list-item-subtitle>
-                <v-list-item-subtitle v-else>
-                  {{ newrole.roleDescription }}
-                </v-list-item-subtitle>
-              </v-list-item>
-            </div>
-          </v-list>
+                  <v-list-item-subtitle v-if="newrole.edxRoleCode === edxInstituteAdminRole">
+                    EDX {{ instituteTypeLabel }} Admin users will be set up with all
+                    {{ instituteTypeLabel.toLowerCase() }} roles.
+                  </v-list-item-subtitle>
+                  <v-list-item-subtitle v-else>
+                    {{ newrole.roleDescription }}
+                  </v-list-item-subtitle>
+                </v-list-item>
+              </div>
+            </v-list>
+
+            <DatePicker
+              id="accessExpiryDate"
+              v-model="accessExpiryDate"
+              class="pl-7"
+              label="Access Expiry Date"
+              model-type="yyyy-MM-dd'T'00:00:00"
+              :min-date="minExpiryDate"
+              @clear-date="clearExpiryDate"
+            />
+          </div>
         </v-card-text>
         <Transition name="bounce">
           <v-card-text
@@ -192,15 +215,15 @@
                   text="Cancel"
                   class="mr-2"
                   secondary
-                  @click-action="clickRelinkButton"
                   :disabled="isRelinking"
+                  @click-action="clickRelinkButton"
                 />
                 <PrimaryButton
                   :id="`user-relink-action-button-${user.firstName}-${user.lastName}`"
                   text="Re-Link"
-                  @click-action="clickActionRelinkButton"
                   :disabled="isRelinking"
                   :loading="isRelinking"
+                  @click-action="clickActionRelinkButton"
                 />
               </v-col>
             </v-row>
@@ -252,10 +275,13 @@ import PrimaryButton from '@/components/util/PrimaryButton.vue';
 import ApiService from '../../common/apiService';
 import {EDX_SAGA_REQUEST_DELAY_MILLISECONDS, Routes} from '@/utils/constants';
 import alertMixin from '@/mixins/alertMixin';
+import {formatDate} from '@/utils/format';
+import DatePicker from '../util/DatePicker.vue';
+import {DateTimeFormatter, LocalDate} from '@js-joda/core';
 
 export default {
   name: 'AccessUserCard',
-  components: {PrimaryButton},
+  components: {PrimaryButton, DatePicker},
   mixins: [alertMixin],
   props: {
     user: {
@@ -289,7 +315,11 @@ export default {
       deleteState: false,
       relinkState: false,
       isRelinking: false,
-      selectedRoles: []
+      selectedRoles: [],
+      accessExpiryDate: null,
+      from: 'uuuu-MM-dd\'T\'HH:mm:ss',
+      pickerFormat: 'uuuu-MM-dd',
+      minExpiryDate: LocalDate.now().atStartOfDay().format(DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss')).toString()
     };
   },
   computed: {
@@ -322,6 +352,15 @@ export default {
     getButtonWidth() {
       return '7em';
     },
+    isDistrictUser(){
+      return this.instituteTypeCode === 'DISTRICT';
+    },
+    getExpiryDate(user){
+      if(!this.isDistrictUser()){
+        return user.edxUserSchools[0].expiryDate;
+      }
+      return user.edxUserDistricts[0].expiryDate;
+    },
     getRoleLabel(curRole) {
       if (this.instituteRoles.length > 0) {
         return this.instituteRoles.find((role) => role.edxRoleCode === curRole.edxRoleCode).label;
@@ -344,11 +383,15 @@ export default {
       this.deleteState = false;
       this.relinkState = !this.relinkState;
     },
+    formatExpiryDate(date) {
+      return formatDate(date, this.from, this.pickerFormat);
+    },
     clickActionRelinkButton() {
       this.isRelinking = true;
       const payload = {
         params: {
           userToRelink: this.user.edxUserID,
+          edxUserExpiryDate: this.getExpiryDate(this.user)
         }
       };
       if (this.instituteTypeCode === 'SCHOOL') {
@@ -360,6 +403,7 @@ export default {
         payload.params.districtID = this.instituteCode;
         payload.params.edxUserDistrictID = userDistrict.edxUserDistrictID;
       }
+
       ApiService.apiAxios.post(Routes.edx.EXCHANGE_RELINK_USER, payload)
         .then(() => {
           this.setSuccessAlert('User has been removed, email sent with instructions to re-link.');
@@ -405,7 +449,8 @@ export default {
       const payload = {
         params: {
           edxUserID: this.user.edxUserID,
-          selectedRoles: this.selectedRoles
+          selectedRoles: this.selectedRoles,
+          expiryDate: this.accessExpiryDate
         }
       };
       let url = Routes.edx.EXCHANGE_ACCESS_ROLES_URL;
@@ -418,9 +463,9 @@ export default {
       }
       ApiService.apiAxios.post(url, payload)
         .then(() => {
-          this.setSuccessAlert('User roles have been updated.');
+          this.setSuccessAlert('User has been updated.');
         }).catch(error => {
-          this.setFailureAlert('An error occurred while updating user roles. Please try again later.');
+          this.setFailureAlert('An error occurred while updating the user. Please try again later.');
           console.log(error);
         }).finally(() => {
           this.$emit('refresh');
@@ -440,7 +485,11 @@ export default {
       });
 
       this.selectedRoles = [...mySelection];
-    }
+      this.accessExpiryDate = this.getExpiryDate(this.user);
+    },
+    clearExpiryDate(){
+      this.accessExpiryDate = null;
+    },
   }
 };
 </script>
@@ -470,5 +519,10 @@ export default {
         transform: scale(1);
     }
 }
+
+.expiry-date {
+  color: grey;
+  text-align: right;
+}
 </style>
 
diff --git a/frontend/src/components/secure-message/ExchangePage.vue b/frontend/src/components/secure-message/ExchangePage.vue
index 4edcce0bf..ffa08a15c 100644
--- a/frontend/src/components/secure-message/ExchangePage.vue
+++ b/frontend/src/components/secure-message/ExchangePage.vue
@@ -144,7 +144,7 @@
                 <v-col
                   cols="12"
                   md="4"
-                  class="pt-0"
+                  class="pt-0 px-7"
                 >
                   <v-autocomplete
                     id="schoolName"
@@ -154,7 +154,8 @@
                     item-value="value"
                     item-title="text"
                     variant="underlined"
-                    clearable
+                    prepend-inner-icon="mdi-card-account-mail-outline"
+                    :clearable="true"
                     :items="contacts"
                   >
                     <template #selection="{ item }">
@@ -171,12 +172,12 @@
                 <v-col
                   cols="12"
                   md="4"
-                  class="pt-0"
+                  class="pt-0 px-7"
                 >
                   <v-text-field
                     id="subject-text-field"
                     v-model="subjectFilter"
-                    class="pt-0 mt-0 pl-9"
+                    class="pt-0 mt-0"
                     variant="underlined"
                     label="Subject"
                     prepend-inner-icon="mdi-book-open-variant"
@@ -187,24 +188,20 @@
                 <v-col
                   cols="12"
                   md="4"
-                  class="pt-0 pl-12 pr-12"
+                  class="pt-0 px-7"
                 >
-                  <v-text-field
+                  <DatePicker
                     id="messageDateTextField"
                     v-model="messageDate"
-                    variant="underlined"
                     label="Message Date"
-                    type="date"
-                    clearable
-                    @keyup.enter="filterRequests()"
+                    model-type="yyyy-MM-dd'T'00:00:00"
+                    @keyup.enter="enterPushed()"
                   />
                 </v-col>
-              </v-row>
-              <v-row>
                 <v-col
                   cols="12"
                   md="4"
-                  class="pt-0"
+                  class="pt-0 px-7"
                 >
                   <v-select
                     id="statusSelector"
@@ -214,11 +211,15 @@
                     item-title="label"
                     variant="underlined"
                     item-value="secureExchangeStatusCode"
-                    prepend-inner-icon="mdi-circle-medium"
                     class="pt-0 mt-0"
                     :menu-props="{closeOnContentClick:true}"
                     label="Status"
                   >
+                    <template #prepend-inner>
+                      <v-icon :color="getStatusColor(statusSelectFilter ? statusSelectFilter : '')">
+                        mdi-circle-medium
+                      </v-icon>
+                    </template>
                     <template #selection="{ item, index }">
                       {{
                         item.raw.label
@@ -243,12 +244,12 @@
                 <v-col
                   cols="12"
                   md="4"
-                  class="pt-0"
+                  class="pt-0 px-7"
                 >
                   <v-text-field
                     id="claimed-by-text-field"
                     v-model="claimedByFilter"
-                    class="pt-0 mt-0 pl-9"
+                    class="pt-0 mt-0"
                     label="Claimed By"
                     variant="underlined"
                     prepend-inner-icon="mdi-account-check-outline"
@@ -259,11 +260,11 @@
                 <v-col
                   cols="12"
                   md="4"
-                  class="pt-0"
+                  class="pt-0 px-7"
                 >
                   <v-text-field
                     v-model="messageIDFilter"
-                    class="pt-0 mt-0 pl-9 pr-9"
+                    class="pt-0 mt-0"
                     label="Message ID"
                     variant="underlined"
                     prepend-inner-icon="mdi-pound"
@@ -271,12 +272,10 @@
                     @keyup.enter="enterPushed()"
                   />
                 </v-col>
-              </v-row>
-              <v-row>
                 <v-col
                   cols="12"
                   md="4"
-                  class="pt-0"
+                  class="pt-0 px-7"
                 >
                   <v-text-field
                     v-model="studentIDFilter"
@@ -331,7 +330,7 @@
               select-strategy="page"
               :items-per-page-options="itemsPerPageOptions"
               :loading="loadingTable"
-              class="elevation-1 mt-2"
+              class="elevation-1 mt-2 rounded"
               mobile-breakpoint="0"
             >
               <template #no-data>
@@ -345,7 +344,6 @@
               <template #item="{ item, index }">
                 <v-row
                   class="hoverTable pa-2"
-                  style="cursor: pointer;"
                   no-gutters
                 >
                   <v-col cols="auto">
@@ -480,6 +478,7 @@
                     </v-row>
                   </v-col>
                 </v-row>
+                <v-divider />
               </template>
             </v-data-table-server>
           </v-col>
@@ -522,16 +521,19 @@ import NewMessagePage from './NewMessagePage.vue';
 import {mapState} from 'pinia';
 import router from '@/router';
 import _, {isEmpty, omitBy} from 'lodash';
-import {LocalDate, ChronoUnit, DateTimeFormatter} from '@js-joda/core';
+import {ChronoUnit, LocalDateTime} from '@js-joda/core';
 import alertMixin from '@/mixins/alertMixin';
 import {edxStore} from '@/store/modules/edx';
 import {appStore} from '@/store/modules/app';
 import {authStore} from '@/store/modules/auth';
 import {notificationsStore} from '@/store/modules/notifications';
+import DatePicker from '@/components/util/DatePicker.vue';
+import {formatDate} from '@/utils/format';
 
 export default {
   name: 'ExchangeInbox',
   components: {
+    DatePicker,
     PrimaryButton,
     NewMessagePage
   },
@@ -548,8 +550,6 @@ export default {
       statusSelectFilter: null,
       statusRadioGroup: 'statusFilterAllActive',
       statusRadioGroupEnabled: true,
-      messageDateFilter: false,
-      activeMessageDatePicker: null,
       messageDate: null,
       subjectFilter: '',
       messageIDFilter: '',
@@ -580,7 +580,6 @@ export default {
         {value: 50, title: '50'}
       ],
       loadingTableCount: 0,
-      dateMenu: false,
       headerSearchParams: {
         sequenceNumber: '',
         contact: '',
@@ -588,10 +587,6 @@ export default {
         createDate: [],
         secureExchangeStatusCode: ''
       },
-      headerSortParams: {
-        currentSort: 'createDate',
-        currentSortDir: true
-      },
       exchanges: [],
       selectedExchanges: [],
       isActiveMessagesTabEnabled: true,
@@ -666,9 +661,6 @@ export default {
         this.filterExchanges();
       }
     },
-    openMessageDatePicker() {
-      this.$refs.messageDatePicker.openMenu();
-    },
     messageSent() {
       this.newMessageSheet = !this.newMessageSheet;
     },
@@ -676,8 +668,8 @@ export default {
       this.ministryTeamName = this.ministryTeams.find(item => item.groupRoleIdentifier === this.ministryOwnershipGroupRoleID).teamName;
     },
     getNumberOfDays(start) {
-      const start_date = new LocalDate.parse(start, DateTimeFormatter.ofPattern('yyyy/MM/dd'));
-      const end_date = LocalDate.now();
+      const start_date = new LocalDateTime.parse(start);
+      const end_date = LocalDateTime.now();
 
       return ChronoUnit.DAYS.between(start_date, end_date) + ' days';
     },
@@ -687,9 +679,9 @@ export default {
     getContactLineItem(item) {
       switch (item.secureExchangeContactTypeCode) {
       case 'SCHOOL':
-        return `${this.schoolMap.get(item?.contactIdentifier)?.schoolName} (${this.schoolMap.get(item?.contactIdentifier)?.mincode}) - ${item?.createDate}`;
+        return `${this.schoolMap.get(item?.contactIdentifier)?.schoolName} (${this.schoolMap.get(item?.contactIdentifier)?.mincode}) - ${formatDate(item?.createDate)}`;
       case 'DISTRICT':
-        return `${this.districtMap.get(item?.contactIdentifier)?.name} (${this.districtMap.get(item?.contactIdentifier)?.districtNumber}) - ${item?.createDate}`;
+        return `${this.districtMap.get(item?.contactIdentifier)?.name} (${this.districtMap.get(item?.contactIdentifier)?.districtNumber}) - ${formatDate(item?.createDate)}`;
       }
     },
     getReviewer(reviewer) {
@@ -746,7 +738,6 @@ export default {
       this.claimedByFilter = null;
       this.contactNameFilter = null;
       this.messageDate = null;
-      this.messageDateFilter = null;
       this.statusSelectFilter = null;
       if (runSearch) {
         this.resetPageNumber();
@@ -773,9 +764,9 @@ export default {
 
     },
     getStatusColor(status) {
-      if (status === 'Open') {
+      if (status?.toLowerCase() === 'open') {
         return 'green';
-      } else if (status === 'Closed') {
+      } else if (status?.toLowerCase() === 'closed') {
         return 'red';
       }
     },
@@ -951,26 +942,29 @@ export default {
     font-size: medium;
 }
 
-.hoverTable {
-    border-bottom-style: groove;
-    border-left-style: groove;
-    border-right-style: groove;
-    border-color: rgb(255 255 255 / 45%);
-}
-
-.hoverTable:nth-child(1) {
-    border-top-style: groove;
-}
-
 .hoverTable:hover {
     background-color: #e8e8e8;
     cursor: pointer;
 }
 
 
-.containerSetup {
-    padding-right: 26em !important;
-    padding-left: 26em !important;
+.containerSetup{
+  padding-right: 32em !important;
+  padding-left: 32em !important;
+}
+
+@media screen and (max-width: 1950px) {
+  .containerSetup{
+    padding-right: 20em !important;
+    padding-left: 20em !important;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .containerSetup{
+    padding-right: 4em !important;
+    padding-left: 4em !important;
+  }
 }
 
 :deep(.dp__input) {
diff --git a/frontend/src/components/secure-message/InstituteAccessPage.vue b/frontend/src/components/secure-message/InstituteAccessPage.vue
index c95ee901d..edd2a8560 100644
--- a/frontend/src/components/secure-message/InstituteAccessPage.vue
+++ b/frontend/src/components/secure-message/InstituteAccessPage.vue
@@ -119,11 +119,3 @@ export default {
   }
 };
 </script>
-
-<style scoped>
-.containerSetup{
-  padding-right: 20em !important;
-  padding-left: 20em !important;
-}
-
-</style>
diff --git a/frontend/src/components/secure-message/InviteUserPage.vue b/frontend/src/components/secure-message/InviteUserPage.vue
index d2397e9fc..4366ed75b 100644
--- a/frontend/src/components/secure-message/InviteUserPage.vue
+++ b/frontend/src/components/secure-message/InviteUserPage.vue
@@ -114,6 +114,16 @@
                               </v-list>
                             </template>
                           </v-select>
+                          
+                          <DatePicker
+                            id="accessExpiryDate"
+                            v-model="accessExpiryDate"
+                            class="pb-3 mt-0 pt-0"
+                            label="Access Expiry Date"
+                            model-type="yyyy-MM-dd'T'00:00:00"
+                            :min-date="minExpiryDate"
+                            @clear-date="clearExpiryDate"
+                          />
                         </v-card-text>
                       </v-col>
                     </v-row>
@@ -155,12 +165,15 @@ import {Routes} from '@/utils/constants';
 import {mapState} from 'pinia';
 import {authStore} from '@/store/modules/auth';
 import {appStore} from '@/store/modules/app';
+import DatePicker from '../util/DatePicker.vue';
+import {DateTimeFormatter, LocalDate} from '@js-joda/core';
 
 export default {
   name: 'InviteUserPage',
   components: {
     PrimaryButton,
     ConfirmationDialog,
+    DatePicker
   },
   mixins: [alertMixin],
   props: {
@@ -207,7 +220,9 @@ export default {
       processing: false,
       edxAdminUserCode: '',
       rolesHint: 'Pick the roles to be assigned to the new user',
-      emailHint: 'Valid Email Required'
+      emailHint: 'Valid Email Required',
+      accessExpiryDate: null,
+      minExpiryDate: LocalDate.now().atStartOfDay().format(DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss')).toString()
     };
   },
   mounted() {
@@ -286,7 +301,8 @@ export default {
         firstName: this.firstName,
         lastName: this.lastName,
         email: this.email,
-        edxActivationRoleCodes: this.edxActivationRoleCodes
+        edxActivationRoleCodes: this.edxActivationRoleCodes,
+        edxUserExpiryDate: this.accessExpiryDate
       };
       let url = null;
       if (this.instituteTypeCode === 'SCHOOL') {
@@ -316,6 +332,9 @@ export default {
       const isValid = this.$refs.newUserForm.validate();
       this.isValidForm = isValid.valid;
     },
+    clearExpiryDate(){
+      this.accessExpiryDate = null;
+    },
   }
 };
 </script>
diff --git a/frontend/src/components/secure-message/MessageDisplay.vue b/frontend/src/components/secure-message/MessageDisplay.vue
index 560df3681..9babc3ff6 100644
--- a/frontend/src/components/secure-message/MessageDisplay.vue
+++ b/frontend/src/components/secure-message/MessageDisplay.vue
@@ -44,7 +44,7 @@
                       class="createDate"
                       style="color: black"
                     >
-                      {{ secureExchange.createDate }}
+                      {{ formatDate(secureExchange.createDate) }}
                     </div>
                   </v-col>
                 </v-row>
@@ -819,7 +819,7 @@ import router from '@/router';
 import {mapActions, mapState} from 'pinia';
 import {isPdf, isImage} from '@/utils/file';
 import {replaceMacro, insertMacro} from '@/utils/macro';
-import {ChronoUnit, DateTimeFormatter, LocalDate} from '@js-joda/core';
+import {ChronoUnit, LocalDateTime} from '@js-joda/core';
 import alertMixin from '@/mixins/alertMixin';
 
 import PrimaryButton from '@/components/util/PrimaryButton.vue';
@@ -830,6 +830,7 @@ import MacroMenu from '../common/MacroMenu.vue';
 import {appStore} from '@/store/modules/app';
 import {edxStore} from '@/store/modules/edx';
 import {authStore} from '@/store/modules/auth';
+import {formatDate} from '@/utils/format';
 
 
 export default {
@@ -897,6 +898,7 @@ export default {
     });
   },
   methods: {
+    formatDate,
     ...mapActions(edxStore, ['getMacros']),
     async upload(document) {
       try {
@@ -1011,8 +1013,8 @@ export default {
       }
     },
     getNumberOfDays(start) {
-      const start_date = new LocalDate.parse(start, DateTimeFormatter.ofPattern('uuuu/MM/dd'));
-      const end_date = LocalDate.now();
+      const start_date = new LocalDateTime.parse(start);
+      const end_date = LocalDateTime.now();
 
       return ChronoUnit.DAYS.between(start_date, end_date) + ' days';
     },
diff --git a/frontend/src/components/util/DatePicker.vue b/frontend/src/components/util/DatePicker.vue
new file mode 100644
index 000000000..60b9e42e0
--- /dev/null
+++ b/frontend/src/components/util/DatePicker.vue
@@ -0,0 +1,87 @@
+<script>
+import {defineComponent} from 'vue';
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
+
+export default defineComponent({
+  name: 'DatePicker',
+  components: {VueDatePicker},
+  props: {
+    modelValue: {
+      type: String,
+      default: null
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    rules: {
+      type: Array,
+      default: ()=>[]
+    },
+    maxDate: {
+      type: String,
+      default: null
+    },
+    minDate: {
+      type: String,
+      default: null
+    },
+    modelType: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['update:modelValue', 'clearDate'],
+  methods: {
+    saveDate(newDate) {
+      this.$emit('update:modelValue', newDate);
+    }
+  }
+});
+</script>
+
+<template>
+  <VueDatePicker
+    :model-value="modelValue"
+    :enable-time-picker="false"
+    :model-type="modelType"
+    format="yyyy/MM/dd"
+    preview-format="yyyy/MM/dd"
+    :text-input="{
+      enterSubmit: true,
+      tabSubmit: true,
+      openMenu: true,
+      format: 'yyyy/MM/dd'
+    }"
+    :clearable="false"
+    :min-date="minDate"
+    :max-date="maxDate"
+    :teleport="true"
+    @update:model-value="saveDate"
+  >
+    <template #dp-input="{ value, onInput, onEnter, onTab }">
+      <v-text-field
+        type="text"
+        :model-value="value"
+        :rules="rules"
+        prepend-inner-icon="mdi-calendar"
+        :label="label"
+        variant="underlined"
+        placeholder="yyyy/mm/dd"
+        :clearable="true"
+        @input="onInput"
+        @keydown.enter.prevent="onEnter"
+        @keydown.tab.prevent="onTab"
+        @click:clear="$emit('clearDate')"
+      />
+    </template>
+  </VueDatePicker>
+</template>
+<style scoped>
+:deep(.dp__input_wrap) {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+</style>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 7d5b4d20b..c8c0b5384 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -43,12 +43,10 @@ import AccessDistrictUsersPage from '@/components/secure-message/AccessDistrictU
 import InstituteAccessPage from '@/components/secure-message/InstituteAccessPage.vue';
 import DistrictList from '@/components/institute/DistrictList.vue';
 import DistrictDetailsPage from '@/components/institute/DistrictDetails.vue';
-import DistrictContactsPage from '@/components/institute/DistrictContacts.vue';
 import SchoolListPage from '@/components/institute/SchoolList.vue';
 import SchoolDetails from '@/components/institute/SchoolDetails.vue';
 import AuthoritiesListPage from '@/components/institute/AuthoritiesList.vue';
 import AuthorityDetailsPage from '@/components/institute/AuthorityDetails.vue';
-import AuthorityContactsPage from '@/components/institute/AuthoritiesContacts.vue';
 
 const router = createRouter({
   history: createWebHistory(),
@@ -446,17 +444,6 @@ const router = createRouter({
             permission: 'SECURE_EXCHANGE'
           }
         },
-        {
-          path: 'districtContacts/:districtID',
-          name: 'districtContacts',
-          component: DistrictContactsPage,
-          props: true,
-          meta: {
-            pageTitle: PAGE_TITLES.DISTRICT_CONTACTS,
-            requiresAuth: true,
-            permission: 'SECURE_EXCHANGE'
-          }
-        },
         {
           path: 'school',
           name: 'instituteSchoolList',
@@ -497,16 +484,6 @@ const router = createRouter({
         requiresAuth: true
       }
     },
-    {
-      path: '/authorityContacts/:authorityID',
-      name: 'authorityContacts',
-      props: true,
-      component: AuthorityContactsPage,
-      meta: {
-        pageTitle: PAGE_TITLES.AUTHORITY_CONTACTS,
-        requiresAuth: true,
-      }
-    },
     {
       path: '/login',
       name: 'login',
diff --git a/frontend/src/store/modules/app.js b/frontend/src/store/modules/app.js
index c4f3eaa63..7b74dcde8 100644
--- a/frontend/src/store/modules/app.js
+++ b/frontend/src/store/modules/app.js
@@ -145,7 +145,7 @@ export const appStore = defineStore('app', {
           const response = await ApiService.getSchoolApiMincodeSchoolNames();
           await this.setSchoolApiMincodeSchoolNameAndDistrictCodes(response.data);
         }
-        if(this.fundingGroupsMap.size === 0) {
+        if(this.fundingGroupsMap.size === 0 && !this.config.DISABLE_SDC_FUNCTIONALITY) {
           const response = await ApiService.getAllFundingGroups();
           await this.setFundingGroups(response.data);
         }
@@ -175,8 +175,10 @@ export const appStore = defineStore('app', {
         const responseSchoolApiMin = await ApiService.getSchoolApiMincodeSchoolNames();
         await this.setSchoolApiMincodeSchoolNameAndDistrictCodes(responseSchoolApiMin.data);
 
-        const responseFunding = await ApiService.getAllFundingGroups();
-        await this.setFundingGroups(responseFunding.data);
+        if(!this.config.DISABLE_SDC_FUNCTIONALITY) {
+          const responseFunding = await ApiService.getAllFundingGroups();
+          await this.setFundingGroups(responseFunding.data);
+        }
       }
     },
   },
diff --git a/frontend/src/utils/constants/Permission.js b/frontend/src/utils/constants/Permission.js
new file mode 100644
index 000000000..4175cacb0
--- /dev/null
+++ b/frontend/src/utils/constants/Permission.js
@@ -0,0 +1,12 @@
+export const PERMISSION = Object.freeze(
+  {
+    EDX_USER_SCHOOL_ADMIN: 'EDX_USER_SCHOOL_ADMIN',
+
+    SECURE_EXCHANGE: 'SECURE_EXCHANGE',
+
+    EDX_USER_DISTRICT_ADMIN: 'EDX_USER_DISTRICT_ADMIN',
+
+    STUDENT_DATA_COLLECTION: 'STUDENT_DATA_COLLECTION'
+  }
+);
+
diff --git a/frontend/src/utils/dateHelpers.js b/frontend/src/utils/dateHelpers.js
index 7bcaeab90..4275c7627 100644
--- a/frontend/src/utils/dateHelpers.js
+++ b/frontend/src/utils/dateHelpers.js
@@ -1,11 +1,11 @@
-import {LocalDate} from '@js-joda/core';
+import {DateTimeFormatter, LocalDate} from '@js-joda/core';
 import moment from 'moment';
 
 export function findUpcomingDate(month, day) {
   let currentDate = LocalDate.now();
   let defaultUpcomingDate = new LocalDate(currentDate.year(), month, day);
   defaultUpcomingDate = defaultUpcomingDate.isBefore(currentDate) ? defaultUpcomingDate.plusYears(1) : defaultUpcomingDate;
-  return defaultUpcomingDate;
+  return defaultUpcomingDate.atStartOfDay().format(DateTimeFormatter.ofPattern('yyyy-MM-dd\'T\'HH:mm:ss'));
 }
 
 export function parseDate(date) {
diff --git a/tools/config/update-configmap.sh b/tools/config/update-configmap.sh
index 7892da086..db285337f 100644
--- a/tools/config/update-configmap.sh
+++ b/tools/config/update-configmap.sh
@@ -273,12 +273,15 @@ if [ "$envValue" = "dev" ]; then
   bannerEnvironment="DEV"
   bannerColor="#8d28d7"
   SCHEDULER_CRON_DOC_TYPE_MIGRATION="0 0 0 * * *"
+  disableSdcFunctionality=false
 elif [ "$envValue" = "test" ]; then
   bannerEnvironment="TEST"
   bannerColor="#58fe01"
   SCHEDULER_CRON_DOC_TYPE_MIGRATION="0 0 0 * * *"
+  disableSdcFunctionality=true
 else
   SCHEDULER_CRON_DOC_TYPE_MIGRATION="0 0 0 17 9 *"
+  disableSdcFunctionality=true
 fi
 
 BANNER_ENVIRONMENT="$bannerEnvironment"
@@ -286,7 +289,7 @@ BANNER_COLOR="$bannerColor"
 WEB_SOCKET_URL="wss://$SERVER_FRONTEND/api/socket"
 
 echo Creating config map $APP_NAME-backend-config-map
-oc create -n $PEN_NAMESPACE-$envValue configmap $APP_NAME-backend-config-map --from-literal=WEB_SOCKET_URL="$WEB_SOCKET_URL" --from-literal=BANNER_COLOR="$BANNER_COLOR" --from-literal=BANNER_ENVIRONMENT="$BANNER_ENVIRONMENT" --from-literal=TZ=$TZVALUE --from-literal=UI_PRIVATE_KEY="$UI_PRIVATE_KEY_VAL" --from-literal=SITEMINDER_LOGOUT_ENDPOINT="$siteMinderLogoutUrl" --from-literal=UI_PUBLIC_KEY="$UI_PUBLIC_KEY_VAL" --from-literal=ID=$APP_NAME-soam --from-literal=SECRET=$studentAdminClientSecret --from-literal=SERVER_FRONTEND=https://$SERVER_FRONTEND --from-literal=ISSUER=STUDENT_ADMIN_APPLICATION --from-literal=SOAM_PUBLIC_KEY="$formattedPublicKey" --from-literal=PEN_REQUEST_EMAIL_API_URL="http://student-profile-email-api-master.$PEN_NAMESPACE-$envValue.svc.cluster.local:8080/gmp" --from-literal=PEN_REQUEST_API_URL="http://pen-request-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/pen-request" --from-literal=DISCOVERY=https://$SOAM_KC/auth/realms/$SOAM_KC_REALM_ID/.well-known/openid-configuration --from-literal=KC_DOMAIN=https://$SOAM_KC/auth/realms/$SOAM_KC_REALM_ID --from-literal=PEN_DEMOGRAPHICS_URL="http://pen-demographics-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080" --from-literal=DIGITAL_ID_URL="http://digitalid-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/digital-id" --from-literal=STUDENT_API_URL="http://student-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/student" --from-literal=LOG_LEVEL=info --from-literal=IDIR_IDP_HINT=keycloak_bcdevexchange_idir --from-literal=REDIS_HOST=redis --from-literal=REDIS_PORT=6379 --from-literal=STUDENT_PROFILE_API_URL="http://student-profile-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/student-profile" --from-literal=SCHOOL_API_URL="http://school-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1" --from-literal=STUDENT_PROFILE_EMAIL_API_URL="http://student-profile-email-api-master.$PEN_NAMESPACE-$envValue.svc.cluster.local:8080/ump" --from-literal=PROFILE_REQUEST_SAGA_API_URL="http://student-profile-saga-api-master.$PEN_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/student-profile-saga" --from-literal=NATS_URL="$NATS_URL" --from-literal=NATS_CLUSTER="$NATS_CLUSTER" --from-literal=UMP_ROLES="STUDENT_PROFILE_ADMIN,STUDENT_PROFILE_READ_ONLY" --from-literal=GMP_ROLES="STUDENT_ADMIN,STUDENT_ADMIN_READ_ONLY" --from-literal=STUDENT_SEARCH_ADMIN="STUDENT_SEARCH_ADMIN" --from-literal=STUDENT_SEARCH_ROLES="STUDENT_SEARCH_ADMIN,STUDENT_SEARCH_READ_ONLY" --from-literal=STUDENT_ADMIN_ADMINISTRATOR="STUDENT_ADMIN_ADMINISTRATOR" --from-literal=UMP_ROLE_ADMIN="STUDENT_PROFILE_ADMIN" --from-literal=GMP_ROLE_ADMIN="STUDENT_ADMIN" --from-literal=PEN_REQUEST_BATCH_ADMIN="PEN_REQUEST_BATCH_ADMIN" --from-literal=EDX_ADMIN="EDX_ADMIN" --from-literal=PEN_REQUEST_BATCH_API_URL="http://pen-reg-batch-api-master.$PEN_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1" --from-literal=PEN_MATCH_API_URL="http://pen-match-api-master.$PEN_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/pen-match" --from-literal=SESSION_MAX_AGE=$sessionMaxAge --from-literal=TOKEN_EXPIRES_IN=$tokenExpiresIn --from-literal=SCHEDULER_CRON_STALE_SAGA_RECORD_REDIS="0/30 * * * * *" --from-literal=MIN_TIME_BEFORE_SAGA_IS_STALE_IN_SECONDS=10 --from-literal=PEN_SERVICES_API_URL="http://pen-services-api-master.$PEN_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/pen-services" --from-literal=PEN_TRAX_API_URL="http://pen-trax-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1" --from-literal=SLD_API_URL="http://sld-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1" --from-literal=QUEUE_GROUP_NAME="student-admin-node-queue-group" --from-literal=STAN_ENABLED="true" --from-literal=NODE_ENV="openshift" --from-literal=SCHEDULER_CRON_DOC_TYPE_MIGRATION="$SCHEDULER_CRON_DOC_TYPE_MIGRATION" --from-literal=ENABLE_PRR_STUDENT_DEMOGRAPHICS="$ENABLE_PRR_STUDENT_DEMOGRAPHICS" --from-literal=NOMINAL_ROLL="NOMINAL_ROLL_EDIT" --from-literal=MACRO_API_URL="http://macro-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/macro" --from-literal=NOMINAL_ROLL_API_URL="http://pen-nominal-roll-api-main.$PEN_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/nominal-roll" --from-literal=STUDENT_ANALYTICS_STUDENT_PROFILE="STUDENT_ANALYTICS_STUDENT_PROFILE" --from-literal=STUDENT_ANALYTICS_BATCH="STUDENT_ANALYTICS_BATCH" --from-literal=NOMINAL_ROLL_ROLES="NOMINAL_ROLL,NOMINAL_ROLL_EDIT" --from-literal=EDX_API_URL="http://edx-api-master.$EDX_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/edx" --from-literal=SDC_API_URL="http://student-data-collection-api-master.$EDX_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/student-data-collection" --from-literal=INSTITUTE_API_URL="http://institute-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/institute"  --from-literal=EDX_PEN_TEAM_ROLES="PEN_TEAM_ROLE" --dry-run -o yaml | oc apply -f -
+oc create -n $PEN_NAMESPACE-$envValue configmap $APP_NAME-backend-config-map --from-literal=WEB_SOCKET_URL="$WEB_SOCKET_URL" --from-literal=BANNER_COLOR="$BANNER_COLOR" --from-literal=BANNER_ENVIRONMENT="$BANNER_ENVIRONMENT" --from-literal=TZ=$TZVALUE --from-literal=UI_PRIVATE_KEY="$UI_PRIVATE_KEY_VAL" --from-literal=SITEMINDER_LOGOUT_ENDPOINT="$siteMinderLogoutUrl" --from-literal=UI_PUBLIC_KEY="$UI_PUBLIC_KEY_VAL" --from-literal=ID=$APP_NAME-soam --from-literal=SECRET=$studentAdminClientSecret --from-literal=SERVER_FRONTEND=https://$SERVER_FRONTEND --from-literal=ISSUER=STUDENT_ADMIN_APPLICATION --from-literal=SOAM_PUBLIC_KEY="$formattedPublicKey" --from-literal=PEN_REQUEST_EMAIL_API_URL="http://student-profile-email-api-master.$PEN_NAMESPACE-$envValue.svc.cluster.local:8080/gmp" --from-literal=PEN_REQUEST_API_URL="http://pen-request-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/pen-request" --from-literal=DISCOVERY=https://$SOAM_KC/auth/realms/$SOAM_KC_REALM_ID/.well-known/openid-configuration --from-literal=KC_DOMAIN=https://$SOAM_KC/auth/realms/$SOAM_KC_REALM_ID --from-literal=PEN_DEMOGRAPHICS_URL="http://pen-demographics-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080" --from-literal=DIGITAL_ID_URL="http://digitalid-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/digital-id" --from-literal=STUDENT_API_URL="http://student-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/student" --from-literal=LOG_LEVEL=info --from-literal=IDIR_IDP_HINT=keycloak_bcdevexchange_idir --from-literal=REDIS_HOST=redis --from-literal=REDIS_PORT=6379 --from-literal=STUDENT_PROFILE_API_URL="http://student-profile-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/student-profile" --from-literal=SCHOOL_API_URL="http://school-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1" --from-literal=STUDENT_PROFILE_EMAIL_API_URL="http://student-profile-email-api-master.$PEN_NAMESPACE-$envValue.svc.cluster.local:8080/ump" --from-literal=PROFILE_REQUEST_SAGA_API_URL="http://student-profile-saga-api-master.$PEN_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/student-profile-saga" --from-literal=NATS_URL="$NATS_URL" --from-literal=NATS_CLUSTER="$NATS_CLUSTER" --from-literal=UMP_ROLES="STUDENT_PROFILE_ADMIN,STUDENT_PROFILE_READ_ONLY" --from-literal=GMP_ROLES="STUDENT_ADMIN,STUDENT_ADMIN_READ_ONLY" --from-literal=STUDENT_SEARCH_ADMIN="STUDENT_SEARCH_ADMIN" --from-literal=STUDENT_SEARCH_ROLES="STUDENT_SEARCH_ADMIN,STUDENT_SEARCH_READ_ONLY" --from-literal=STUDENT_ADMIN_ADMINISTRATOR="STUDENT_ADMIN_ADMINISTRATOR" --from-literal=UMP_ROLE_ADMIN="STUDENT_PROFILE_ADMIN" --from-literal=GMP_ROLE_ADMIN="STUDENT_ADMIN" --from-literal=PEN_REQUEST_BATCH_ADMIN="PEN_REQUEST_BATCH_ADMIN" --from-literal=EDX_ADMIN="EDX_ADMIN" --from-literal=PEN_REQUEST_BATCH_API_URL="http://pen-reg-batch-api-master.$PEN_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1" --from-literal=PEN_MATCH_API_URL="http://pen-match-api-master.$PEN_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/pen-match" --from-literal=SESSION_MAX_AGE=$sessionMaxAge --from-literal=TOKEN_EXPIRES_IN=$tokenExpiresIn --from-literal=SCHEDULER_CRON_STALE_SAGA_RECORD_REDIS="0/30 * * * * *" --from-literal=MIN_TIME_BEFORE_SAGA_IS_STALE_IN_SECONDS=10 --from-literal=PEN_SERVICES_API_URL="http://pen-services-api-master.$PEN_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/pen-services" --from-literal=PEN_TRAX_API_URL="http://pen-trax-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1" --from-literal=SLD_API_URL="http://sld-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1" --from-literal=QUEUE_GROUP_NAME="student-admin-node-queue-group" --from-literal=STAN_ENABLED="true" --from-literal=NODE_ENV="openshift" --from-literal=SCHEDULER_CRON_DOC_TYPE_MIGRATION="$SCHEDULER_CRON_DOC_TYPE_MIGRATION" --from-literal=ENABLE_PRR_STUDENT_DEMOGRAPHICS="$ENABLE_PRR_STUDENT_DEMOGRAPHICS" --from-literal=NOMINAL_ROLL="NOMINAL_ROLL_EDIT" --from-literal=MACRO_API_URL="http://macro-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/macro" --from-literal=NOMINAL_ROLL_API_URL="http://pen-nominal-roll-api-main.$PEN_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/nominal-roll" --from-literal=STUDENT_ANALYTICS_STUDENT_PROFILE="STUDENT_ANALYTICS_STUDENT_PROFILE" --from-literal=STUDENT_ANALYTICS_BATCH="STUDENT_ANALYTICS_BATCH" --from-literal=NOMINAL_ROLL_ROLES="NOMINAL_ROLL,NOMINAL_ROLL_EDIT" --from-literal=EDX_API_URL="http://edx-api-master.$EDX_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/edx" --from-literal=SDC_API_URL="http://student-data-collection-api-master.$EDX_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/student-data-collection" --from-literal=INSTITUTE_API_URL="http://institute-api-master.$COMMON_NAMESPACE-$envValue.svc.cluster.local:8080/api/v1/institute"  --from-literal=EDX_PEN_TEAM_ROLES="PEN_TEAM_ROLE" --from-literal=DISABLE_SDC_FUNCTIONALITY=$disableSdcFunctionality --dry-run -o yaml | oc apply -f -
 echo
 echo Setting environment variables for $APP_NAME-backend-$SOAM_KC_REALM_ID application
 oc -n $PEN_NAMESPACE-$envValue set env --from=configmap/$APP_NAME-backend-config-map dc/$APP_NAME-backend-$SOAM_KC_REALM_ID