diff --git a/backend/src/components/sdc/sdc.js b/backend/src/components/sdc/sdc.js
index 57d87751c..52c14136a 100644
--- a/backend/src/components/sdc/sdc.js
+++ b/backend/src/components/sdc/sdc.js
@@ -91,50 +91,65 @@ async function getSDCSchoolCollectionStudentPaginated(req, res) {
   try {
     const search = [];
 
-    search.push({
-      condition: null,
-      searchCriteriaList: [{ key: 'sdcSchoolCollection.collectionEntity.collectionID', value: req.params.collectionID, operation: FILTER_OPERATION.EQUAL, valueType: VALUE_TYPE.UUID }]
-    });
-
-    search.push({
-      condition: CONDITION.AND,
-      searchCriteriaList: createSearchCriteria(req.query.searchParams)
-    });
+    if(req.params.collectionID) {
+      search.push({
+        condition: null,
+        searchCriteriaList: [{
+          key: 'sdcSchoolCollection.collectionEntity.collectionID',
+          value: req.params.collectionID,
+          operation: FILTER_OPERATION.EQUAL,
+          valueType: VALUE_TYPE.UUID
+        }]
+      });
+    }
+    if(req.query.searchParams) {
+      search.push({
+        condition: CONDITION.AND,
+        searchCriteriaList: createSearchCriteria(req.query.searchParams)
+      });
+    }
 
-    if(req.query.searchParams['tabFilter']) {
+    if(req.query.searchParams?.['tabFilter']) {
       search.push({
         condition: CONDITION.AND,
         searchCriteriaList: createTabFilter(req.query.searchParams['tabFilter'])
       });
     }
 
-    if (req.query.searchParams['multiFieldName']) {
+    if (req.query.searchParams?.['multiFieldName']) {
       search.push({
         condition: CONDITION.AND,
         searchCriteriaList: createMultiFieldNameSearchCriteria(req.query.searchParams['multiFieldName'])
       });
     }
-    if (req.query.searchParams['penLocalIdNumber']) {
+    if (req.query.searchParams?.['penLocalIdNumber']) {
       search.push({
         condition: CONDITION.AND,
         searchCriteriaList: createLocalIdPenSearchCriteria(req.query.searchParams['penLocalIdNumber'])
       });
     }
 
-    if (req.query.searchParams['moreFilters']) {
+    if (req.query.searchParams?.['moreFilters']) {
       let criteriaArray = createMoreFiltersSearchCriteria(req.query.searchParams['moreFilters']);
       criteriaArray.forEach(criteria => {
         search.push(criteria);
       });
     }
 
-    if(req.query.searchParams['assignedPen']) {
+    if(req.query.searchParams?.['assignedPen']) {
       search.push({
         condition: CONDITION.AND,
         searchCriteriaList: createAssignedPENSearchCriteria(req.query.searchParams['assignedPen'])
       });
     }
 
+    if(req.query.assignedStudentID) {
+      search.push({
+        condition: null,
+        searchCriteriaList: [{ key: 'assignedStudentId', value: req.query.assignedStudentID, operation: FILTER_OPERATION.EQUAL, valueType: VALUE_TYPE.UUID }]
+      });
+    }
+
 
     const params = {
       params: {
@@ -225,6 +240,7 @@ async function getSDCSchoolCollectionStudentPaginatedSlice(req, res) {
       value.schoolName = getSchoolName(school);
       value.districtName = getDistrictName(cacheService.getDistrictJSONByDistrictId(school.districtID));
       value.districtID = school.districtID;
+      value.mincode = cacheService.getSchoolBySchoolID(value.schoolID)?.mincode;
     });
 
     return res.status(HttpStatus.OK).json(data);
diff --git a/backend/src/config/index.js b/backend/src/config/index.js
index 82e64b42c..23f76a379 100644
--- a/backend/src/config/index.js
+++ b/backend/src/config/index.js
@@ -186,7 +186,8 @@ nconf.defaults({
     bannerColor: process.env.BANNER_COLOR,
     webSocketURL: process.env.WEB_SOCKET_URL,
     disableSdcFunctionality: process.env.DISABLE_SDC_FUNCTIONALITY === 'true',
-    edxURL: process.env.EDX_URL
+    edxURL: process.env.EDX_URL,
+    enableEdxRelease: process.env.ENABLE_EDX_RELEASE
   },
   sdc: {
     rootURL: process.env.SDC_API_URL,
diff --git a/backend/src/routes/config.js b/backend/src/routes/config.js
index 3437d0309..096bd0da7 100644
--- a/backend/src/routes/config.js
+++ b/backend/src/routes/config.js
@@ -14,7 +14,8 @@ async function getConfig(req, res) {
     BANNER_COLOR: frontendConfig.bannerColor,
     WEB_SOCKET_URL: frontendConfig.webSocketURL,
     DISABLE_SDC_FUNCTIONALITY: frontendConfig.disableSdcFunctionality,
-    EDX_URL: frontendConfig.edxURL
+    EDX_URL: frontendConfig.edxURL,
+    ENABLE_EDX_RELEASE: frontendConfig.enableEdxRelease
   };
   return res.status(HttpStatus.OK).json(frontConfig);
 }
diff --git a/backend/src/routes/sdc.js b/backend/src/routes/sdc.js
index eabe68a5e..d6ec961fb 100644
--- a/backend/src/routes/sdc.js
+++ b/backend/src/routes/sdc.js
@@ -54,6 +54,7 @@ router.get('/collection/:collectionID/sdcSchoolCollections', passport.authentica
 router.get('/collection/:collectionID/sdcDistrictCollections', passport.authenticate('jwt', {session: false}, undefined), permUtils.checkUserHasPermission(PERMISSION.STUDENT_DATA_COLLECTION), extendSession, permUtils.isValidUUIDParam('collectionID'), getSdcDistrictCollections);
 
 //student
+router.get('/sdcSchoolCollectionStudent/byAssignedStudentID', passport.authenticate('jwt', {session: false}, undefined), permUtils.checkUserHasPermission(PERMISSION.STUDENT_DATA_COLLECTION), extendSession, permUtils.isValidUUIDQueryParam('assignedStudentID'), getSDCSchoolCollectionStudentPaginated);
 router.get('/sdcSchoolCollectionStudent/:sdcSchoolCollectionStudentID', passport.authenticate('jwt', {session: false}, undefined), permUtils.checkUserHasPermission(PERMISSION.STUDENT_DATA_COLLECTION), extendSession, permUtils.isValidUUIDParam('sdcSchoolCollectionStudentID'), getSDCSchoolCollectionStudentDetail);
 router.post('/sdcSchoolCollectionStudent/:sdcSchoolCollectionStudentID/update-pen/:penCode', passport.authenticate('jwt', {session: false}, undefined), permUtils.checkUserHasPermission(PERMISSION.STUDENT_DATA_COLLECTION), extendSession, updateStudentPEN);
 
diff --git a/frontend/src/components/common/CompareDemographicModal.vue b/frontend/src/components/common/CompareDemographicModal.vue
index 5566bbda0..8fad42347 100644
--- a/frontend/src/components/common/CompareDemographicModal.vue
+++ b/frontend/src/components/common/CompareDemographicModal.vue
@@ -11,13 +11,13 @@
         text="Compare"
         icon="mdi-content-copy"
         :disabled="disabled"
-        @click-action="compare"
         :bind="props"
+        @click-action="compare"
       />
     </template>
     <v-card id="requestInfoDialogCard">
       <CompareDemographicsCommon
-        v-if="compareModalOpen"
+        v-if="compareModalOpen && !useEdxRelease"
         v-model:selected-records="studentRecords"
         title="Compare/View"
         :close-compare-modal="closeCompareModal"
@@ -59,6 +59,49 @@
           />
         </template>
       </CompareDemographicsCommon>
+      <CompareDemographicsCommonV2
+        v-if="compareModalOpen && useEdxRelease"
+        v-model:selected-records="studentRecords"
+        title="Compare/View"
+        :close-compare-modal="closeCompareModal"
+      >
+        <template #actions="{clearError, validateAction, disableMerge, disableDemerge, disableMoveSld, twin, merge, demerge, moveSldRecords}">
+          <PrimaryButton
+            id="compareModalCancelBtn"
+            text="Cancel"
+            secondary
+            @click-action="[closeCompareModal(), clearError()]"
+          />
+          <PrimaryButton
+            id="moveSldBtn"
+            text="Move Sld Record"
+            primary
+            :disabled="disableMoveSld()"
+            @click-action="moveSldRecords()"
+          />
+          <PrimaryButton
+            id="twinBtn"
+            text="Twin"
+            primary
+            :disabled="validateAction()"
+            @click-action="twin()"
+          />
+          <PrimaryButton
+            id="demergeBtn"
+            text="Demerge"
+            primary
+            :disabled="disableDemerge()"
+            @click-action="demerge()"
+          />
+          <PrimaryButton
+            id="mergeBtn"
+            text="Merge PENs"
+            primary
+            :disabled="disableMerge()"
+            @click-action="merge()"
+          />
+        </template>
+      </CompareDemographicsCommonV2>
     </v-card>
   </v-dialog>
 </template>
@@ -70,12 +113,15 @@ import CompareDemographicsCommon from './CompareDemographicsCommon.vue';
 import {deepCloneObject} from '@/utils/common';
 import alertMixin from '@/mixins/alertMixin';
 import staleStudentRecordMixin from '@/mixins/staleStudentRecordMixin';
+import CompareDemographicsCommonV2 from '@/components/common/CompareDemographicsCommonV2.vue';
+import {mapState} from 'pinia';
+import {appStore} from '@/store/modules/app';
 
 export default {
-  emits: ['update:selectedRecords','closeCompare'],
   name: 'CompareDemographicModal',
   components: {
     CompareDemographicsCommon,
+    CompareDemographicsCommonV2,
     PrimaryButton,
     TertiaryButton
   },
@@ -94,6 +140,7 @@ export default {
       required: true
     }
   },
+  emits: ['update:selectedRecords','closeCompare'],
   data() {
     return {
       compareModalOpen: false,
@@ -101,6 +148,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(appStore, ['config']),
     studentRecords: {
       get: function() {
         return this.selectedRecords;
@@ -108,6 +156,9 @@ export default {
       set: function(value) {
         this.$emit('update:selectedRecords', value);
       }
+    },
+    useEdxRelease() {
+      return this.config.ENABLE_EDX_RELEASE;
     }
   },
   created() {
diff --git a/frontend/src/components/common/CompareDemographicsCommonV2.vue b/frontend/src/components/common/CompareDemographicsCommonV2.vue
new file mode 100644
index 000000000..4cd90e1bc
--- /dev/null
+++ b/frontend/src/components/common/CompareDemographicsCommonV2.vue
@@ -0,0 +1,1125 @@
+<template>
+  <v-card
+    fluid
+    class="px-4"
+    elevation="0"
+    style="overflow-y: auto;"
+  >
+    <MergeStudentsModal
+      v-if="mergeStudentsModalOpen"
+      :merge-students-modal-open="mergeStudentsModalOpen"
+      :merged-to-student-i-d="mergedToStudentID"
+      :merged-from-student-i-d="mergedFromStudentID"
+      @merge-students-modal-open-emit="mergeStudentsModalOpenEmit"
+    />
+    <v-card-title class="px-0 py-5">
+      <v-row>
+        <v-col
+          v-if="title"
+          cols="2"
+          class="pr-0 py-0"
+        >
+          {{ title }}
+        </v-col>
+        <v-col
+          cols="2"
+          class="py-0 pr-0"
+        >
+          <v-text-field
+            id="enterAPenTxtField"
+            v-model="penToAdd"
+            variant="outlined"
+            density="compact"
+            label="Enter a PEN"
+            maxlength="9"
+            :disabled="studentRecords.length > 2"
+            :rules="penRules"
+            hide-details="auto"
+            @keyup.enter="enterPushed()"
+            @input="checkStudentStatusForValidPen()"
+          />
+        </v-col>
+        <v-col
+          class="py-0 pt-1"
+          cols="5"
+        >
+          <PrimaryButton
+            id="addPenBtn"
+            :disabled=" isLoadingStudent || !isValidPEN(penToAdd) || studentRecords.length >= 3"
+            :loading="isLoadingStudent"
+            text="Add PEN"
+            @click-action="addPEN"
+          />
+          <span
+            v-if="isSearchedPENMerged"
+            id="truePenMessage"
+            class="pl-1"
+            style="font-size: 1rem;"
+          >{{
+            truePenMessage
+          }} <a
+            :tabindex="0"
+            @click="updateAddPen()"
+            @keyup.enter="updateAddPen()"
+          > {{
+            truePen
+          }}</a></span>
+        </v-col>
+        <v-col class="py-0">
+          <v-btn
+            v-if="closeCompareModal"
+            id="closeCompareModalBtn"
+            variant="flat"
+            icon
+            @click="[closeCompareModal(), clearError()]"
+          >
+            <v-icon
+              large
+              color="#38598A"
+            >
+              mdi-close
+            </v-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-card-title>
+    <v-divider />
+    <v-data-table class="sldTable pb-2">
+      <template #default>
+        <thead>
+          <tr>
+            <th
+              v-for="(header, index) in headers"
+              :id="`${header.text}Header`"
+              :key="index"
+              class="header-font"
+              :title="header.tooltip"
+            >
+              {{ header.text }}
+            </th>
+          </tr>
+        </thead>
+      </template>
+    </v-data-table>
+    <div
+      v-for="(students, index) in studentRecords"
+      :key="index"
+      class="pb-2"
+    >
+      <v-row
+        id="studentDemographicsTableTopRow"
+        class="studentDemographicsTable"
+        no-gutters
+      >
+        <span class="pl-2 pr-0 flexBox">
+          <div>
+            <v-checkbox
+              v-model="checkedStudents[index]"
+              density="compact"
+              class="bannerCheckbox pa-0 ma-0"
+              hide-details="true"
+              color="#606060"
+              @update:model-value="validateAction"
+            />
+          </div>
+          <a
+            class="ml-2"
+            @click="updateSldRowDisplay(students.pen, !sldDataTablesToDisplay[students.pen])"
+          >
+            <v-icon
+              small
+              :icon="sldDataTablesToDisplay[students.pen]?'mdi-chevron-down':'mdi-chevron-up'"
+              color="#1A5A96"
+            />
+          </a>
+          <a
+            class="ml-1 pr-1"
+            @click="openStudentDetails(students.studentID)"
+          >
+            {{ formatPen(students.pen) }}
+          </a>
+          <v-tooltip
+            v-if="students['statusCode']==='M'"
+            bottom
+          >
+            <template #activator="{ props }">
+              <v-chip
+                v-if="students['statusCode']==='M'"
+                color="deep-purple"
+                text-color="white"
+                small
+                class="px-2"
+                v-bind="props"
+              >M</v-chip>
+            </template>
+            <span>Merged to {{ students.truePen }}</span>
+          </v-tooltip>
+        </span>
+        <span
+          v-for="(key, idx) in studentDataHeaders"
+          :key="idx"
+          :ref="key+`Col`"
+          class="pl-4 pr-3"
+        >
+          <span
+            v-if="key==='dob'"
+            ref="dobText"
+          >
+            {{ formatDob(students[key],'uuuu-MM-dd','uuuu/MM/dd') }}
+          </span>
+          <span v-else-if="key==='mincode'">{{ formatMincode(students[key]) }}</span>
+          <span v-else-if="key==='postalCode'">{{ formatPostalCode(students[key]) }}</span>
+          <span v-else>{{ students[key] }}</span>
+        </span>
+      </v-row>
+      <v-row
+        id="studentDemographicsTableBottomRow"
+        class="studentDemographicsTable pb-2"
+        no-gutters
+      >
+        <span class="pl-11">
+          Demog Code: {{ students.demogCode }}
+        </span>
+        <span class="pl-4 pr-3" />
+        <span class="pl-4 pr-3 bottom-field-item">{{ equalsIgnoreCase(students.legalLastName,students.usualLastName)? '' : students.usualLastName }}</span>
+        <span class="pl-4 pr-3 bottom-field-item">{{ equalsIgnoreCase(students.legalFirstName, students.usualFirstName)? '' : students.usualFirstName }}</span>
+        <span class="pl-4 pr-3 bottom-field-item">{{ equalsIgnoreCase(students.legalMiddleNames, students.usualMiddleNames)? '' : students.usualMiddleNames }}</span>
+        <span class="pl-4 pr-3" />
+        <span class="pl-4 pr-3" />
+        <v-spacer />
+        <a
+          class="removePenLink pr-3"
+          @click="removeRecord(students.studentID, index)"
+        >
+          <v-icon
+            small
+            color="#38598A"
+          >mdi-close</v-icon>
+          Remove Student
+        </a>
+      </v-row>
+      <v-data-table
+        v-if="sldDataTablesToDisplay[students.studentID]"
+        class="sldTable"
+        :headers="headers"
+        :items="sldData[students.studentID]"
+        :items-length="sldDataTablesNumberOfRows[students.studentID]"
+        :items-per-page="sldDataTablesNumberOfRows[students.studentID]"
+        @update:items-per-page="getSldData(students.studentID)"
+      >
+        <template #headers />
+        <template #item="item">
+          <tr>
+            <td
+              v-for="header in item.columns"
+              :key="header.id"
+              :class="[header.id, existSldUsualName(item.item.raw)? 'two-rows-column' : 'one-row-column']"
+            >
+              <v-checkbox
+                v-if="header.type === 'select'"
+                v-model="item.item.raw.selected"
+                density="compact"
+                class="studentCheckbox pa-0 ma-0"
+                color="#606060"
+                :disabled="sldSelectDisabled(students.studentID)"
+              />
+              <div
+                v-else-if="header.value === 'mincode'"
+                :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
+              >
+                <span class="top-field-item">{{ item.item.raw.mincode }}</span>
+                <span
+                  v-if="existSldUsualName(item.item.raw)"
+                  class="bottom-field-item"
+                />
+              </div>
+              <div
+                v-else-if="header.value === 'legalLastName'"
+                :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
+              >
+                <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
+                <span
+                  v-if="existSldUsualName(item.item.raw)"
+                  class="bottom-field-item"
+                >{{ item.item.raw['usualLastName'] }}</span>
+              </div>
+              <div
+                v-else-if="header.value === 'legalFirstName'"
+                :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
+              >
+                <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
+                <span
+                  v-if="existSldUsualName(item.item.raw)"
+                  class="bottom-field-item"
+                >{{ item.item.raw['usualFirstName'] }}</span>
+              </div>
+              <div
+                v-else-if="header.value === 'legalMiddleNames'"
+                :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
+              >
+                <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
+                <span
+                  v-if="existSldUsualName(item.item.raw)"
+                  class="bottom-field-item"
+                >{{ item.item.raw['usualMiddleNames'] }}</span>
+              </div>
+              <div
+                v-else-if="header.value === 'dob'"
+                :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
+              >
+                <span class="top-field-item">{{ formatDob(item.item.raw[header.value],'uuuuMMdd','uuuu/MM/dd') }}</span>
+                <span
+                  v-if="existSldUsualName(item.item.raw)"
+                  class="bottom-field-item"
+                />
+              </div>
+              <div
+                v-else-if="header.value === 'updateDate'"
+                :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
+              >
+                <span class="top-field-item">{{ formatDateFromDateTime(item.item.raw[header.value]) }}</span>
+                <span
+                  v-if="existSldUsualName(item.item.raw)"
+                  class="bottom-field-item"
+                />
+              </div>
+              <div
+                v-else
+                :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
+              >
+                <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
+                <span
+                  v-if="existSldUsualName(item.item.raw)"
+                  class="bottom-field-item"
+                />
+              </div>
+            </td>
+          </tr>
+        </template>
+      </v-data-table>
+      <v-row
+        v-show="sldDataTablesToDisplay[students.studentID]"
+        class="pl-4"
+      >
+        <TertiaryButton
+          text="More"
+          icon="$plus"
+          @click-action="updateSldTableRows(students.studentID, sldDataTablesNumberOfRows[students.studentID] + 10)"
+        />
+        <TertiaryButton
+          text="Less"
+          icon="$minus"
+          @click-action="updateSldTableRows(students.studentID, sldDataTablesNumberOfRows[students.studentID] - 10)"
+        />
+      </v-row>
+    </div>
+    <v-progress-linear
+      indeterminate
+      color="blue"
+      :active="isProcessing"
+    />
+    <div v-if="selectedRecords && selectedRecords.length">
+      <v-divider />
+      <v-card-actions class="px-0">
+        <v-spacer />
+        <slot
+          name="actions"
+          :clear-error="clearError"
+          :validate-action="validateAction"
+          :disable-merge="disableMerge"
+          :disable-demerge="disableDemerge"
+          :disable-move-sld="disableMoveSld"
+          :merge="merge"
+          :demerge="demerge"
+          :twin="twin"
+          :move-sld-records="moveSldRecords"
+        />
+      </v-card-actions>
+    </div>
+    <ConfirmationDialog
+      ref="confirmationDialog"
+      :show-title-bar="false"
+    >
+      <template #message>
+        <v-row class="mb-3">
+          <v-col>
+            <span>Are you sure you want to demerge PENs <strong>{{ getMergedFromPen() }}</strong> and <strong>{{ getMergedToPen() }}</strong>?</span>
+          </v-col>
+        </v-row>
+      </template>
+    </ConfirmationDialog>
+    <ConfirmationDialog
+      ref="moveSldConfirmationDialog"
+      :show-title-bar="false"
+    >
+      <template #message>
+        <v-row>
+          <v-col>
+            <span>Are you sure you want to move the selected SLD records from <strong>{{ movedFromStudent.pen }}</strong> to <strong>{{ movedToStudent.pen }}</strong></span>?
+          </v-col>
+        </v-row>
+      </template>
+    </ConfirmationDialog>
+  </v-card>
+</template>
+
+<script>
+import {formatDob, formatMincode, formatPen, formatPostalCode} from '@/utils/format';
+import PrimaryButton from '../util/PrimaryButton.vue';
+import ApiService from '../../common/apiService';
+import {REQUEST_TYPES, Routes, STUDENT_CODES} from '@/utils/constants';
+import {isValidPEN} from '@/utils/validation';
+import alertMixin from '@/mixins/alertMixin';
+import servicesSagaMixin from '@/mixins/servicesSagaMixin';
+import router from '../../router';
+import TertiaryButton from '../util/TertiaryButton.vue';
+import {equalsIgnoreCase, getMatchedRecordsByStudent, sortArrayByDate} from '@/utils/common';
+import ConfirmationDialog from '@/components/util/ConfirmationDialog.vue';
+import { mapState } from 'pinia';
+import MergeStudentsModal from '@/components/common/MergeStudentsModal.vue';
+import staleStudentRecordMixin from '@/mixins/staleStudentRecordMixin';
+import {notificationsStore} from '@/store/modules/notifications';
+import {studentStore} from '@/store/modules/student';
+import _ from 'lodash';
+import {DateTimeFormatter, LocalDateTime} from '@js-joda/core';
+
+export default {
+  name: 'CompareDemographicsCommon',
+  components: {
+    TertiaryButton,
+    PrimaryButton,
+    ConfirmationDialog,
+    MergeStudentsModal
+  },
+  mixins: [alertMixin, servicesSagaMixin, staleStudentRecordMixin],
+  props: {
+    selectedRecords: {
+      type: Array,
+      required: true
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    closeCompareModal: {
+      type: Function,
+      default: null
+    }
+  },
+  emits: ['update:selectedRecords'],
+  data() {
+    return {
+      studentDataHeaders: [
+        'mincode',
+        'legalLastName',
+        'legalFirstName',
+        'legalMiddleNames',
+        'genderCode',
+        'dob',
+        'localID',
+        'gradeCode',
+        'postalCode',
+      ],
+      headers: [
+        { id: 'table-checkbox', type: 'select', key: 'checkbox', sortable: false },
+        {text: 'Date', value: 'updateDate', key: 'date', sortable: false, tooltip: 'Activity Date'},
+        {text: 'Mincode', value: 'mincode', key: 'mincode', sortable: false, tooltip: 'Mincode'},
+        {text: 'Surname', value: 'legalLastName', key: 'surname', sortable: false, tooltip: 'Legal Surname'},
+        {text: 'Given', value: 'legalFirstName', key: 'givenName', sortable: false, tooltip: 'Legal Given Name'},
+        {text: 'Middle', value: 'legalMiddleNames', key: 'middleName', sortable: false, tooltip: 'Legal Middle Name'},
+        {text: 'Gen', value: 'gender', key: 'gender', sortable: false, tooltip: 'Gender'},
+        {text: 'Birth Date', value: 'dob', key: 'dob', sortable: false, tooltip: 'Birth Date'},
+        {text: 'Local ID', value: 'localID', key: 'localId', sortable: false, tooltip: 'Local ID'},
+        {text: 'Gr', value: 'enrolledGradeCode', key: 'grade', sortable: false, tooltip: 'Grade Code'},
+        {text: 'Postal Code', value: 'postalCode', key: 'postalCode', sortable: false, tooltip: 'Postal Code'},
+      ],
+      penToAdd: null,
+      penRules: [v => (!v || isValidPEN(v)) || this.penHint],
+      penHint: 'Invalid PEN',
+      studentDNEErrorMessage: 'Error! This student does not exist in the system.',
+      penAlreadyAddedErrorMessage: 'Pen already added to compare list.',
+      fetchingStudentErrorMessage: 'Error occurred while fetching student, Please try again later.',
+      sldData: {},
+      storedSldData: {},
+      sldDataTablesToDisplay: {},
+      sldDataTablesNumberOfRows: {},
+      checkedStudents: [],
+      isStudentDataUpdated: false,
+      isLoadingStudent: false,
+      isSearchedPENMerged: false,
+      studentDataMap: new Map(),
+      mergeStudentsModalOpen: false,
+      mergedToStudentID: '',
+      mergedFromStudentID: '',
+      movedFromStudent: {},
+      movedToStudent: {},
+    };
+  },
+  computed: {
+    ...mapState(notificationsStore, ['notification']),
+    studentRecords: {
+      get: function() {
+        return this.sortStudents(this.selectedRecords);
+      },
+      set: async function(value) {
+        this.$emit('update:selectedRecords', value);
+      }
+    },
+    checkedSldStudents() {
+      return Object.values(this.sldData).flatMap(records => records.filter(record => record.selected));
+    },
+  },
+  watch: {
+    notification(val) {
+      if (val) {
+        const notificationData = val;
+        if (notificationData.sagaName === 'PEN_SERVICES_STUDENT_DEMERGE_COMPLETE_SAGA' && this.sagaId === notificationData.sagaId && notificationData.studentID === this.mergedFromStudent?.studentID && notificationData.sagaStatus === 'COMPLETED') {
+          this.notifyDemergeSagaCompleteMessage();
+          // Open students in new tabs
+          setTimeout(() => {
+            this.openStudentDetails(this.mergedToStudent.studentID);
+          }, 1000);
+          setTimeout(() => {
+            this.openStudentDetails(this.mergedFromStudent.studentID);
+          }, 500);
+        } else if (notificationData.sagaName === 'PEN_SERVICES_MOVE_SLD_SAGA' && notificationData.sagaStatus === 'COMPLETED') {
+          this.handleMoveSldSagaCompleteMessage(notificationData);
+        } else if (notificationData.eventType === 'UPDATE_STUDENT' && notificationData.eventOutcome === 'STUDENT_UPDATED' && notificationData.eventPayload) {
+          this.showWarningAndDisableActionIfUpdatedStudentMatched(notificationData);
+        }
+      }
+    },
+  },
+  mounted() {
+    this.studentRecords.forEach(student => {
+      this.getSldData(student.studentID);
+      if(student.trueStudentID) {
+        this.getTrueStudent(student, student.trueStudentID);
+      }
+    });
+    this.checkedStudents = [];
+  },
+  methods: {
+    ...mapState(studentStore, ['setStudentInProcessStatus', 'clearStudentInProcessStatus']),
+    equalsIgnoreCase,
+    sortStudents(array){
+      return array.sort(this.sortStudentRecordsForCompare);
+    },
+    sortStudentRecordsForCompare(student1, student2){
+      let student1digit = student1.pen.substring(0,1);
+      let student2digit = student2.pen.substring(0,1);
+      //Determine which is the oldest, which will be mergedToPen
+      //If two PENs are merged and neither start with "1", or both start with "1" use the lowest number as the survivor
+      //If two PENs are merged and one starts with "1" and other starts with something else, the other is the survivor
+      if((student1digit == '1' && student2digit == '1') || (student1digit != '1' && student2digit != '1')) {
+        return (student1.pen > student2.pen) ? 1 : -1;
+      } else {
+        return (student1.pen < student2.pen) ? 1 : -1;
+      }
+    },
+    addPEN() {
+      const isRecordAlreadyAdded = this.studentRecords.find(el => el.pen === this.penToAdd);
+      if (isRecordAlreadyAdded) {
+        this.setFailureAlert(this.penAlreadyAddedErrorMessage);
+        return;
+      }
+      this.getSldData(this.studentDataMap.get(this.penToAdd)?.studentID);
+      const student = this.studentDataMap.get(this.penToAdd);
+      if (student) {
+        this.studentRecords.push(student);
+        this.studentRecords = _.sortBy(this.studentRecords, o => o.pen);
+        this.penToAdd = null;
+        this.truePenMessage = null;
+        this.truePen = null;
+        this.isSearchedPENMerged = false;
+      } else {
+        ApiService.apiAxios
+          .get(Routes['student'].ROOT_ENDPOINT + '/', {params: {pen: this.penToAdd}})
+          .then(response => {
+            this.studentRecords.push(response.data);
+            this.studentRecords = _.sortBy(this.studentRecords, o => o.pen);
+          })
+          .catch(error => {
+            console.log(error);
+            this.setFailureAlert(this.studentDNEErrorMessage);
+          })
+          .finally(() => {
+            this.penToAdd = null;
+          });
+      }
+    },
+    clearError() {
+      this.penToAdd = null;
+    },
+    enterPushed() {
+      this.addPEN();
+    },
+    updateAddPen() {
+      const isRecordAlreadyAdded = this.studentRecords.find(el => el.pen === this.truePen);
+      if (isRecordAlreadyAdded) {
+        this.setFailureAlert(this.penAlreadyAddedErrorMessage);
+        return;
+      }
+      this.penToAdd = this.truePen;
+      this.addPEN();
+    },
+    async checkStudentStatusForValidPen() {
+      const isProceed = this.penToAdd && this.isValidPEN(this.penToAdd) && (!this.studentRecords || this.studentRecords?.length < 3);
+      if (isProceed) {
+        this.isLoadingStudent = true;
+        this.truePenMessage = null;
+        this.truePen = null;
+        this.isSearchedPENMerged = false;
+        try {
+          const studentResponse = await ApiService.apiAxios
+            .get(Routes['student'].ROOT_ENDPOINT + '/', {params: {pen: this.penToAdd}});
+          const student = studentResponse.data;
+          this.studentDataMap.set(student.pen, student);
+          if (student.statusCode === STUDENT_CODES.MERGED) {
+            const trueStudentResponse = await this.getTrueStudent(student, student.trueStudentID);
+            this.studentDataMap.set(trueStudentResponse.data.pen, trueStudentResponse.data);
+            this.truePenMessage = `${student.pen} is Merged to `;
+            this.truePen = trueStudentResponse.data.pen;
+            this.isSearchedPENMerged = true;
+          }
+        } catch (error) {
+          if (error?.response?.status === 404 && error?.response?.data?.message) {
+            this.setFailureAlert(this.studentDNEErrorMessage);
+          } else {
+            this.setFailureAlert(this.fetchingStudentErrorMessage);
+          }
+        } finally {
+          this.isLoadingStudent = false;
+        }
+      } else {
+        // reset values if the entered pen is removed
+        this.truePenMessage = null;
+        this.truePen = null;
+        this.isSearchedPENMerged = false;
+      }
+    },
+    formatDateFromDateTime(inputDate) {
+      const date = LocalDateTime.parse(inputDate);
+      return date.format(DateTimeFormatter.ofPattern('yyyy/MM/dd'));
+    },
+    formatDob,
+    formatMincode,
+    formatPostalCode,
+    formatPen,
+    sortArrayByDate,
+    getMatchedRecordsByStudent,
+    getSldData(assignedStudentID) {
+      ApiService.apiAxios
+        .get(Routes.sdc.SDC_SCHOOL_COLLECTION_STUDENT + '/byAssignedStudentID', {
+          params: {
+            pageNumber: 0,
+            pageSize: this.pageSize,
+            sort: {
+              'sdcSchoolCollection.uploadDate': 'DESC'
+            },
+            assignedStudentID: assignedStudentID,
+            tableFormat: true
+          }
+        })
+        .then(response => {
+          if (response?.data?.length > 0) {
+            response.data.forEach(sld => sld.selected = false);
+          }
+          this.storedSldData[assignedStudentID] = response.data?.content;
+          this.updateSldRowDisplay(assignedStudentID, true);
+          this.updateSldTableRows(assignedStudentID, 10);
+        })
+        .catch(error => {
+          console.log(error);
+          this.setFailureAlert(this.studentDNEErrorMessage);
+        });
+    },
+    async getTrueStudent(student, trueStudentID) {
+      const trueStudent = await ApiService.apiAxios.get(Routes['student'].ROOT_ENDPOINT + '/demographics/' + trueStudentID);
+      student.truePen = trueStudent.data.pen;
+      return trueStudent;
+    },
+    isValidPEN,
+    existSldUsualName(sldData) {
+      return !!sldData.usualSurname || !!sldData.usualGivenName || !!sldData.usualMiddleName;
+    },
+    openStudentDetails(studentID) {
+      const route = router.resolve({ name: REQUEST_TYPES.student.label, params: {studentID: studentID}});
+      window.open(route.href, '_blank');
+    },
+    removeRecord(studentID, index) {
+      const student = this.studentRecords.find(item => item.studentID === studentID);
+      this.studentRecords = this.studentRecords.filter(item => item.studentID !== studentID);
+      this.checkedStudents = this.checkedStudents.filter((item, idx) => idx !== index);
+      this.validateAction();
+      this.updateSldRowDisplay(student.pen, false);
+      this.resetSldSelection();
+    },
+    updateSldRowDisplay(id, value) {
+      this.sldDataTablesToDisplay[id] = value;
+    },
+    updateSldTableRows(id, value) {
+      if(value < 0) {
+        value = 0;
+      } else if(value > this.storedSldData[id]?.length) {
+        value = this.storedSldData[id]?.length;
+      }
+      this.sldDataTablesNumberOfRows[id] = value;
+
+      if(value === 0){
+        this.sldData[id] = [];
+      }else{
+        this.sldData[id] = this.storedSldData[id].slice(0, value);
+      }
+    },
+    validateAction() {
+      let cnt = 0;
+      this.checkedStudents.forEach(checked => cnt += checked ? 1 : 0);
+      return cnt !== 2;
+    },
+    disableMerge() {
+      if (this.validateAction()) {
+        return true;
+      }
+      const selectedStudents = this.getSelectedStudents();
+      if (selectedStudents.length === 2) {
+        return this.validateStudentsAreMerged(selectedStudents[0], selectedStudents[1]);
+      }
+      return true;
+    },
+    disableDemerge() {
+      if (this.isProcessing || this.demergeSagaComplete) {
+        return true;
+      }
+      if (this.validateAction()) {
+        return true;
+      }
+
+      const selectedStudents = this.getSelectedStudents();
+      if (selectedStudents.length === 2) {
+        return !this.validateStudentsAreMerged(selectedStudents[0], selectedStudents[1]);
+      }
+      return true;
+    },
+    disableMoveSld() {
+      return this.isProcessing || this.checkedSldStudents.length <= 0;
+    },
+    validateTwinRecordsExist(studentID, twinStudentID) {
+      return getMatchedRecordsByStudent(studentID)
+        .then(data => {
+          if (data && data.length > 0) {
+            const twin = data.find(item => item.matchedStudentID === twinStudentID || item.studentID === twinStudentID);
+            if (twin) {
+              this.setFailureAlert('Error! Records are already twinned.');
+              return true;
+            }
+          }
+          return false;
+        })
+        .catch(error => {
+          this.setFailureAlert('An error occurred while loading the possible matches in twin validation. Please try again later.');
+          console.log(error);
+          return true;  // set true to make the validation failed
+        });
+    },
+    getSelectedStudents() {
+      return this.checkedStudents.map((checked, idx) => {
+        if (!checked) {
+          return false;
+        } else {
+          return this.studentRecords[idx];
+        }
+      }).filter(item => !!item);
+    },
+    async twin() {
+      const selectedStudents = this.getSelectedStudents();
+      let warningMessage = this.getWarningMessage();
+      if (warningMessage) {
+        this.setWarningAlert(warningMessage);
+        return;
+      }
+      // Determine which is the oldest, which will be mergedToPen
+      let student = selectedStudents[0];
+      let twinStudent = selectedStudents[1];
+
+      // Same Pen validation
+      if (this.validateStudentsHaveSamePen(student, twinStudent,
+        'Error! PENs cannot be twinned, as same PENs are selected.')) {
+        return;
+      }
+      // Status validation
+      if (this.validateStudentIsStatusOfMerged(student, twinStudent,
+        'Error! PENs cannot be twinned, as one of the PENs has a status of merged.')) {
+        return;
+      }
+      // Twins validation
+      const hasAnyTwins = await this.validateTwinRecordsExist(student.studentID, twinStudent.studentID);
+      if (hasAnyTwins) {
+        return;
+      }
+
+      const twinRequests = [
+        {
+          studentID: student.studentID,
+          matchedStudentID: twinStudent.studentID,
+          matchReasonCode: 'MINISTRY',
+        }
+      ];
+
+      return ApiService.apiAxios
+        .post(Routes['penMatch'].POSSIBLE_MATCHES, twinRequests)
+        .then(() => {
+          this.setSuccessAlert('Success! The two records have been twinned.');
+        })
+        .catch(error => {
+          this.setFailureAlert('An error occurred while saving twinned students. Please try again later.');
+          console.log(error);
+        });
+    },
+    async merge() {
+      const selectedStudents = this.getSelectedStudents();
+      let warningMessage = this.getWarningMessage();
+      if (warningMessage) {
+        this.setWarningAlert(warningMessage);
+        return;
+      }
+
+      let student1digit = selectedStudents[0].pen.substring(0,1);
+      let student2digit = selectedStudents[1].pen.substring(0,1);
+
+      // Determine which is the oldest, which will be mergedToPen
+      //If two PENs are merged and neither start with "1", or both start with "1" use the lowest number as the survivor
+      //If two PENs are merged and one starts with "1" and other starts with something else, the other is the survivor
+      if((student1digit == '1' && student2digit == '1') || (student1digit != '1' && student2digit != '1')) {
+        [this.mergedToStudent, this.mergedFromStudent] = _.sortBy(selectedStudents, ['pen']);
+      } else {
+        [this.mergedFromStudent, this.mergedToStudent ] = _.sortBy(selectedStudents, ['pen']);
+      }
+
+      // Same Pen validation
+      if (this.validateStudentsHaveSamePen(this.mergedToStudent, this.mergedFromStudent,
+        'Error! PENs cannot be merged, as same PENs are selected.')) {
+        return;
+      }
+      // Status validation
+      if (this.validateStudentIsStatusOfMerged(this.mergedToStudent, this.mergedFromStudent,
+        'Error! PENs cannot be merged, as one of the PENs has a status of merged.')) {
+        return;
+      }
+      // Merge validation
+      const hasAnyMergedFrom = await this.validateStudentHasAnyMergedFrom(this.mergedFromStudent.studentID);
+      if (hasAnyMergedFrom) {
+        return;
+      }
+
+      // open the merge student / pen modal and the following two values are its props
+      this.mergeStudentsModalOpen = true;
+      this.mergedToStudentID = this.mergedToStudent.studentID;
+      this.mergedFromStudentID = this.mergedFromStudent.studentID;
+    },
+    async demerge() {
+      const selectedStudents = this.getSelectedStudents();
+      let warningMessage = this.getWarningMessage();
+      if (warningMessage) {
+        this.setWarningAlert(warningMessage);
+        return;
+      }
+      if (selectedStudents[0].statusCode === 'M') { // This check is enough as validateDemerge is performed before.
+        this.mergedFromStudent = selectedStudents[0];
+        this.mergedToStudent = selectedStudents[1];
+      } else {
+        this.mergedFromStudent = selectedStudents[1];
+        this.mergedToStudent = selectedStudents[0];
+      }
+
+      let result = await this.$refs.confirmationDialog.open(null, null,
+        {color: '#fff', width: 580, closeIcon: true, dark: false, rejectText: 'No'});
+      if (!result) {
+        return;
+      }
+      await this.executeDemerge();
+    },
+    async moveSldRecords() {
+      let warningMessage = this.getWarningMessage();
+      if (warningMessage) {
+        this.setWarningAlert(warningMessage);
+        return;
+      }
+
+      this.movedFromStudent = this.studentRecords.find(student => this.checkedSldStudents.some(record => record.assignedStudentId === student.studentID));
+      this.movedToStudent = this.studentRecords.find(student => student.pen !== this.movedFromStudent.pen);
+
+      let result = await this.$refs.moveSldConfirmationDialog.open(null, null,
+        {color: '#fff', width: 580, closeIcon: true, dark: false, resolveText: 'Move'});
+      if (!result) {
+        return;
+      }
+      
+      this.setStudentInProcessStatus(this.movedFromStudent.studentID);
+      this.isProcessing = true;
+      const moveSldSagaData = this.checkedSldStudents.map(record => {
+        return _.pick(record, ['pen', 'distNo', 'schlNo', 'reportDate', 'studentId']);
+      });
+      const moveSldRequest = {
+        moveSldSagaData, 
+        movedToPen: this.movedToStudent.pen,
+        studentID: this.movedFromStudent.studentID
+      };
+      ApiService.apiAxios
+        .post(Routes['penServices'].ROOT_ENDPOINT + '/' + this.movedFromStudent.studentID + '/move-sld', moveSldRequest)
+        .then(response => {
+          this.setSuccessAlert('Your request to move sld records is accepted.');
+          this.sagaId = response.data;
+        })
+        .catch(error => {
+          console.log(error);
+          this.isProcessing = false;
+          this.clearStudentInProcessStatus(this.movedFromStudent.studentID);
+          if (error?.response?.status === 409 && error?.response?.data?.message) {
+            this.setFailureAlert(error?.response?.data?.message);
+          } else {
+            this.setFailureAlert('Your request to move sld records could not be accepted, please try again later.');
+          }
+        });
+    },
+    showWarningAndDisableActionIfUpdatedStudentMatched(notificationData){
+      try {
+        const student = JSON.parse(notificationData.eventPayload);
+        if (student?.pen &&  !this.isProcessing && this.studentRecords?.some(el => el?.pen === student.pen)) {
+          this.isStudentDataUpdated = true;
+          const warningMessage = `Student details for ${student.pen} is updated by ${student.updateUser}, Please refresh the page.`;
+          this.setWarningAlert(warningMessage);
+          const studentID = student.studentID;
+          this.addStaleDataToMap({studentID, warningMessage});
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    mergeStudentsModalOpenEmit(value) {
+      this.mergeStudentsModalOpen = value;
+    },
+    getWarningMessage() {
+      let warningMessage;
+      for (const stud of this.getSelectedStudents()) {
+        warningMessage = this.getMessageForStudent(stud.studentID);
+        if (warningMessage) {
+          break;
+        }
+      }
+      return warningMessage;
+    },
+    sldSelectDisabled(assignedStudentID) {
+      const isMergedOrDeceased = this.studentRecords.some(student => student.statusCode === STUDENT_CODES.MERGED || student.statusCode === STUDENT_CODES.DECEASED);
+      return this.isProcessing || this.studentRecords.length !== 2 || isMergedOrDeceased || this.checkedSldStudents.some(record => !record.assignedStudentId.startsWith(assignedStudentID));
+    },
+    resetSldSelection(){
+      this.checkedSldStudents.forEach(record => record.selected = false);
+    },
+    handleMoveSldSagaCompleteMessage(notificationData) {
+      if(this.sagaId === notificationData.sagaId && notificationData.studentID === this.movedFromStudent?.studentID) {
+        this.notifyMoveSldSagaCompleteMessage();
+      } else {
+        this.showWarningAndDisableActionIfMovedSldStudentMatched(notificationData.studentID);
+      }
+    },
+    notifyMoveSldSagaCompleteMessage() {
+      this.setSuccessAlert('Success! Your request to move sld records is completed.');
+      this.isProcessing = false;
+      this.studentRecords.forEach(student => {
+        this.getSldData(student.studentID);
+      });
+      this.resetSldSelection();
+    },
+    showWarningAndDisableActionIfMovedSldStudentMatched(studentID){
+      const student = this.studentRecords?.find(el => el?.studentID === studentID);
+      if (!this.isProcessing && student) {
+        const warningMessage = `SLD records for ${student.pen} is updated by other users, Please refresh the page.`;
+        this.setWarningAlert(warningMessage);
+        this.addStaleDataToMap({studentID, warningMessage});
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+  #addPenBtn {
+    height: 2.858em;
+  }
+  #closeCompareModalBtn {
+    float: right;
+  }
+  .paginatedButtons {
+    color: #38598A;
+  }
+
+  .header-font {
+    font-size: 0.9em;
+    font-weight: bold !important;
+  }
+
+  .sldTable :deep(.one-row-column) {
+    height: 32px !important;
+  }
+  .sldTable :deep(.two-rows-column) {
+    height: 42px !important;
+  }
+  .studentDemographicsTable a {
+    color: #1A5A96;
+  }
+  .studentDemographicsTable {
+    background-color: #eeeeee;
+    font-size: 0.875rem;
+    color: rgba(0, 0, 0, 1);
+  }
+  .studentDemographicsTable :deep(.bottom-field-item) {
+    font-style: italic;
+  }
+
+  #studentDemographicsTableTopRow > span:nth-child(1) {
+    vertical-align: top;
+    padding-top: 6px;
+    width: 15%;
+  }
+
+  #studentDemographicsTableTopRow > span:nth-child(9),
+  #studentDemographicsTableTopRow > span:nth-child(6) {
+    vertical-align: top;
+    padding-top: 6px;
+    width: 5%;
+  }
+  #studentDemographicsTableTopRow > span:nth-child(2),
+  #studentDemographicsTableTopRow > span:nth-child(8) {
+    vertical-align: top;
+    padding-top: 6px;
+    width: 10%;
+  }
+  #studentDemographicsTableTopRow > span:nth-child(10) {
+    vertical-align: top;
+    padding-top: 6px;
+    text-align: right;
+    width: 9%;
+  }
+  #studentDemographicsTableTopRow > span:nth-child(7) {
+    vertical-align: top;
+    padding-top: 6px;
+    width: 10%;
+  }
+  #studentDemographicsTableTopRow > span:nth-child(3),
+  #studentDemographicsTableTopRow > span:nth-child(4),
+  #studentDemographicsTableTopRow > span:nth-child(5) {
+    vertical-align: top;
+    padding-top: 6px;
+    width: 12%;
+  }
+
+  #studentDemographicsTableBottomRow /deep/ span:nth-child(1) {
+    vertical-align: top;
+    width: 15%;
+  }
+  #studentDemographicsTableBottomRow /deep/ span:nth-child(2) {
+    vertical-align: top;
+    width: 10%;
+  }
+  #studentDemographicsTableBottomRow /deep/ span:nth-child(6) {
+    vertical-align: top;
+    width: 5%;
+  }
+  #studentDemographicsTableBottomRow /deep/ span:nth-child(7) {
+    vertical-align: top;
+    width: 10%;
+  }
+  #studentDemographicsTableBottomRow /deep/ span:nth-child(3),
+  #studentDemographicsTableBottomRow /deep/ span:nth-child(4),
+  #studentDemographicsTableBottomRow /deep/ span:nth-child(5) {
+    vertical-align: top;
+    width: 12%;
+  }
+
+  .sldTable {
+    font-size: 0.9rem;
+  }
+
+  .sldTable .flex-row-div {
+    height: 21px !important;
+  }
+
+  .sldTable .flex-column-div {
+    display: flex;
+    flex-direction: column;
+    height: 42px !important;
+  }
+
+  .sldTable .top-field-item {
+    margin: 0px;
+    padding: 0px;
+  }
+
+  .sldTable .bottom-field-item {
+    font-style: italic;
+    margin: 0px;
+    padding: 0px;
+  }
+
+  .sldTable /deep/ tr th:nth-child(1),
+  .sldTable /deep/ tr th:nth-child(7),
+  .sldTable /deep/ tr th:nth-child(10),
+  .sldTable /deep/ tr td:nth-child(1),
+  .sldTable /deep/ tr td:nth-child(7),
+  .sldTable /deep/ tr td:nth-child(10) {
+    width: 5%;
+  }
+  .sldTable /deep/ tr th:nth-child(9),
+  .sldTable /deep/ tr th:nth-child(8),
+  .sldTable /deep/ tr th:nth-child(3),
+  .sldTable /deep/ tr th:nth-child(2),
+  .sldTable /deep/ tr td:nth-child(9),
+  .sldTable /deep/ tr td:nth-child(8),
+  .sldTable /deep/ tr td:nth-child(3)
+   {
+    width: 10%;
+  }
+  .sldTable /deep/ tr td:nth-child(2)
+  {
+    width: 10%;
+  }
+  .sldTable /deep/ tr th:nth-child(11),
+  .sldTable /deep/ tr td:nth-child(11){
+    width: 10%;
+    text-align: right !important;
+    padding-right: 12px;
+  }
+  .sldTable /deep/ tr th:nth-child(4),
+  .sldTable /deep/ tr th:nth-child(5),
+  .sldTable /deep/ tr th:nth-child(6),
+  .sldTable /deep/ tr td:nth-child(4),
+  .sldTable /deep/ tr td:nth-child(5),
+  .sldTable /deep/ tr td:nth-child(6) {
+    width: 12%;
+  }
+
+  .studentCheckbox :deep(.v-input__details){
+      display: none;
+  }
+
+  .bannerCheckbox :deep(.v-input__control){
+      height: 24px !important;
+  }
+
+  .flexBox {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+
+    /*padding: 8px 12px;*/
+  }
+  .flexBox a {
+    margin-top: 2px;
+    margin-left: 12px;
+  }
+
+  :deep(.v-data-table-footer){
+      display: none;
+  }
+</style>
diff --git a/frontend/src/components/common/CustomTable.vue b/frontend/src/components/common/CustomTable.vue
index 6574fa762..54bf76876 100644
--- a/frontend/src/components/common/CustomTable.vue
+++ b/frontend/src/components/common/CustomTable.vue
@@ -56,9 +56,9 @@
           </th>
         </tr>
       </template>
-      <template #item="props">
+      <template #item="{props, index}">
         <tr
-          class="hoverTable"
+          :class="clickable ? `hoverTable`:``"
           @click="rowclicked(props.item.raw)"
         >
           <td
@@ -72,75 +72,114 @@
               hide-details="true"
               @click.prevent.stop="onClick(props)"
             />
-            <div v-else>
-              <span v-if="column.key === 'studentPen'">
-                
-                {{ getAssignedPen(props.item.raw['assignedPen']) }}
-              </span>
-
-              <div v-else-if="column.key === 'schoolName'">
-                <a
-                  :href="schoolSafeURL(props.item.raw.schoolID, props.item.raw.sdcSchoolCollectionID)"
-                  target="_link"
-                  :class="{ 'disabled-link': !props.item.raw.schoolID || !props.item.raw.sdcSchoolCollectionID }"
-                  @click="props.item.raw.schoolID && props.item.raw.sdcSchoolCollectionID ? true : $event.preventDefault()"
-                >
-                  {{ props.item.raw['schoolName'] }}
-                </a>
-              </div>
-              <div v-else-if="column.key === 'districtName'">
-                <a
-                  :href="districtSafeURL(props.item.raw.districtID, props.item.raw.sdcDistrictCollectionID)"
-                  target="_link"
-                  :class="{ 'disabled-link': !props.item.raw.districtID || !props.item.raw.sdcDistrictCollectionID }"
-                  @click="props.item.raw.districtID && props.item.raw.sdcDistrictCollectionID ? true : $event.preventDefault()"
-                >
-                  {{ props.item.raw['districtName'] }}
-                </a>
-              </div>
-
-              <span v-else-if="column.key === 'legalName'">
-                {{ displayName(props.item.raw['legalFirstName'], props.item.raw['legalMiddleNames'], props.item.raw['legalLastName']) }}
-              </span>
+            <div
+              v-else
+            >
+              <span :class="highlightChanges && index !== data.length-1 && data[index][column.key] !== data[index+1]?.[column.key] ? `highlight`: ``">
+                <span v-if="column.key === 'studentPen'">
 
-              <div v-else-if="column.key === 'isAdult'">
-                <span v-if="props.item.raw['isAdult'] !== null || props.item.raw['isAdult' !== undefined]">{{ props.item.raw['isAdult'] === "true" ? 'Yes' : 'No' }}</span>
-              </div>
+                  {{ getAssignedPen(props.item.raw['assignedPen']) }}
+                </span>
 
-              <div v-else-if="column.key === 'fte'">
-                <span>{{ props.item.raw['fte'] === 0 ? 0 : props.item.raw['fte'] }}</span>
-              </div>
-              <div v-else-if="column.key === 'mappedIndigenousEnrolledProgram' || column.key === 'mappedLanguageEnrolledProgram'">
-                <template v-if="props.item.raw[column.key]">
-                  <span
-                    v-for="(progs, idx) in props.item.raw[column.key].split(',')"
-                    :key="idx"
+                <div v-else-if="column.key === 'schoolName'">
+                  <a
+                    v-if="showLinks"
+                    :href="schoolSafeURL(props.item.raw.schoolID, props.item.raw.sdcSchoolCollectionID)"
+                    target="_link"
+                    :class="{ 'disabled-link': !props.item.raw.schoolID || !props.item.raw.sdcSchoolCollectionID }"
+                    @click.stop="props.item.raw.schoolID && props.item.raw.sdcSchoolCollectionID ? true : $event.preventDefault()"
                   >
-                    <div>{{ progs }}</div>
+                    {{ props.item.raw['schoolName'] }}
+                  </a>
+                  <span v-else>
+                    {{ props.item.raw['schoolName'] }}
                   </span>
-                </template>
-                <template v-else>
-                  <div>-</div>
-                </template>
-              </div>
-              <span v-else-if="column.key === 'resolution'">
-                <slot
-                  :sdc-school-collection-student="props.item.raw"
-                  name="resolution"
-                >
+                </div>
+                <div v-else-if="column.key === 'districtName'">
+                  <a
+                    v-if="showLinks"
+                    :href="districtSafeURL(props.item.raw.districtID, props.item.raw.sdcDistrictCollectionID)"
+                    target="_link"
+                    :class="{ 'disabled-link': !props.item.raw.districtID || !props.item.raw.sdcDistrictCollectionID }"
+                    @click.stop="props.item.raw.districtID && props.item.raw.sdcDistrictCollectionID ? true : $event.preventDefault()"
+                  >
+                    {{ props.item.raw['districtName'] }}
+                  </a>
+                  <span v-else>
+                    {{ props.item.raw['districtName'] }}
+                  </span>
+                </div>
+
+                <span v-else-if="column.key === 'legalName'">
+                  <span :class="highlightChanges && index !== data.length-1 && data[index]['legalLastName'] !== data[index+1]?.['legalLastName'] ? `highlight`: ``">
+                    {{ props.item.raw['legalLastName'] }}
+                  </span>
+                  <span v-if="props.item.raw['legalFirstName'] || props.item.raw['legalMiddleNames']">,
+                    <span
+                      v-if="props.item.raw['legalFirstName']"
+                      :class="highlightChanges && index !== data.length-1 && data[index]['legalFirstName'] !== data[index+1]?.['legalFirstName'] ? `highlight`: ``"
+                    > {{ props.item.raw['legalFirstName'] }}</span>
+                    <span
+                      v-if="props.item.raw['legalMiddleNames']"
+                      :class="highlightChanges && index !== data.length-1 && data[index]['legalMiddleNames'] !== data[index+1]?.['legalMiddleNames'] ? `highlight`: ``"
+                    > ({{ props.item.raw['legalMiddleNames'] }})</span>
+                  </span>
+                </span>
+
+                <div v-else-if="column.key === 'isAdult'">
+                  <span v-if="props.item.raw['isAdult'] !== null || props.item.raw['isAdult' !== undefined]">{{ props.item.raw['isAdult'] === "true" ? 'Yes' : 'No' }}</span>
+                </div>
+
+                <div v-else-if="column.key === 'fte'">
+                  <span>{{ props.item.raw['fte'] === 0 ? 0 : props.item.raw['fte'] }}</span>
+                </div>
+                <div v-else-if="column.key === 'mappedIndigenousEnrolledProgram' || column.key === 'mappedLanguageEnrolledProgram'">
                   <template v-if="props.item.raw[column.key]">
-                    {{ props.item.raw[column.key] }}
+                    <span
+                      v-for="(progs, idx) in props.item.raw[column.key].split(',')"
+                      :key="idx"
+                    >
+                      <div>{{ progs }}</div>
+                    </span>
+                  </template>
+                  <template v-else>
+                    <div>-</div>
                   </template>
-                  <template v-else>-</template>
-                </slot>
+                </div>
+                <div v-else-if="column.key === 'updateDate'">
+                  <span>{{ formatDateFromDateTime(props.item.raw[column.key]) }}</span>
+                </div>
+                <span v-else-if="column.key === 'resolution'">
+                  <slot
+                    :sdc-school-collection-student="props.item.raw"
+                    name="resolution"
+                  >
+                    <template v-if="props.item.raw[column.key]">
+                      {{ props.item.raw[column.key] }}
+                    </template>
+                    <template v-else>-</template>
+                  </slot>
+                </span>
+                <span v-else-if="props.item.raw[column.key]">{{ props.item.raw[column.key] }}</span>
+                <span v-else-if="column.title !== 'select'">-</span>
               </span>
-              <span v-else-if="props.item.raw[column.key]">{{ props.item.raw[column.key] }}</span>
-              <span v-else-if="column.title !== 'select'">-</span>
-
-              <div v-if="column.hasOwnProperty('subHeader')">
+              <div
+                v-if="column.hasOwnProperty('subHeader')"
+                :class="highlightChanges && index !== data.length-1 && data[index][column.subHeader.key] !== data[index+1]?.[column.subHeader.key] ? `highlight td-data`: `td-data`"
+              >
                 <div v-if="column.subHeader.key === 'usualName'">
-                  <span v-if="props.item.raw['usualLastName'] || props.item.raw['usualFirstName'] || props.item.raw['usualMiddleNames']">
-                    {{ displayName(props.item.raw['usualFirstName'], props.item.raw['usualMiddleNames'], props.item.raw['usualLastName']) }}
+                  <span :class="highlightChanges && index !== data.length-1 && data[index]['usualLastName'] !== data[index+1]?.['usualLastName'] ? `highlight`: ``">
+                    {{ props.item.raw['usualLastName'] }}
+                  </span>
+                  <span v-if="props.item.raw['usualFirstName'] || props.item.raw['usualMiddleNames']">,
+                    <span
+                      v-if="props.item.raw['usualFirstName']"
+                      :class="highlightChanges && index !== data.length-1 && data[index]['usualFirstName'] !== data[index+1]?.['usualFirstName'] ? `highlight`: ``"
+                    > {{ props.item.raw['usualFirstName'] }}</span>
+                    <span
+                      v-if="props.item.raw['usualMiddleNames']"
+                      :class="highlightChanges && index !== data.length-1 && data[index]['usualMiddleNames'] !== data[index+1]?.['usualMiddleNames'] ? `highlight`: ``"
+                    > ({{ props.item.raw['usualMiddleNames'] }})</span>
                   </span>
                   <span v-else>-</span>
                 </div>
@@ -169,6 +208,7 @@ import {appStore} from '@/store/modules/app';
 import {mapState} from 'pinia';
 import {authStore} from '@/store/modules/auth';
 import {sanitizeUrl} from '@braintree/sanitize-url';
+import {DateTimeFormatter, LocalDateTime} from '@js-joda/core';
 
 export default {
   name: 'CustomTable',
@@ -200,6 +240,18 @@ export default {
       type: Boolean,
       required: true,
       default: false
+    },
+    highlightChanges: {
+      type: Boolean,
+      default: false
+    },
+    showLinks: {
+      type: Boolean,
+      default: true
+    },
+    clickable: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['reload', 'openStudentDetails', 'selections', 'editSelectedRow'],
@@ -290,6 +342,10 @@ export default {
       }
       this.masterCheckbox = this.selected.length > 0 && this.isAllSelected();
     },
+    formatDateFromDateTime(inputDate) {
+      const date = LocalDateTime.parse(inputDate);
+      return date.format(DateTimeFormatter.ofPattern('yyyy/MM/dd'));
+    },
     getSdcStudentStatusIconColor(status) {
       if (status === 'FUNDWARN') {
         return '#ff9800';
@@ -340,7 +396,7 @@ export default {
        display: none;
  }
 
- tr:hover td {
+ .hoverTable tr:hover td {
   background-color: #e8e8e8 !important;
   cursor: pointer;
 }
@@ -358,4 +414,8 @@ export default {
   cursor: not-allowed;
   text-decoration: none;
 }
+.highlight {
+  font-weight: bold;
+  color: #008000 !important;
+}
 </style>
diff --git a/frontend/src/components/data-collection/AllStudents/DetailComponent.vue b/frontend/src/components/data-collection/AllStudents/DetailComponent.vue
index 20d35ca71..bffa98811 100644
--- a/frontend/src/components/data-collection/AllStudents/DetailComponent.vue
+++ b/frontend/src/components/data-collection/AllStudents/DetailComponent.vue
@@ -101,6 +101,7 @@
   >
     <ViewStudentDetailsComponent
       :selected-student-ids="studentForEdit"
+      :readonly="['PROVDUPES', 'DUPES_RES', 'COMPLETED'].includes(collectionObject?.collectionStatusCode)"
       @reload-students="reloadStudentsFlag = true"
       @close="closeAndLoadStudents"
     />
diff --git a/frontend/src/components/data-collection/AllStudents/EditStudent.vue b/frontend/src/components/data-collection/AllStudents/EditStudent.vue
index cc8d7d174..9e5fcd8ba 100644
--- a/frontend/src/components/data-collection/AllStudents/EditStudent.vue
+++ b/frontend/src/components/data-collection/AllStudents/EditStudent.vue
@@ -90,7 +90,7 @@
                         :maxlength="9"
                         :rules="penRules"
                         density="compact"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                     <v-col>
@@ -101,7 +101,7 @@
                         variant="underlined"
                         :maxlength="12"
                         density="compact"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                   </v-row>
@@ -114,7 +114,7 @@
                         :rules="[rules.required()]"
                         model-type="yyyyMMdd"
                         density="compact"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                     <v-col>
@@ -128,7 +128,7 @@
                         variant="underlined"
                         :rules="[rules.required()]"
                         density="compact"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                   </v-row>
@@ -142,7 +142,7 @@
                         :rules="[rules.required()]"
                         :maxlength="25"
                         density="compact"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                     <v-col>
@@ -153,7 +153,7 @@
                         variant="underlined"
                         :maxlength="25"
                         density="compact"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                   </v-row>
@@ -166,7 +166,7 @@
                         variant="underlined"
                         :maxlength="25"
                         density="compact"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                     <v-col>
@@ -177,7 +177,7 @@
                         variant="underlined"
                         :maxlength="25"
                         density="compact"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                   </v-row>
@@ -190,7 +190,7 @@
                         variant="underlined"
                         :maxlength="25"
                         density="compact"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                     <v-col>
@@ -201,7 +201,7 @@
                         variant="underlined"
                         :maxlength="25"
                         density="compact"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                   </v-row>
@@ -217,7 +217,7 @@
                         item-title="dropdownText"
                         :rules="[rules.required()]"
                         density="compact"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                     <v-col>
@@ -230,7 +230,7 @@
                         item-value="schoolFundingCode"
                         item-title="dropdownText"
                         density="compact"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                   </v-row>
@@ -244,7 +244,7 @@
                         variant="underlined"
                         density="compact"
                         autocomplete="off"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                     <v-col>
@@ -255,7 +255,7 @@
                         variant="underlined"
                         :items="sdcCollection.otherCoursesValidNumbers"
                         density="compact"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                   </v-row>
@@ -268,7 +268,7 @@
                         variant="underlined"
                         :items="sdcCollection.supportBlocksValidNumbers"
                         density="compact"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                     <v-col>
@@ -281,7 +281,7 @@
                         item-value="specialEducationCategoryCode"
                         item-title="dropdownText"
                         density="compact"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                   </v-row>
@@ -297,7 +297,7 @@
                         item-title="dropdownText"
                         density="compact"
                         :rules="[rules.required()]"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                     <v-col>
@@ -310,7 +310,7 @@
                         item-value="bandCode"
                         item-title="dropdownText"
                         density="compact"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                   </v-row>
@@ -325,7 +325,7 @@
                         item-value="homeLanguageSpokenCode"
                         item-title="dropdownText"
                         density="compact"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                     <v-col>
@@ -336,7 +336,7 @@
                         variant="underlined"
                         :maxlength="6"
                         density="compact"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                   </v-row>
@@ -351,7 +351,7 @@
                         item-value="careerProgramCode"
                         item-title="dropdownText"
                         density="compact"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                       />
                     </v-col>
                     <v-col>
@@ -366,7 +366,7 @@
                         multiple
                         density="compact"
                         :rules="enrolledProgramRules"
-                        :disabled="isSchoolCollectionSubmitted"
+                        :readonly="readonly"
                         @update:model-value="syncWithEnrolledProgramCodeOnUserInput"
                       />
                     </v-col>
@@ -444,6 +444,7 @@
                               :maxlength="sdcFieldMappings[field]?.options.maxlength"
                               density="compact"
                               variant="underlined"
+                              :readonly="readonly"
                             />
                             <v-autocomplete
                               v-else-if="sdcFieldMappings[field]?.key === 'numberOfCourses'"
@@ -454,6 +455,7 @@
                               item-title="dropdownText"
                               :label="sdcFieldMappings[field].label"
                               autocomplete="off"
+                              :readonly="readonly"
                             />
                             <v-autocomplete
                               v-else-if="sdcFieldMappings[field]?.type === 'select'"
@@ -464,6 +466,7 @@
                               :item-value="sdcFieldMappings[field].options.itemValue"
                               item-title="dropdownText"
                               :label="sdcFieldMappings[field].label"
+                              :readonly="readonly"
                             />
                             <v-autocomplete
                               v-else-if="sdcFieldMappings[field]?.type === 'multiselect'"
@@ -478,6 +481,7 @@
                               placeholder="No Program Codes"
                               :persistent-placeholder="true"
                               :selectable="() => sdcSchoolCollectionStudentDetailCopy[sdcFieldMappings[field].key].length < 8"
+                              :readonly="readonly"
                               @update:model-value="syncWithEnrolledProgramCodeOnUserInput"
                             />
                             <div v-else-if="sdcFieldMappings[field]?.type === 'datePicker'">
@@ -487,6 +491,7 @@
                                 :label="sdcFieldMappings[field]?.label"
                                 :rules="sdcFieldMappings[field].options.rules"
                                 model-type="yyyyMMdd"
+                                :readonly="readonly"
                               />
                             </div>
                           </div>
@@ -525,7 +530,7 @@
             @update:model-value="navigate"
           />
           <v-btn
-            v-if="functionType !== 'add'"
+            v-if="functionType !== 'add' && !readonly"
             id="removeRecord"
             color="#003366"
             large-icon
@@ -533,15 +538,15 @@
             text="Remove"
             variant="outlined"
             class="mr-1"
-            :disabled="isSchoolCollectionSubmitted || isDistrictCollectionSubmitted"
             @click="deleteStudent"
           />
           <v-btn
+            v-if="!readonly"
             id="saveRecord"
             color="#003366"
             text="Validate & Save"
             class="mr-1"
-            :disabled="!studentDetailsFormValid || isSchoolCollectionSubmitted || isDistrictCollectionSubmitted"
+            :disabled="!studentDetailsFormValid"
             @click="save"
           />
         </v-col>
@@ -606,9 +611,13 @@ export default {
       type: String,
       required: false,
       default: null
+    },
+    readonly: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ['next', 'show-issues', 'clear-filter', 'filter-pen', 'form-validity', 'reset-parent', 'student-object', 'close-success', 'reset-pagination'],
+  emits: ['show-issues', 'clear-filter', 'filter-pen', 'form-validity', 'reset-parent', 'student-object', 'close-success', 'reset-pagination'],
   data() {
     return {
       page: 1,
@@ -688,16 +697,6 @@ export default {
         this.courseOptions.push(i.toFixed(2).padStart(5, '0'));
       }
     },
-    next() {
-      if(sdcCollectionStore().currentStepInCollectionProcess.isComplete) {
-        this.$emit('next');
-      } else {
-        this.markStepAsComplete();
-      }
-    },
-    clearFilter() {
-      this.$emit('clear-filter');
-    },
     navigate() {
       this.getSdcSchoolCollectionStudentDetail(this.selectedStudents[this.page - 1]);
     },
diff --git a/frontend/src/components/data-collection/AllStudents/ViewStudentDetailsComponent.vue b/frontend/src/components/data-collection/AllStudents/ViewStudentDetailsComponent.vue
index cf29895d4..66ff2bfa6 100644
--- a/frontend/src/components/data-collection/AllStudents/ViewStudentDetailsComponent.vue
+++ b/frontend/src/components/data-collection/AllStudents/ViewStudentDetailsComponent.vue
@@ -30,6 +30,7 @@
         :total-students="1"
         :save-event="saveStudent"
         :show-funding-eligibility-detail="showFundingEligibilitySection()"
+        :readonly="readonly"
         @form-validity="isValid"
         @show-issues="cancel"
         @reset-parent="reset()"
@@ -104,6 +105,10 @@ export default {
       type: Array,
       required: true,
       default: null,
+    },
+    readonly: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['close', 'reload-students'],
diff --git a/frontend/src/components/penreg/student/StudentSLDHistory.vue b/frontend/src/components/penreg/student/StudentSLDHistory.vue
index 13da366ed..2692d383d 100644
--- a/frontend/src/components/penreg/student/StudentSLDHistory.vue
+++ b/frontend/src/components/penreg/student/StudentSLDHistory.vue
@@ -1,288 +1,30 @@
 <template>
-  <div
-    id="sldHistory"
-    class="px-0 pt-3 ma-0"
-    style="width: 100%;"
-  >
-    <v-row no-gutters>
-      <v-col cols="11">
-        <div
-          id="studentInfo"
-          class="px-1 pt-2 pb-5"
-        >
-          <strong class="pr-3">{{ formatPen(student.pen) }}</strong>
-          {{ getStudentName(student) }}
-        </div>
-      </v-col>
-      <v-col cols="1">
-        <CompareDemographicModal
-          v-model:selected-records="compareStudent"
-          :clear-on-exit="false"
-          :disabled="isStudentUpdated || !PROCESS_STUDENT_ROLE"
-        />
-      </v-col>
-    </v-row>
-    <v-row>
-      <v-col cols="12">
-        <v-data-table
-          id="sldHistoryDataTable"
-          class="sldTable"
-          :headers="headers"
-          :items="sldData"
-          :items-per-page="10"
-          :loading="loading"
-          no-data-text="No SLD history found"
-        >
-          <template
-            v-for="h in headers"
-            :key="h.id"
-            #[`column.${h.key}`]="{ column }"
-          >
-            <span
-              style="font-weight: bold"
-              :title="column.tooltip"
-              :class="{'file-column' : !column.countable}"
-            >
-              {{ column.text }}
-            </span>
-          </template>
-          <template #item="item">
-            <tr>
-              <td
-                v-for="header in item.columns"
-                :key="header.id"
-                :class="[header.id, existSldUsualName(item.item.raw)? 'two-rows-column' : 'one-row-column']"
-              >
-                <div
-                  v-if="header.value === 'mincode'"
-                  :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
-                >
-                  <span class="top-field-item">{{ item.item.raw.distNo + item.item.raw.schlNo }}</span>
-                  <span
-                    v-if="existSldUsualName(item.item.raw)"
-                    class="bottom-field-item"
-                  />
-                </div>
-                <div
-                  v-else-if="header.value === 'legalSurname'"
-                  :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
-                >
-                  <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
-                  <span
-                    v-if="existSldUsualName(item.item.raw)"
-                    class="bottom-field-item"
-                  >{{ item.item.raw['usualSurname'] }}</span>
-                </div>
-                <div
-                  v-else-if="header.value === 'legalGivenName'"
-                  :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
-                >
-                  <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
-                  <span
-                    v-if="existSldUsualName(item.item.raw)"
-                    class="bottom-field-item"
-                  >{{ item.item.raw['usualGivenName'] }}</span>
-                </div>
-                <div
-                  v-else-if="header.value === 'legalMiddleName'"
-                  :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
-                >
-                  <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
-                  <span
-                    v-if="existSldUsualName(item.item.raw)"
-                    class="bottom-field-item"
-                  >{{ item.item.raw['usualMiddleName'] }}</span>
-                </div>
-                <div
-                  v-else-if="header.value === 'birthDate'"
-                  :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
-                >
-                  <span class="top-field-item">{{ formatDob(item.item.raw[header.value],'uuuuMMdd','uuuu/MM/dd') }}</span>
-                  <span
-                    v-if="existSldUsualName(item.item.raw)"
-                    class="bottom-field-item"
-                  />
-                </div>
-                <div
-                  v-else
-                  :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
-                >
-                  <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
-                  <span
-                    v-if="existSldUsualName(item.item.raw)"
-                    class="bottom-field-item"
-                  />
-                </div>
-              </td>
-            </tr>
-          </template>
-        </v-data-table>
-      </v-col>
-    </v-row>
-  </div>
+  <component
+    :is="currentComponent"
+    v-bind="$props"
+  />
 </template>
-
+  >
 <script>
-import {Routes} from '@/utils/constants';
-import ApiService from '../../../common/apiService';
-import alertMixin from '../../../mixins/alertMixin';
-import {formatDob, formatMincode, formatPen, formatPostalCode} from '@/utils/format';
-import CompareDemographicModal from '@/components/common/CompareDemographicModal.vue';
+
+import StudentSLDHistoryV1 from '@/components/penreg/student/StudentSLDHistoryV1.vue';
+import StudentSLDHistoryV2 from '@/components/penreg/student/StudentSLDHistoryV2.vue';
 import {mapState} from 'pinia';
-import {sortArrayByDate} from '@/utils/common';
-import {notificationsStore} from '@/store/modules/notifications';
-import {authStore} from '@/store/modules/auth';
+import {appStore} from '@/store/modules/app';
 
 export default {
   name: 'StudentSLDHistory',
-  components: {
-    CompareDemographicModal
-  },
-  mixins: [alertMixin],
   props: {
     student: {
       type: Object,
       required: true
     }
   },
-  data() {
-    return {
-      headers: [
-        {text: 'Date', value: 'reportDate', key: 'date', sortable: false, tooltip: 'Activity Date'},
-        {text: 'Mincode', value: 'mincode', key: 'mincode', sortable: false, tooltip: 'Mincode'},
-        {text: 'Surname', value: 'legalSurname', key: 'surname', sortable: false, tooltip: 'Legal Surname'},
-        {text: 'Given', value: 'legalGivenName', key: 'givenName', sortable: false, tooltip: 'Legal Given Name'},
-        {text: 'Middle', value: 'legalMiddleName', key: 'middleName', sortable: false, tooltip: 'Legal Middle Name'},
-        {text: 'Gen', value: 'sex', key: 'gender', sortable: false, tooltip: 'Gender'},
-        {text: 'Birth Date', value: 'birthDate', key: 'dob', sortable: false, tooltip: 'Birth Date'},
-        {text: 'Local ID', value: 'localStudentId', key: 'localId', sortable: false, tooltip: 'Local ID'},
-        {text: 'Gr', value: 'enrolledGradeCode', key: 'grade', sortable: false, tooltip: 'Grade Code'},
-        {text: 'Postal Code', value: 'postal', key: 'postalCode', sortable: false, tooltip: 'Postal Code'},
-      ],
-      loading: true,
-      sldData: [],
-      compareStudent: [],
-      isStudentUpdated: false,
-    };
-  },
   computed:{
-    ...mapState(notificationsStore, ['notification']),
-    ...mapState(authStore, ['PROCESS_STUDENT_ROLE']),
-  },
-  watch: {
-    notification(val) {
-      if (val) {
-        const notificationData = val;
-        if (notificationData.eventType === 'UPDATE_STUDENT' && notificationData.eventOutcome === 'STUDENT_UPDATED' && notificationData.eventPayload) {
-          try {
-            const student = JSON.parse(notificationData.eventPayload);
-            if (student?.pen && student?.pen === this.student?.pen) {
-              this.isStudentUpdated = true;
-              this.$emit('isStudentUpdated', true);
-              const warningMessage = `Student details for ${student.pen} is updated by ${student.updateUser}, Please refresh the page.`;
-              this.setWarningAlert(warningMessage);
-              const studentID = student.studentID;
-              this.addStaleDataToMap({studentID, warningMessage});
-            }
-          } catch (e) {
-            console.error(e);
-          }
-        }
-      }
-    }
-  },
-  created() {
-    this.compareStudent[0] = this.student;
-    this.retrieveStudentSLDData();
-  },
-
-  methods: {
-    formatPen,
-    formatDob,
-    formatMincode,
-    formatPostalCode,
-    sortArrayByDate,
-    getStudentName(student) {
-      return `${student.legalLastName ? student.legalLastName + ',' : ''} ${student.legalFirstName ? student.legalFirstName : ''} ${student.legalMiddleNames ? student.legalMiddleNames : ''}`;
-    },
-    retrieveStudentSLDData() {
-      this.loading = true;
-      ApiService.apiAxios
-        .get(Routes['sld'].STUDENT_HISTORY_URL + '/', {params: {pen: this.student.pen}})
-        .then(response => {
-          if (response?.data?.length > 0) {
-            this.sldData = this.sortArrayByDate(response.data, 'reportDate', false);
-          }
-        }).catch(error => {
-          this.setFailureAlert('Could not retrieve data from API, Please try again later.');
-          console.log(error);
-        }).finally(() => {
-          this.loading = false;
-        });
-    },
-    existSldUsualName(sldData) {
-      return !!sldData.usualSurname || !!sldData.usualGivenName || !!sldData.usualMiddleName;
+    ...mapState(appStore, ['config']),
+    currentComponent() {
+      return this.config.ENABLE_EDX_RELEASE ? StudentSLDHistoryV2 : StudentSLDHistoryV1;
     }
   }
 };
 </script>
-
-<style scoped>
-#sldHistoryDataTable /deep/ table {
-  border-spacing: 0 0.25rem;
-  border-bottom: thin solid #d7d7d7;
-}
-
-#sldHistoryDataTable /deep/ table th {
-  font-size: 0.875rem;
-}
-
-#sldHistoryDataTable /deep/ table td {
-  border-bottom: none !important;
-}
-
-#studentInfo {
-  font-size: 1.25rem;
-}
-
-.sldTable /deep/ td.one-row-column {
-  height: 3rem !important;
-}
-
-.sldTable /deep/ td.two-rows-column {
-  height: 4.2rem !important;
-}
-
-.sldTable {
-  font-size: 0.85rem;
-}
-
-.sldTable .flex-column-div {
-  display: flex;
-  flex-direction: column;
-  height: 3rem !important;
-}
-
-.sldTable .top-field-item {
-  margin: 0;
-  padding: 0;
-}
-
-.sldTable .bottom-field-item {
-  font-style: italic;
-  margin: 0;
-  padding: 0;
-}
-
-.flexBox {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-
-  /*padding: 8px 12px;*/
-}
-.flexBox a {
-  margin-top: 2px;
-  margin-left: 12px;
-}
-</style>
diff --git a/frontend/src/components/penreg/student/StudentSLDHistoryV1.vue b/frontend/src/components/penreg/student/StudentSLDHistoryV1.vue
new file mode 100644
index 000000000..eb4da8576
--- /dev/null
+++ b/frontend/src/components/penreg/student/StudentSLDHistoryV1.vue
@@ -0,0 +1,288 @@
+<template>
+  <div
+    id="sldHistory"
+    class="px-0 pt-3 ma-0"
+    style="width: 100%;"
+  >
+    <v-row no-gutters>
+      <v-col cols="11">
+        <div
+          id="studentInfo"
+          class="px-1 pt-2 pb-5"
+        >
+          <strong class="pr-3">{{ formatPen(student.pen) }}</strong>
+          {{ getStudentName(student) }}
+        </div>
+      </v-col>
+      <v-col cols="1">
+        <CompareDemographicModal
+          v-model:selected-records="compareStudent"
+          :clear-on-exit="false"
+          :disabled="isStudentUpdated || !PROCESS_STUDENT_ROLE"
+        />
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12">
+        <v-data-table
+          id="sldHistoryDataTable"
+          class="sldTable"
+          :headers="headers"
+          :items="sldData"
+          :items-per-page="10"
+          :loading="loading"
+          no-data-text="No SLD history found"
+        >
+          <template
+            v-for="h in headers"
+            :key="h.id"
+            #[`column.${h.key}`]="{ column }"
+          >
+            <span
+              style="font-weight: bold"
+              :title="column.tooltip"
+              :class="{'file-column' : !column.countable}"
+            >
+              {{ column.text }}
+            </span>
+          </template>
+          <template #item="item">
+            <tr>
+              <td
+                v-for="header in item.columns"
+                :key="header.id"
+                :class="[header.id, existSldUsualName(item.item.raw)? 'two-rows-column' : 'one-row-column']"
+              >
+                <div
+                  v-if="header.value === 'mincode'"
+                  :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
+                >
+                  <span class="top-field-item">{{ item.item.raw.distNo + item.item.raw.schlNo }}</span>
+                  <span
+                    v-if="existSldUsualName(item.item.raw)"
+                    class="bottom-field-item"
+                  />
+                </div>
+                <div
+                  v-else-if="header.value === 'legalSurname'"
+                  :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
+                >
+                  <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
+                  <span
+                    v-if="existSldUsualName(item.item.raw)"
+                    class="bottom-field-item"
+                  >{{ item.item.raw['usualSurname'] }}</span>
+                </div>
+                <div
+                  v-else-if="header.value === 'legalGivenName'"
+                  :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
+                >
+                  <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
+                  <span
+                    v-if="existSldUsualName(item.item.raw)"
+                    class="bottom-field-item"
+                  >{{ item.item.raw['usualGivenName'] }}</span>
+                </div>
+                <div
+                  v-else-if="header.value === 'legalMiddleName'"
+                  :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
+                >
+                  <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
+                  <span
+                    v-if="existSldUsualName(item.item.raw)"
+                    class="bottom-field-item"
+                  >{{ item.item.raw['usualMiddleName'] }}</span>
+                </div>
+                <div
+                  v-else-if="header.value === 'birthDate'"
+                  :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
+                >
+                  <span class="top-field-item">{{ formatDob(item.item.raw[header.value],'uuuuMMdd','uuuu/MM/dd') }}</span>
+                  <span
+                    v-if="existSldUsualName(item.item.raw)"
+                    class="bottom-field-item"
+                  />
+                </div>
+                <div
+                  v-else
+                  :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
+                >
+                  <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
+                  <span
+                    v-if="existSldUsualName(item.item.raw)"
+                    class="bottom-field-item"
+                  />
+                </div>
+              </td>
+            </tr>
+          </template>
+        </v-data-table>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import {Routes} from '@/utils/constants';
+import ApiService from '../../../common/apiService';
+import alertMixin from '../../../mixins/alertMixin';
+import {formatDob, formatMincode, formatPen, formatPostalCode} from '@/utils/format';
+import CompareDemographicModal from '@/components/common/CompareDemographicModal.vue';
+import {mapState} from 'pinia';
+import {sortArrayByDate} from '@/utils/common';
+import {notificationsStore} from '@/store/modules/notifications';
+import {authStore} from '@/store/modules/auth';
+
+export default {
+  name: 'StudentSLDHistory',
+  components: {
+    CompareDemographicModal
+  },
+  mixins: [alertMixin],
+  props: {
+    student: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      headers: [
+        {text: 'Date', value: 'reportDate', key: 'date', sortable: false, tooltip: 'Activity Date'},
+        {text: 'Mincode', value: 'mincode', key: 'mincode', sortable: false, tooltip: 'Mincode'},
+        {text: 'Surname', value: 'legalSurname', key: 'surname', sortable: false, tooltip: 'Legal Surname'},
+        {text: 'Given', value: 'legalGivenName', key: 'givenName', sortable: false, tooltip: 'Legal Given Name'},
+        {text: 'Middle', value: 'legalMiddleName', key: 'middleName', sortable: false, tooltip: 'Legal Middle Name'},
+        {text: 'Gen', value: 'sex', key: 'gender', sortable: false, tooltip: 'Gender'},
+        {text: 'Birth Date', value: 'birthDate', key: 'dob', sortable: false, tooltip: 'Birth Date'},
+        {text: 'Local ID', value: 'localStudentId', key: 'localId', sortable: false, tooltip: 'Local ID'},
+        {text: 'Gr', value: 'enrolledGradeCode', key: 'grade', sortable: false, tooltip: 'Grade Code'},
+        {text: 'Postal Code', value: 'postal', key: 'postalCode', sortable: false, tooltip: 'Postal Code'},
+      ],
+      loading: true,
+      sldData: [],
+      compareStudent: [],
+      isStudentUpdated: false,
+    };
+  },
+  computed:{
+    ...mapState(notificationsStore, ['notification']),
+    ...mapState(authStore, ['PROCESS_STUDENT_ROLE']),
+  },
+  watch: {
+    notification(val) {
+      if (val) {
+        const notificationData = val;
+        if (notificationData.eventType === 'UPDATE_STUDENT' && notificationData.eventOutcome === 'STUDENT_UPDATED' && notificationData.eventPayload) {
+          try {
+            const student = JSON.parse(notificationData.eventPayload);
+            if (student?.pen && student?.pen === this.student?.pen) {
+              this.isStudentUpdated = true;
+              //this.$emit('isStudentUpdated', true);
+              const warningMessage = `Student details for ${student.pen} is updated by ${student.updateUser}, Please refresh the page.`;
+              this.setWarningAlert(warningMessage);
+              const studentID = student.studentID;
+              this.addStaleDataToMap({studentID, warningMessage});
+            }
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      }
+    }
+  },
+  created() {
+    this.compareStudent[0] = this.student;
+    this.retrieveStudentSLDData();
+  },
+
+  methods: {
+    formatPen,
+    formatDob,
+    formatMincode,
+    formatPostalCode,
+    sortArrayByDate,
+    getStudentName(student) {
+      return `${student.legalLastName ? student.legalLastName + ',' : ''} ${student.legalFirstName ? student.legalFirstName : ''} ${student.legalMiddleNames ? student.legalMiddleNames : ''}`;
+    },
+    retrieveStudentSLDData() {
+      this.loading = true;
+      ApiService.apiAxios
+        .get(Routes['sld'].STUDENT_HISTORY_URL + '/', {params: {pen: this.student.pen}})
+        .then(response => {
+          if (response?.data?.length > 0) {
+            this.sldData = this.sortArrayByDate(response.data, 'reportDate', false);
+          }
+        }).catch(error => {
+          this.setFailureAlert('Could not retrieve data from API, Please try again later.');
+          console.log(error);
+        }).finally(() => {
+          this.loading = false;
+        });
+    },
+    existSldUsualName(sldData) {
+      return !!sldData.usualSurname || !!sldData.usualGivenName || !!sldData.usualMiddleName;
+    }
+  }
+};
+</script>
+
+<style scoped>
+#sldHistoryDataTable /deep/ table {
+  border-spacing: 0 0.25rem;
+  border-bottom: thin solid #d7d7d7;
+}
+
+#sldHistoryDataTable /deep/ table th {
+  font-size: 0.875rem;
+}
+
+#sldHistoryDataTable /deep/ table td {
+  border-bottom: none !important;
+}
+
+#studentInfo {
+  font-size: 1.25rem;
+}
+
+.sldTable /deep/ td.one-row-column {
+  height: 3rem !important;
+}
+
+.sldTable /deep/ td.two-rows-column {
+  height: 4.2rem !important;
+}
+
+.sldTable {
+  font-size: 0.85rem;
+}
+
+.sldTable .flex-column-div {
+  display: flex;
+  flex-direction: column;
+  height: 3rem !important;
+}
+
+.sldTable .top-field-item {
+  margin: 0;
+  padding: 0;
+}
+
+.sldTable .bottom-field-item {
+  font-style: italic;
+  margin: 0;
+  padding: 0;
+}
+
+.flexBox {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+
+  /*padding: 8px 12px;*/
+}
+.flexBox a {
+  margin-top: 2px;
+  margin-left: 12px;
+}
+</style>
diff --git a/frontend/src/components/penreg/student/StudentSLDHistoryV2.vue b/frontend/src/components/penreg/student/StudentSLDHistoryV2.vue
new file mode 100644
index 000000000..a8cc0a3bf
--- /dev/null
+++ b/frontend/src/components/penreg/student/StudentSLDHistoryV2.vue
@@ -0,0 +1,155 @@
+<template>
+  <div
+    id="sldHistory"
+    class="px-0 pt-3 ma-0"
+    style="width: 100%;"
+  >
+    <v-row no-gutters>
+      <v-col>
+        <div
+          id="studentInfo"
+          class="px-1 pt-2 pb-5"
+        >
+          <strong class="pr-3">{{ formatPen(student.pen) }}</strong>
+          {{ getStudentName(student) }}
+        </div>
+      </v-col>
+      <v-col class="d-flex justify-end">
+        <CompareDemographicModal
+          v-model:selected-records="compareStudent"
+          :clear-on-exit="false"
+          :disabled="isStudentUpdated || !PROCESS_STUDENT_ROLE"
+        />
+      </v-col>
+    </v-row>
+    <v-row>
+      <CustomTable
+        :headers="tableHeaders"
+        :data="sldData"
+        :total-elements="totalElements"
+        :is-loading="loading"
+        :highlight-changes="true"
+        :show-links="false"
+        :clickable="false"
+      />
+    </v-row>
+  </div>
+</template>
+<script>
+import {Routes} from '@/utils/constants';
+import ApiService from '../../../common/apiService';
+import alertMixin from '../../../mixins/alertMixin';
+import {formatPen} from '@/utils/format';
+import CompareDemographicModal from '@/components/common/CompareDemographicModal.vue';
+import {mapState} from 'pinia';
+import {notificationsStore} from '@/store/modules/notifications';
+import {authStore} from '@/store/modules/auth';
+import CustomTable from '@/components/common/CustomTable.vue';
+
+export default {
+  name: 'StudentSLDHistory',
+  components: {
+    CustomTable,
+    CompareDemographicModal
+  },
+  mixins: [alertMixin],
+  props: {
+    student: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['isStudentUpdated'],
+  data() {
+    return {
+      tableHeaders: [
+        {title: 'Date', value: 'updateDate', key: 'updateDate', sortable: false, tooltip: 'Activity Date'},
+        { title: 'District', key: 'districtName' },
+        { title: 'School', key: 'schoolName' },
+        { title: 'Assigned PEN', key: 'assignedPen', subHeader: { title: 'Local ID', key: 'localID' } },
+        { title: 'Legal Surname, Given (Middle)', key: 'legalName', subHeader: { title: 'Usual Surname, Given (Middle)', key: 'usualName' } },
+        { title: 'Birthdate', key: 'dob', subHeader: { title: 'Gender', key: 'gender' } },
+        { title: 'Adult', key: 'isAdult', subHeader: { title: 'Grad', key: 'isGraduated' } },
+        { title: 'Grade', key: 'enrolledGradeCode', subHeader: { title: 'Funding Code', key: 'mappedSchoolFunding' } },
+        { title: 'Courses For Grad', key: 'mappedNoOfCourses', subHeader: { title: 'Support Blocks', key: 'supportBlocks' } },
+        { title: 'Language Program', key: 'mappedLanguageEnrolledProgram', subHeader: { title: 'Years in ELL', key: 'yearsInELL' } },
+        { title: 'Career Program', key: 'mappedCareerProgram', subHeader: { title: 'Career Code', key: 'mappedCareerProgramCode' } },
+        { title: 'Indigenous Ancestry', key: 'mappedAncestryIndicator', subHeader: { title: 'Band Code', key: 'mappedBandCode' } },
+        { title: 'Indigenous Support Program', key: 'mappedIndigenousEnrolledProgram', subHeader: { title: 'Special Education Category', key: 'mappedSpedCode' } },
+      ],
+      loading: true,
+      sldData: [],
+      compareStudent: [],
+      isStudentUpdated: false,
+      pageNumber: 1,
+      pageSize: 10,
+      totalElements: 0
+    };
+  },
+  computed:{
+    ...mapState(notificationsStore, ['notification']),
+    ...mapState(authStore, ['PROCESS_STUDENT_ROLE']),
+  },
+  watch: {
+    notification(val) {
+      if (val) {
+        const notificationData = val;
+        if (notificationData.eventType === 'UPDATE_STUDENT' && notificationData.eventOutcome === 'STUDENT_UPDATED' && notificationData.eventPayload) {
+          try {
+            const student = JSON.parse(notificationData.eventPayload);
+            if (student?.pen && student?.pen === this.student?.pen) {
+              this.isStudentUpdated = true;
+              this.$emit('isStudentUpdated', true);
+              const warningMessage = `Student details for ${student.pen} is updated by ${student.updateUser}, Please refresh the page.`;
+              this.setWarningAlert(warningMessage);
+              const studentID = student.studentID;
+              this.addStaleDataToMap({studentID, warningMessage});
+            }
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      }
+    }
+  },
+  created() {
+    this.compareStudent[0] = this.student;
+    this.retrieveStudentSLDData();
+  },
+  methods: {
+    formatPen,
+    getStudentName(student) {
+      return `${student.legalLastName ? student.legalLastName + ',' : ''} ${student.legalFirstName ? student.legalFirstName : ''} ${student.legalMiddleNames ? student.legalMiddleNames : ''}`;
+    },
+    retrieveStudentSLDData() {
+      this.loading = true;
+      ApiService.apiAxios
+        .get(Routes.sdc.SDC_SCHOOL_COLLECTION_STUDENT + '/byAssignedStudentID', {
+          params: {
+            pageNumber: this.pageNumber - 1,
+            pageSize: this.pageSize,
+            sort: {
+              'sdcSchoolCollection.uploadDate': 'DESC'
+            },
+            assignedStudentID: this.student.studentID,
+            tableFormat: true
+          }
+        })
+        .then(response => {
+          this.sldData = response?.data?.content;
+          this.totalElements = response?.data?.totalElements;
+        }).catch(error => {
+          this.setFailureAlert('Could not retrieve data from API, Please try again later.');
+          console.log(error);
+        }).finally(() => {
+          this.loading = false;
+        });
+    },
+  }
+};
+</script>
+<style scoped>
+#studentInfo {
+  font-size: 1.25rem;
+}
+</style>
diff --git a/frontend/src/components/util/DatePicker.vue b/frontend/src/components/util/DatePicker.vue
index b57fea1d9..65c765c95 100644
--- a/frontend/src/components/util/DatePicker.vue
+++ b/frontend/src/components/util/DatePicker.vue
@@ -40,6 +40,10 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['update:model-value', 'clearDate'],
@@ -72,6 +76,7 @@ export default defineComponent({
     position="left"
     :teleport="allowTeleport ? '.v-overlay-container' : false"
     auto-apply
+    :readonly="readonly"
     @update:model-value="saveDate"
   >
     <template #dp-input="{ value, onInput, onEnter, onTab }">
@@ -84,7 +89,8 @@ export default defineComponent({
         :disabled="disabled"
         variant="underlined"
         placeholder="yyyy/mm/dd"
-        :clearable="true"
+        :clearable="!readonly"
+        :readonly="readonly"
         hide-details="auto"
         @input="onInput"
         @keydown.enter.prevent="onEnter"
diff --git a/tools/config/update-configmap.sh b/tools/config/update-configmap.sh
index 2b5e1f8e1..dd71ed435 100644
--- a/tools/config/update-configmap.sh
+++ b/tools/config/update-configmap.sh
@@ -675,15 +675,18 @@ if [ "$envValue" = "dev" ]; then
   bannerColor="#8d28d7"
   SCHEDULER_CRON_DOC_TYPE_MIGRATION="0 0 0 * * *"
   disableSdcFunctionality=false
+  ENABLE_EDX_RELEASE="true"
 elif [ "$envValue" = "test" ]; then
   bannerEnvironment="TEST"
   bannerColor="#58fe01"
   SCHEDULER_CRON_DOC_TYPE_MIGRATION="0 0 0 * * *"
   disableSdcFunctionality=false
+  ENABLE_EDX_RELEASE="false"
 else
   SCHEDULER_CRON_DOC_TYPE_MIGRATION="0 0 0 17 9 *"
   disableSdcFunctionality=true
   EDUC_EDX_FRONTEND="https://educationdataexchange.gov.bc.ca"
+  ENABLE_EDX_RELEASE="false"
 fi
 
 BANNER_ENVIRONMENT="$bannerEnvironment"
@@ -694,7 +697,7 @@ RATE_LIMIT_WINDOW_IN_SEC="60"
 RATE_LIMIT_LIMIT="1000"
 
 echo Creating config map $APP_NAME-backend-config-map
-oc create -n $PEN_NAMESPACE-$envValue configmap $APP_NAME-backend-config-map --from-literal=IS_RATE_LIMIT_ENABLED="$IS_RATE_LIMIT_ENABLED" --from-literal=RATE_LIMIT_WINDOW_IN_SEC="$RATE_LIMIT_WINDOW_IN_SEC" --from-literal=RATE_LIMIT_LIMIT="$RATE_LIMIT_LIMIT" --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=SERVICE_CLIENT_ID=$APP_NAME-service --from-literal=SERVICE_CLIENT_SECRET=$studentAdminServiceClientSecret --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=INSTITUTE_ROLES="OFFSHORE_SCHOOLS_ADMIN" --from-literal=DISABLE_SDC_FUNCTIONALITY=$disableSdcFunctionality --from-literal=EDX_URL=$EDUC_EDX_FRONTEND --dry-run -o yaml | oc apply -f -
+oc create -n $PEN_NAMESPACE-$envValue configmap $APP_NAME-backend-config-map --from-literal=IS_RATE_LIMIT_ENABLED="$IS_RATE_LIMIT_ENABLED" --from-literal=RATE_LIMIT_WINDOW_IN_SEC="$RATE_LIMIT_WINDOW_IN_SEC" --from-literal=RATE_LIMIT_LIMIT="$RATE_LIMIT_LIMIT" --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=SERVICE_CLIENT_ID=$APP_NAME-service --from-literal=SERVICE_CLIENT_SECRET=$studentAdminServiceClientSecret --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=INSTITUTE_ROLES="OFFSHORE_SCHOOLS_ADMIN" --from-literal=DISABLE_SDC_FUNCTIONALITY=$disableSdcFunctionality --from-literal=EDX_URL=$EDUC_EDX_FRONTEND --from-literal=ENABLE_EDX_RELEASE=$ENABLE_EDX_RELEASE --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