diff --git a/web/src/components/civil/CivilFutureAppearances.vue b/web/src/components/civil/CivilFutureAppearances.vue
index 8d173e6c..76fadbc7 100644
--- a/web/src/components/civil/CivilFutureAppearances.vue
+++ b/web/src/components/civil/CivilFutureAppearances.vue
@@ -134,19 +134,13 @@
 
 <script lang="ts">
   import CivilAppearanceDetails from '@/components/civil/CivilAppearanceDetails.vue';
-  import { beautifyDate } from '@/filters';
   import { useCivilFileStore, useCommonStore } from '@/stores';
   import { civilAppearancesListType } from '@/types/civil';
   import { civilApprDetailType } from '@/types/civil/jsonTypes';
+  import { extractCivilAppearancesInfo } from '@/utils/utils';
   import * as _ from 'underscore';
   import { computed, defineComponent, onMounted, ref } from 'vue';
 
-  enum appearanceStatus {
-    UNCF = 'Unconfirmed',
-    CNCL = 'Canceled',
-    SCHD = 'Scheduled',
-  }
-
   export default defineComponent({
     components: {
       CivilAppearanceDetails,
@@ -159,7 +153,7 @@
       const isDataReady = ref(false);
 
       const futureAppearancesList = ref<civilAppearancesListType[]>([]);
-      const futureAppearancesJson = ref<civilApprDetailType[]>([]);
+      let futureAppearancesJson: civilApprDetailType[] = [];
       const sortBy = ref('date');
       const sortDesc = ref(true);
 
@@ -279,7 +273,7 @@
 
       const getFutureAppearances = () => {
         const data = civilFileStore.civilFileInformation.detailsData;
-        futureAppearancesJson.value = data.appearances.apprDetail;
+        futureAppearancesJson = [...data.appearances.apprDetail];
         ExtractFutureAppearancesInfo();
         if (futureAppearancesList.value.length) {
           isDataReady.value = true;
@@ -290,45 +284,20 @@
 
       const ExtractFutureAppearancesInfo = () => {
         const currentDate = new Date();
-        for (const appIndex in futureAppearancesJson.value) {
-          const appInfo = {} as civilAppearancesListType;
-          const jApp = futureAppearancesJson.value[appIndex];
-
-          appInfo.index = appIndex;
-          appInfo.date = jApp.appearanceDt.split(' ')[0];
-          if (new Date(appInfo.date) < currentDate) continue;
-          appInfo.formattedDate = beautifyDate(appInfo.date);
-          appInfo.documentType = jApp.documentTypeDsc
-            ? jApp.documentTypeDsc
-            : '';
-          appInfo.result = jApp.appearanceResultCd;
-          appInfo.resultDescription = jApp.appearanceResultDsc
-            ? jApp.appearanceResultDsc
-            : '';
-          appInfo.time = getTime(jApp.appearanceTm.split(' ')[1].substr(0, 5));
-          appInfo.reason = jApp.appearanceReasonCd;
-          appInfo.reasonDescription = jApp.appearanceReasonDsc
-            ? jApp.appearanceReasonDsc
-            : '';
-          appInfo.duration = getDuration(
-            jApp.estimatedTimeHour,
-            jApp.estimatedTimeMin
-          );
-          appInfo.location = jApp.courtLocation ? jApp.courtLocation : '';
-          appInfo.room = jApp.courtRoomCd;
-          appInfo.status = jApp.appearanceStatusCd
-            ? appearanceStatus[jApp.appearanceStatusCd]
-            : '';
-          appInfo.statusStyle = getStatusStyle(appInfo.status);
-          appInfo.presider = jApp.judgeInitials ? jApp.judgeInitials : '';
-          appInfo.judgeFullName = jApp.judgeInitials ? jApp.judgeFullNm : '';
-          appInfo.appearanceId = jApp.appearanceId;
-          appInfo.supplementalEquipment = jApp.supplementalEquipmentTxt;
-          appInfo.securityRestriction = jApp.securityRestrictionTxt;
-          appInfo.outOfTownJudge = jApp.outOfTownJudgeTxt;
-
-          futureAppearancesList.value.push(appInfo);
-        }
+        futureAppearancesJson.forEach(
+          (jApp: civilApprDetailType, index: number) => {
+            const appearanceDate = jApp.appearanceDt.split(' ')[0];
+            if (new Date(appearanceDate) < currentDate) return;
+
+            const appInfo = extractCivilAppearancesInfo(
+              jApp,
+              index,
+              commonStore
+            );
+
+            futureAppearancesList.value.push(appInfo);
+          }
+        );
       };
 
       const getStatusStyle = (status) => {
diff --git a/web/src/components/civil/CivilPastAppearances.vue b/web/src/components/civil/CivilPastAppearances.vue
index 1aa4a67d..4eae9ed8 100644
--- a/web/src/components/civil/CivilPastAppearances.vue
+++ b/web/src/components/civil/CivilPastAppearances.vue
@@ -165,17 +165,12 @@
   import { civilAppearancesListType } from '@/types/civil';
   import { civilApprDetailType } from '@/types/civil/jsonTypes';
   import { CourtDocumentType, DocumentData } from '@/types/shared';
+  import { extractCivilAppearancesInfo } from '@/utils/utils';
   import * as _ from 'underscore';
   import { computed, defineComponent, inject, onMounted, ref } from 'vue';
   import { useRoute } from 'vue-router';
   import shared from '../shared';
 
-  enum appearanceStatus {
-    UNCF = 'Unconfirmed',
-    CNCL = 'Canceled',
-    SCHD = 'Scheduled',
-  }
-
   export default defineComponent({
     components: {
       CivilAppearanceDetails,
@@ -194,7 +189,7 @@
 
       const isMounted = ref(false);
       const isDataReady = ref(false);
-      const pastAppearancesJson = ref<civilApprDetailType[]>([]);
+      let pastAppearancesJson: civilApprDetailType[] = [];
       const sortBy = ref('date');
       const sortDesc = ref(true);
       const fromA2a = ref(false);
@@ -300,7 +295,7 @@
 
       const getPastAppearances = () => {
         const data = civilFileStore.civilFileInformation.detailsData;
-        pastAppearancesJson.value = data.appearances.apprDetail;
+        pastAppearancesJson = [...data.appearances.apprDetail];
         ExtractPastAppearancesInfo();
         if (pastAppearancesList.value.length) {
           isDataReady.value = true;
@@ -310,48 +305,20 @@
 
       const ExtractPastAppearancesInfo = () => {
         const currentDate = new Date();
-        for (const appIndex in pastAppearancesJson.value) {
-          const appInfo = {} as civilAppearancesListType;
-          const jApp = pastAppearancesJson.value[appIndex];
-
-          appInfo.index = appIndex;
-          appInfo.date = jApp.appearanceDt.split(' ')[0];
-          if (new Date(appInfo.date) >= currentDate) continue;
-          appInfo.formattedDate = beautifyDate(appInfo.date);
-          appInfo.documentType = jApp.documentTypeDsc
-            ? jApp.documentTypeDsc
-            : '';
-          appInfo.result = jApp.appearanceResultCd;
-          appInfo.resultDescription = jApp.appearanceResultDsc
-            ? jApp.appearanceResultDsc
-            : '';
-          appInfo.time = getTime(
-            jApp.appearanceTm.split(' ')[1].substring(0, 5)
-          );
-          appInfo.reason = jApp.appearanceReasonCd;
-          appInfo.reasonDescription = jApp.appearanceReasonDsc
-            ? jApp.appearanceReasonDsc
-            : '';
-          appInfo.duration = getDuration(
-            jApp.estimatedTimeHour,
-            jApp.estimatedTimeMin
-          );
-          appInfo.location = jApp.courtLocation ? jApp.courtLocation : '';
-          appInfo.room = jApp.courtRoomCd;
-          appInfo.status = jApp.appearanceStatusCd
-            ? appearanceStatus[jApp.appearanceStatusCd]
-            : '';
-          appInfo.statusStyle = getStatusStyle(appInfo.status);
-          appInfo.presider = jApp.judgeInitials ? jApp.judgeInitials : '';
-          appInfo.judgeFullName = jApp.judgeInitials ? jApp.judgeFullNm : '';
-
-          appInfo.appearanceId = jApp.appearanceId;
-          appInfo.supplementalEquipment = jApp.supplementalEquipmentTxt;
-          appInfo.securityRestriction = jApp.securityRestrictionTxt;
-          appInfo.outOfTownJudge = jApp.outOfTownJudgeTxt;
-
-          pastAppearancesList.value.push(appInfo);
-        }
+        pastAppearancesJson.forEach(
+          (jApp: civilApprDetailType, index: number) => {
+            const appearanceDate = jApp.appearanceDt.split(' ')[0];
+            if (new Date(appearanceDate) >= currentDate) return;
+
+            const appInfo = extractCivilAppearancesInfo(
+              jApp,
+              index,
+              commonStore
+            );
+
+            pastAppearancesList.value.push(appInfo);
+          }
+        );
       };
 
       const getStatusStyle = (status) => {
diff --git a/web/src/components/criminal/CriminalFutureAppearances.vue b/web/src/components/criminal/CriminalFutureAppearances.vue
index d77db65d..851e0d46 100644
--- a/web/src/components/criminal/CriminalFutureAppearances.vue
+++ b/web/src/components/criminal/CriminalFutureAppearances.vue
@@ -35,7 +35,7 @@
 
 <script lang="ts">
   import CriminalAppearanceDetails from '@/components/criminal/CriminalAppearanceDetails.vue';
-  import { useCriminalFileStore } from '@/stores';
+  import { useCommonStore, useCriminalFileStore } from '@/stores';
   import { criminalAppearancesListType } from '@/types/criminal';
   import { criminalApprDetailType } from '@/types/criminal/jsonTypes';
   import { extractCriminalAppearanceInfo } from '@/utils/utils';
@@ -50,6 +50,7 @@
     },
     setup() {
       const criminalFileStore = useCriminalFileStore();
+      const commonStore = useCommonStore();
 
       const futureAppearancesList = ref<criminalAppearancesListType[]>([]);
       let futureAppearancesJson: criminalApprDetailType[] = [];
@@ -81,7 +82,8 @@
             const appInfo = extractCriminalAppearanceInfo(
               jApp,
               index,
-              appearanceDate
+              appearanceDate,
+              commonStore
             );
 
             futureAppearancesList.value.push(appInfo);
diff --git a/web/src/components/criminal/CriminalPastAppearances.vue b/web/src/components/criminal/CriminalPastAppearances.vue
index be291195..badba710 100644
--- a/web/src/components/criminal/CriminalPastAppearances.vue
+++ b/web/src/components/criminal/CriminalPastAppearances.vue
@@ -35,7 +35,7 @@
 
 <script lang="ts">
   import CriminalAppearanceDetails from '@/components/criminal/CriminalAppearanceDetails.vue';
-  import { useCriminalFileStore } from '@/stores';
+  import { useCommonStore, useCriminalFileStore } from '@/stores';
   import { criminalAppearancesListType } from '@/types/criminal';
   import { criminalApprDetailType } from '@/types/criminal/jsonTypes';
   import { extractCriminalAppearanceInfo } from '@/utils/utils';
@@ -56,6 +56,7 @@
     },
     setup() {
       const criminalFileStore = useCriminalFileStore();
+      const commonStore = useCommonStore();
 
       const pastAppearancesList = ref<criminalAppearancesListType[]>([]);
       let pastAppearancesJson: criminalApprDetailType[] = [];
@@ -88,7 +89,8 @@
             const appInfo = extractCriminalAppearanceInfo(
               jApp,
               index,
-              appearanceDate
+              appearanceDate,
+              commonStore
             );
 
             pastAppearancesList.value.push(appInfo);
diff --git a/web/src/stores/CommonStore.ts b/web/src/stores/CommonStore.ts
index 356f3bc3..e7818920 100644
--- a/web/src/stores/CommonStore.ts
+++ b/web/src/stores/CommonStore.ts
@@ -134,3 +134,5 @@ export const useCommonStore = defineStore('CommonStore', {
     },
   },
 });
+
+export type CommonStore = ReturnType<typeof useCommonStore>;
diff --git a/web/src/utils/utils.ts b/web/src/utils/utils.ts
index d19b9e1c..a3ed8646 100644
--- a/web/src/utils/utils.ts
+++ b/web/src/utils/utils.ts
@@ -1,6 +1,9 @@
 import { beautifyDate } from '@/filters';
 import { AuthService } from '@/services/AuthService';
 import { useCommonStore } from '@/stores';
+import { CommonStore } from '@/stores/CommonStore';
+import { civilAppearancesListType } from '@/types/civil';
+import { civilApprDetailType } from '@/types/civil/jsonTypes';
 import { criminalAppearancesListType } from '@/types/criminal';
 import { criminalApprDetailType } from '@/types/criminal/jsonTypes';
 import { inject } from 'vue';
@@ -61,56 +64,62 @@ export const fetchStoreData = (store, methodName, data) => {
   return store[methodName.replace('update', '').toLowerCase()];
 };
 
-// This helper function is created to solve duplication errors found by SonarCloud
-// Include this as part of refactoring efforts once the pages is re-written
-export const extractCriminalAppearanceInfo = (
-  jApp: criminalApprDetailType,
-  index: number,
-  appearanceDate: string
-): criminalAppearancesListType => {
-  enum appearanceStatus {
-    UNCF = 'Unconfirmed',
-    CNCL = 'Canceled',
-    SCHD = 'Scheduled',
-  }
+const getStatusStyle = (status, commonStore) =>
+  fetchStoreData(commonStore, 'updateStatusStyle', status);
 
-  const commonStore = useCommonStore();
+const getNameOfParticipant = (lastName, givenName, commonStore) =>
+  fetchStoreData(commonStore, 'updateDisplayName', {
+    lastName: lastName,
+    givenName: givenName,
+  });
 
-  const getStatusStyle = (status) =>
-    fetchStoreData(commonStore, 'updateStatusStyle', status);
+const getTime = (time, commonStore) =>
+  fetchStoreData(commonStore, 'updateTime', time);
 
-  const getNameOfParticipant = (lastName, givenName) =>
-    fetchStoreData(commonStore, 'updateDisplayName', {
-      lastName: lastName,
-      givenName: givenName,
-    });
+const getDuration = (hr, min, commonStore) =>
+  fetchStoreData(commonStore, 'updateDuration', { hr: hr, min: min });
 
-  const getTime = (time) => fetchStoreData(commonStore, 'updateTime', time);
-
-  const getDuration = (hr, min) =>
-    fetchStoreData(commonStore, 'updateDuration', { hr: hr, min: min });
+enum appearanceStatus {
+  UNCF = 'Unconfirmed',
+  CNCL = 'Canceled',
+  SCHD = 'Scheduled',
+}
 
+// This helper function is created to resolve duplication errors found by SonarCloud.
+// It might be better to put this logic as part of the Parent component and pass it as prop
+export const extractCriminalAppearanceInfo = (
+  jApp: criminalApprDetailType,
+  index: number,
+  appearanceDate: string,
+  commonStore: CommonStore
+): criminalAppearancesListType => {
   const appInfo: criminalAppearancesListType = {
     index: index.toString(),
     date: appearanceDate,
     formattedDate: beautifyDate(appearanceDate),
-    time: getTime(jApp.appearanceTm.split(' ')[1].substring(0, 5)),
+    time: getTime(jApp.appearanceTm.split(' ')[1].substring(0, 5), commonStore),
     reason: jApp.appearanceReasonCd,
     reasonDescription: jApp.appearanceReasonDsc ?? '',
-    duration: getDuration(jApp.estimatedTimeHour, jApp.estimatedTimeMin),
+    duration: getDuration(
+      jApp.estimatedTimeHour,
+      jApp.estimatedTimeMin,
+      commonStore
+    ),
     location: jApp.courtLocation ?? '',
     room: jApp.courtRoomCd,
     firstName: jApp.givenNm || '',
     lastName: jApp.lastNm || jApp.orgNm,
     accused: getNameOfParticipant(
       jApp.lastNm || jApp.orgNm,
-      jApp.givenNm || ''
+      jApp.givenNm || '',
+      commonStore
     ),
     status: jApp.appearanceStatusCd
       ? appearanceStatus[jApp.appearanceStatusCd]
       : '',
     statusStyle: getStatusStyle(
-      jApp.appearanceStatusCd ? appearanceStatus[jApp.appearanceStatusCd] : ''
+      jApp.appearanceStatusCd ? appearanceStatus[jApp.appearanceStatusCd] : '',
+      commonStore
     ),
     presider: jApp.judgeInitials || '',
     judgeFullName: jApp.judgeInitials ? jApp.judgeFullNm : '',
@@ -124,3 +133,43 @@ export const extractCriminalAppearanceInfo = (
 
   return appInfo;
 };
+
+export const extractCivilAppearancesInfo = (
+  jApp: civilApprDetailType,
+  index: number,
+  commonStore: CommonStore
+): civilAppearancesListType => {
+  const date = jApp.appearanceDt.split(' ')[0];
+  const status = jApp.appearanceStatusCd
+    ? appearanceStatus[jApp.appearanceStatusCd]
+    : '';
+
+  const appInfo: civilAppearancesListType = {
+    index: index.toString(),
+    date,
+    formattedDate: beautifyDate(date),
+    documentType: jApp.documentTypeDsc || '',
+    result: jApp.appearanceResultCd,
+    resultDescription: jApp.appearanceResultDsc || '',
+    time: getTime(jApp.appearanceTm.split(' ')[1].substring(0, 5), commonStore),
+    reason: jApp.appearanceReasonCd,
+    reasonDescription: jApp.appearanceReasonDsc || '',
+    duration: getDuration(
+      jApp.estimatedTimeHour,
+      jApp.estimatedTimeMin,
+      commonStore
+    ),
+    location: jApp.courtLocation || '',
+    room: jApp.courtRoomCd,
+    status,
+    statusStyle: getStatusStyle(status, commonStore),
+    presider: jApp.judgeInitials ? jApp.judgeInitials : '',
+    judgeFullName: jApp.judgeInitials ? jApp.judgeFullNm : '',
+    appearanceId: jApp.appearanceId,
+    supplementalEquipment: jApp.supplementalEquipmentTxt,
+    securityRestriction: jApp.securityRestrictionTxt,
+    outOfTownJudge: jApp.outOfTownJudgeTxt,
+  };
+
+  return appInfo;
+};