diff --git a/web/src/components/civil/CivilDocumentsView.vue b/web/src/components/civil/CivilDocumentsView.vue
index 4b891d66..dfddc6fb 100644
--- a/web/src/components/civil/CivilDocumentsView.vue
+++ b/web/src/components/civil/CivilDocumentsView.vue
@@ -250,317 +250,321 @@
       const downloadCompleted = ref(true);
       const allDocumentsChecked = ref(false);
 
-      const fields = ref([
-        [
-          {
-            key: 'select',
-            label: '',
-            sortable: false,
-            headerStyle: 'text-primary',
-            cellStyle: 'font-size: 16px;',
-            tdClass: 'border-top',
-            thClass: '',
-          },
-          {
-            key: 'seq',
-            label: 'Seq.',
-            sortable: true,
-            headerStyle: 'text-primary',
-            cellStyle: 'font-size: 14px;',
-          },
-          {
-            key: 'documentType',
-            label: 'Document Type',
-            sortable: true,
-            headerStyle: 'text-primary',
-            cellStyle: 'border:0px; font-size: 14px; text-align:left;',
-          },
-          {
-            key: 'act',
-            label: 'Act',
-            sortable: false,
-            headerStyle: 'text',
-            cellStyle:
-              'display: block; margin-top: 1px; font-size: 14px; max-width : 50px;',
-          },
-          {
-            key: 'dateFiled',
-            label: 'Date Filed',
-            sortable: true,
-            headerStyle: 'text-danger',
-            cellStyle: 'font-size: 14px;',
-          },
-          {
-            key: 'affNo',
-            label: 'Aff No.',
-            sortable: false,
-            headerStyle: 'text',
-            cellStyle: 'font-size: 14px;',
-          },
-          {
-            key: 'swornBy',
-            label: 'Sworn By',
-            sortable: false,
-            headerStyle: 'text',
-            cellStyle:
-              'white-space: pre-line; font-size: 14px; margin-left: 20px',
-          },
-          {
-            key: 'issues',
-            label: 'Issues',
-            sortable: false,
-            headerStyle: 'text',
-            cellStyle:
-              'white-space: pre-line; font-size: 14px; margin-left: 20px;',
-          },
-          {
-            key: 'filedByName',
-            label: 'Filed By Name',
-            sortable: false,
-            headerStyle: 'text',
-            cellStyle:
-              'white-space: pre-line; font-size: 14px; margin-left: 20px',
-          },
-          {
-            key: 'comment',
-            label: 'Comment',
-            sortable: false,
-            headerStyle: 'text',
-            cellStyle: 'font-size: 12px; max-width:300px;',
-            tdClass: 'max-width-300',
-          },
-        ],
-        [
-          {
-            key: 'select',
-            label: '',
-            sortable: false,
-            headerStyle: 'text-primary',
-            cellStyle: 'font-size: 16px;',
-            tdClass: 'border-top',
-            thClass: '',
-          },
-          {
-            key: 'documentType',
-            label: 'Document Type',
-            sortable: false,
-            headerStyle: 'text-primary',
-            cellStyle: 'border:0px; font-size: 14px;',
-          },
-          {
-            key: 'appearanceDate',
-            label: 'Appearance Date',
-            sortable: true,
-            headerStyle: 'text-danger',
-            cellStyle: 'font-size: 14px;',
-          },
-        ],
-        [
-          {
-            key: 'select',
-            label: '',
-            sortable: false,
-            headerStyle: 'text-primary',
-            cellStyle: 'font-size: 16px;',
-            tdClass: 'border-top',
-            thClass: '',
-          },
-          {
-            key: 'seq',
-            label: 'Seq.',
-            sortable: true,
-            headerStyle: 'text-primary',
-            cellStyle: 'font-size: 14px;',
-          },
-          {
-            key: 'documentType',
-            label: 'Document Type',
-            sortable: true,
-            headerStyle: 'text-primary',
-            cellStyle: 'border:0px; font-size: 14px; text-align:left;',
-          },
-          {
-            key: 'dateFiled',
-            label: 'Date Filed',
-            sortable: false,
-            headerStyle: 'text-primary',
-            cellStyle: 'font-size: 14px;',
-          },
-          {
-            key: 'orderMadeDate',
-            label: 'Order Made Date',
-            sortable: true,
-            headerStyle: 'text-primary',
-            cellStyle: 'font-size: 14px;',
-          },
-          {
-            key: 'filedByName',
-            label: 'Filed By Name',
-            sortable: false,
-            headerStyle: 'text',
-            cellStyle:
-              'white-space: pre-line; font-size: 14px; margin-left: 20px',
-          },
-          {
-            key: 'comment',
-            label: 'Comment',
-            sortable: false,
-            headerStyle: 'text',
-            cellStyle: 'font-size: 12px; max-width:300px;',
-            tdClass: 'max-width-300',
-          },
-        ],
-        [
-          {
-            key: 'select',
-            label: '',
-            sortable: false,
-            headerStyle: 'text-primary',
-            cellStyle: 'font-size: 16px;',
-            tdClass: 'border-top',
-            thClass: '',
-          },
-          {
-            key: 'seq',
-            label: 'Seq.',
-            sortable: true,
-            headerStyle: 'text-primary',
-            cellStyle: 'font-size: 14px;',
-          },
-          {
-            key: 'documentType',
-            label: 'Document Type',
-            sortable: true,
-            headerStyle: 'text-primary',
-            cellStyle: 'border:0px; font-size: 14px; text-align:left;',
-          },
-          {
-            key: 'act',
-            label: 'Act',
-            sortable: false,
-            headerStyle: 'text',
-            cellStyle:
-              'display: block; margin-top: 1px; font-size: 14px; max-width : 50px;',
-          },
-          {
-            key: 'nextAppearanceDate',
-            label: 'Next Appearance Date',
-            sortable: true,
-            headerStyle: 'text-primary',
-            cellStyle: 'font-size: 14px;',
-          },
-          {
-            key: 'dateFiled',
-            label: 'Date Filed',
-            sortable: false,
-            headerStyle: 'text-primary',
-            cellStyle: 'font-size: 14px;',
-          },
-          {
-            key: 'issues',
-            label: 'Issues',
-            sortable: false,
-            headerStyle: 'text',
-            cellStyle:
-              'white-space: pre-line; font-size: 14px; margin-left: 20px;',
-          },
-          {
-            key: 'filedByName',
-            label: 'Filed By Name',
-            sortable: false,
-            headerStyle: 'text',
-            cellStyle:
-              'white-space: pre-line; font-size: 14px; margin-left: 20px;',
-          },
-          {
-            key: 'comment',
-            label: 'Comment',
-            sortable: false,
-            headerStyle: 'text',
-            cellStyle: 'font-size: 12px; max-width:300px;',
-            tdClass: 'max-width-300',
-          },
-        ],
-        [
-          {
-            key: 'select',
-            label: '',
-            sortable: false,
-            headerStyle: 'text-primary',
-            cellStyle: 'font-size: 16px;',
-            tdClass: 'border-top',
-            thClass: '',
-          },
-          {
-            key: 'seq',
-            label: 'Seq.',
-            sortable: true,
-            headerStyle: 'text-primary',
-            cellStyle: 'font-size: 14px;',
-          },
-          {
-            key: 'documentType',
-            label: 'Document Type',
-            sortable: true,
-            headerStyle: 'text-primary',
-            cellStyle: 'border:0px; font-size: 14px; text-align:left;',
-          },
-          {
-            key: 'dateFiled',
-            label: 'Date Filed',
-            sortable: true,
-            headerStyle: 'text-danger',
-            cellStyle: 'font-size: 14px;',
-          },
-          {
-            key: 'affNo',
-            label: 'Aff No.',
-            sortable: false,
-            headerStyle: 'text',
-            cellStyle: 'font-size: 14px;',
-          },
-          {
-            key: 'swornBy',
-            label: 'Sworn By',
-            sortable: false,
-            headerStyle: 'text',
-            cellStyle:
-              'white-space: pre-line; font-size: 14px; margin-left: 20px',
-          },
-          {
-            key: 'filedByName',
-            label: 'Filed By Name',
-            sortable: false,
-            headerStyle: 'text',
-            cellStyle:
-              'white-space: pre-line; font-size: 14px; margin-left: 20px',
-          },
-          {
-            key: 'issues',
-            label: 'Issues',
-            sortable: false,
-            headerStyle: 'text',
-            cellStyle:
-              'white-space: pre-line; font-size: 14px; margin-left: 20px;',
-          },
-          {
-            key: 'act',
-            label: 'Act',
-            sortable: false,
-            headerStyle: 'text',
-            cellStyle:
-              'display: block; margin-top: 1px; font-size: 14px; max-width : 50px;',
-          },
-          {
-            key: 'comment',
-            label: 'Comment',
-            sortable: false,
-            headerStyle: 'text',
-            cellStyle: 'font-size: 12px; max-width:300px;',
-            tdClass: 'max-width-300',
-          },
-        ],
-      ]);
+      const getTableFieldSettings = () => {
+        return [
+          [
+            {
+              key: 'select',
+              label: '',
+              sortable: false,
+              headerStyle: 'text-primary',
+              cellStyle: 'font-size: 16px;',
+              tdClass: 'border-top',
+              thClass: '',
+            },
+            {
+              key: 'seq',
+              label: 'Seq.',
+              sortable: true,
+              headerStyle: 'text-primary',
+              cellStyle: 'font-size: 14px;',
+            },
+            {
+              key: 'documentType',
+              label: 'Document Type',
+              sortable: true,
+              headerStyle: 'text-primary',
+              cellStyle: 'border:0px; font-size: 14px; text-align:left;',
+            },
+            {
+              key: 'act',
+              label: 'Act',
+              sortable: false,
+              headerStyle: 'text',
+              cellStyle:
+                'display: block; margin-top: 1px; font-size: 14px; max-width : 50px;',
+            },
+            {
+              key: 'dateFiled',
+              label: 'Date Filed',
+              sortable: true,
+              headerStyle: 'text-danger',
+              cellStyle: 'font-size: 14px;',
+            },
+            {
+              key: 'affNo',
+              label: 'Aff No.',
+              sortable: false,
+              headerStyle: 'text',
+              cellStyle: 'font-size: 14px;',
+            },
+            {
+              key: 'swornBy',
+              label: 'Sworn By',
+              sortable: false,
+              headerStyle: 'text',
+              cellStyle:
+                'white-space: pre-line; font-size: 14px; margin-left: 20px',
+            },
+            {
+              key: 'issues',
+              label: 'Issues',
+              sortable: false,
+              headerStyle: 'text',
+              cellStyle:
+                'white-space: pre-line; font-size: 14px; margin-left: 20px;',
+            },
+            {
+              key: 'filedByName',
+              label: 'Filed By Name',
+              sortable: false,
+              headerStyle: 'text',
+              cellStyle:
+                'white-space: pre-line; font-size: 14px; margin-left: 20px',
+            },
+            {
+              key: 'comment',
+              label: 'Comment',
+              sortable: false,
+              headerStyle: 'text',
+              cellStyle: 'font-size: 12px; max-width:300px;',
+              tdClass: 'max-width-300',
+            },
+          ],
+          [
+            {
+              key: 'select',
+              label: '',
+              sortable: false,
+              headerStyle: 'text-primary',
+              cellStyle: 'font-size: 16px;',
+              tdClass: 'border-top',
+              thClass: '',
+            },
+            {
+              key: 'documentType',
+              label: 'Document Type',
+              sortable: false,
+              headerStyle: 'text-primary',
+              cellStyle: 'border:0px; font-size: 14px;',
+            },
+            {
+              key: 'appearanceDate',
+              label: 'Appearance Date',
+              sortable: true,
+              headerStyle: 'text-danger',
+              cellStyle: 'font-size: 14px;',
+            },
+          ],
+          [
+            {
+              key: 'select',
+              label: '',
+              sortable: false,
+              headerStyle: 'text-primary',
+              cellStyle: 'font-size: 16px;',
+              tdClass: 'border-top',
+              thClass: '',
+            },
+            {
+              key: 'seq',
+              label: 'Seq.',
+              sortable: true,
+              headerStyle: 'text-primary',
+              cellStyle: 'font-size: 14px;',
+            },
+            {
+              key: 'documentType',
+              label: 'Document Type',
+              sortable: true,
+              headerStyle: 'text-primary',
+              cellStyle: 'border:0px; font-size: 14px; text-align:left;',
+            },
+            {
+              key: 'dateFiled',
+              label: 'Date Filed',
+              sortable: false,
+              headerStyle: 'text-primary',
+              cellStyle: 'font-size: 14px;',
+            },
+            {
+              key: 'orderMadeDate',
+              label: 'Order Made Date',
+              sortable: true,
+              headerStyle: 'text-primary',
+              cellStyle: 'font-size: 14px;',
+            },
+            {
+              key: 'filedByName',
+              label: 'Filed By Name',
+              sortable: false,
+              headerStyle: 'text',
+              cellStyle:
+                'white-space: pre-line; font-size: 14px; margin-left: 20px',
+            },
+            {
+              key: 'comment',
+              label: 'Comment',
+              sortable: false,
+              headerStyle: 'text',
+              cellStyle: 'font-size: 12px; max-width:300px;',
+              tdClass: 'max-width-300',
+            },
+          ],
+          [
+            {
+              key: 'select',
+              label: '',
+              sortable: false,
+              headerStyle: 'text-primary',
+              cellStyle: 'font-size: 16px;',
+              tdClass: 'border-top',
+              thClass: '',
+            },
+            {
+              key: 'seq',
+              label: 'Seq.',
+              sortable: true,
+              headerStyle: 'text-primary',
+              cellStyle: 'font-size: 14px;',
+            },
+            {
+              key: 'documentType',
+              label: 'Document Type',
+              sortable: true,
+              headerStyle: 'text-primary',
+              cellStyle: 'border:0px; font-size: 14px; text-align:left;',
+            },
+            {
+              key: 'act',
+              label: 'Act',
+              sortable: false,
+              headerStyle: 'text',
+              cellStyle:
+                'display: block; margin-top: 1px; font-size: 14px; max-width : 50px;',
+            },
+            {
+              key: 'nextAppearanceDate',
+              label: 'Next Appearance Date',
+              sortable: true,
+              headerStyle: 'text-primary',
+              cellStyle: 'font-size: 14px;',
+            },
+            {
+              key: 'dateFiled',
+              label: 'Date Filed',
+              sortable: false,
+              headerStyle: 'text-primary',
+              cellStyle: 'font-size: 14px;',
+            },
+            {
+              key: 'issues',
+              label: 'Issues',
+              sortable: false,
+              headerStyle: 'text',
+              cellStyle:
+                'white-space: pre-line; font-size: 14px; margin-left: 20px;',
+            },
+            {
+              key: 'filedByName',
+              label: 'Filed By Name',
+              sortable: false,
+              headerStyle: 'text',
+              cellStyle:
+                'white-space: pre-line; font-size: 14px; margin-left: 20px;',
+            },
+            {
+              key: 'comment',
+              label: 'Comment',
+              sortable: false,
+              headerStyle: 'text',
+              cellStyle: 'font-size: 12px; max-width:300px;',
+              tdClass: 'max-width-300',
+            },
+          ],
+          [
+            {
+              key: 'select',
+              label: '',
+              sortable: false,
+              headerStyle: 'text-primary',
+              cellStyle: 'font-size: 16px;',
+              tdClass: 'border-top',
+              thClass: '',
+            },
+            {
+              key: 'seq',
+              label: 'Seq.',
+              sortable: true,
+              headerStyle: 'text-primary',
+              cellStyle: 'font-size: 14px;',
+            },
+            {
+              key: 'documentType',
+              label: 'Document Type',
+              sortable: true,
+              headerStyle: 'text-primary',
+              cellStyle: 'border:0px; font-size: 14px; text-align:left;',
+            },
+            {
+              key: 'dateFiled',
+              label: 'Date Filed',
+              sortable: true,
+              headerStyle: 'text-danger',
+              cellStyle: 'font-size: 14px;',
+            },
+            {
+              key: 'affNo',
+              label: 'Aff No.',
+              sortable: false,
+              headerStyle: 'text',
+              cellStyle: 'font-size: 14px;',
+            },
+            {
+              key: 'swornBy',
+              label: 'Sworn By',
+              sortable: false,
+              headerStyle: 'text',
+              cellStyle:
+                'white-space: pre-line; font-size: 14px; margin-left: 20px',
+            },
+            {
+              key: 'filedByName',
+              label: 'Filed By Name',
+              sortable: false,
+              headerStyle: 'text',
+              cellStyle:
+                'white-space: pre-line; font-size: 14px; margin-left: 20px',
+            },
+            {
+              key: 'issues',
+              label: 'Issues',
+              sortable: false,
+              headerStyle: 'text',
+              cellStyle:
+                'white-space: pre-line; font-size: 14px; margin-left: 20px;',
+            },
+            {
+              key: 'act',
+              label: 'Act',
+              sortable: false,
+              headerStyle: 'text',
+              cellStyle:
+                'display: block; margin-top: 1px; font-size: 14px; max-width : 50px;',
+            },
+            {
+              key: 'comment',
+              label: 'Comment',
+              sortable: false,
+              headerStyle: 'text',
+              cellStyle: 'font-size: 12px; max-width:300px;',
+              tdClass: 'max-width-300',
+            },
+          ],
+        ];
+      };
+
+      const fields = ref(getTableFieldSettings());
 
       const getDocuments = () => {
         documents.value = civilFileStore.civilFileInformation.documentsInfo;
diff --git a/web/src/components/civil/CivilFutureAppearances.vue b/web/src/components/civil/CivilFutureAppearances.vue
index cc7c7f45..564c4a6b 100644
--- a/web/src/components/civil/CivilFutureAppearances.vue
+++ b/web/src/components/civil/CivilFutureAppearances.vue
@@ -163,7 +163,7 @@
       const sortBy = ref('date');
       const sortDesc = ref(true);
 
-      const fields = [
+      const getTableFieldSettings = () => [
         {
           key: 'date',
           label: 'Date',
@@ -256,6 +256,8 @@
         },
       ];
 
+      const fields = ref(getTableFieldSettings());
+
       onMounted(() => {
         getFutureAppearances();
       });