diff --git a/document-service/documents-ui/package.json b/document-service/documents-ui/package.json
index d6e4182b..17f6b69a 100644
--- a/document-service/documents-ui/package.json
+++ b/document-service/documents-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bcros-documents-ui",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "private": true,
   "type": "module",
   "scripts": {
@@ -21,6 +21,7 @@
     "@nuxt/ui": "^2.16.0",
     "@nuxtjs/i18n": "^8.3.1",
     "@pinia/nuxt": "^0.5.1",
+    "axios": "^1.7.5",
     "date-fns": "^3.6.0",
     "http-status-codes": "^2.1.4",
     "keycloak-js": "^24.0.4",
diff --git a/document-service/documents-ui/pnpm-lock.yaml b/document-service/documents-ui/pnpm-lock.yaml
index c8a17e05..671ba149 100644
--- a/document-service/documents-ui/pnpm-lock.yaml
+++ b/document-service/documents-ui/pnpm-lock.yaml
@@ -22,13 +22,16 @@ importers:
         version: 0.3.13(eslint@9.7.0)(magicast@0.3.4)(rollup@4.19.0)(typescript@5.5.4)(vite@5.3.4(@types/node@20.14.12)(sass@1.77.8)(terser@5.31.3))
       '@nuxt/ui':
         specifier: ^2.16.0
-        version: 2.17.0(magicast@0.3.4)(rollup@4.19.0)(vite@5.3.4(@types/node@20.14.12)(sass@1.77.8)(terser@5.31.3))(vue@3.4.33(typescript@5.5.4))
+        version: 2.17.0(axios@1.7.5)(magicast@0.3.4)(rollup@4.19.0)(vite@5.3.4(@types/node@20.14.12)(sass@1.77.8)(terser@5.31.3))(vue@3.4.33(typescript@5.5.4))
       '@nuxtjs/i18n':
         specifier: ^8.3.1
         version: 8.3.1(magicast@0.3.4)(rollup@4.19.0)(vue@3.4.33(typescript@5.5.4))
       '@pinia/nuxt':
         specifier: ^0.5.1
         version: 0.5.1(magicast@0.3.4)(rollup@4.19.0)(typescript@5.5.4)(vue@3.4.33(typescript@5.5.4))
+      axios:
+        specifier: ^1.7.5
+        version: 1.7.5
       date-fns:
         specifier: ^3.6.0
         version: 3.6.0
@@ -1868,6 +1871,9 @@ packages:
   async@3.2.5:
     resolution: {integrity: sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==}
 
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
   at-least-node@1.0.0:
     resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
     engines: {node: '>= 4.0.0'}
@@ -1883,6 +1889,9 @@ packages:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
+  axios@1.7.5:
+    resolution: {integrity: sha512-fZu86yCo+svH3uqJ/yTdQ0QHpQu5oL+/QE+QPSv6BZSkDAoky9vytxp7u5qk83OJFS3kEBcesWni9WTZAv3tSw==}
+
   b4a@1.6.6:
     resolution: {integrity: sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg==}
 
@@ -2069,6 +2078,10 @@ packages:
   colord@2.9.3:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
 
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
   commander@10.0.1:
     resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
     engines: {node: '>=14'}
@@ -2337,6 +2350,10 @@ packages:
   defu@6.1.4:
     resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
 
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
   delegates@1.0.0:
     resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
 
@@ -2822,6 +2839,15 @@ packages:
   flatted@3.3.1:
     resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
 
+  follow-redirects@1.15.6:
+    resolution: {integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
   for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
 
@@ -2829,6 +2855,10 @@ packages:
     resolution: {integrity: sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==}
     engines: {node: '>=14'}
 
+  form-data@4.0.0:
+    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
+    engines: {node: '>= 6'}
+
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
@@ -4262,6 +4292,9 @@ packages:
   protocols@2.0.1:
     resolution: {integrity: sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==}
 
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -6314,7 +6347,7 @@ snapshots:
       - rollup
       - supports-color
 
-  '@nuxt/ui@2.17.0(magicast@0.3.4)(rollup@4.19.0)(vite@5.3.4(@types/node@20.14.12)(sass@1.77.8)(terser@5.31.3))(vue@3.4.33(typescript@5.5.4))':
+  '@nuxt/ui@2.17.0(axios@1.7.5)(magicast@0.3.4)(rollup@4.19.0)(vite@5.3.4(@types/node@20.14.12)(sass@1.77.8)(terser@5.31.3))(vue@3.4.33(typescript@5.5.4))':
     dependencies:
       '@egoist/tailwindcss-icons': 1.8.1(tailwindcss@3.4.6)
       '@headlessui/tailwindcss': 0.2.1(tailwindcss@3.4.6)
@@ -6329,7 +6362,7 @@ snapshots:
       '@tailwindcss/forms': 0.5.7(tailwindcss@3.4.6)
       '@tailwindcss/typography': 0.5.13(tailwindcss@3.4.6)
       '@vueuse/core': 10.11.0(vue@3.4.33(typescript@5.5.4))
-      '@vueuse/integrations': 10.11.0(fuse.js@6.6.2)(vue@3.4.33(typescript@5.5.4))
+      '@vueuse/integrations': 10.11.0(axios@1.7.5)(fuse.js@6.6.2)(vue@3.4.33(typescript@5.5.4))
       '@vueuse/math': 10.11.0(vue@3.4.33(typescript@5.5.4))
       defu: 6.1.4
       fuse.js: 6.6.2
@@ -7232,12 +7265,13 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/integrations@10.11.0(fuse.js@6.6.2)(vue@3.4.33(typescript@5.5.4))':
+  '@vueuse/integrations@10.11.0(axios@1.7.5)(fuse.js@6.6.2)(vue@3.4.33(typescript@5.5.4))':
     dependencies:
       '@vueuse/core': 10.11.0(vue@3.4.33(typescript@5.5.4))
       '@vueuse/shared': 10.11.0(vue@3.4.33(typescript@5.5.4))
       vue-demi: 0.14.9(vue@3.4.33(typescript@5.5.4))
     optionalDependencies:
+      axios: 1.7.5
       fuse.js: 6.6.2
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -7437,6 +7471,8 @@ snapshots:
 
   async@3.2.5: {}
 
+  asynckit@0.4.0: {}
+
   at-least-node@1.0.0: {}
 
   autoprefixer@10.4.19(postcss@8.4.39):
@@ -7453,6 +7489,14 @@ snapshots:
     dependencies:
       possible-typed-array-names: 1.0.0
 
+  axios@1.7.5:
+    dependencies:
+      follow-redirects: 1.15.6
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   b4a@1.6.6: {}
 
   balanced-match@1.0.2: {}
@@ -7650,6 +7694,10 @@ snapshots:
 
   colord@2.9.3: {}
 
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
   commander@10.0.1: {}
 
   commander@2.20.3: {}
@@ -7888,6 +7936,8 @@ snapshots:
 
   defu@6.1.4: {}
 
+  delayed-stream@1.0.0: {}
+
   delegates@1.0.0: {}
 
   denque@2.1.0: {}
@@ -8627,6 +8677,8 @@ snapshots:
 
   flatted@3.3.1: {}
 
+  follow-redirects@1.15.6: {}
+
   for-each@0.3.3:
     dependencies:
       is-callable: 1.2.7
@@ -8636,6 +8688,12 @@ snapshots:
       cross-spawn: 7.0.3
       signal-exit: 4.1.0
 
+  form-data@4.0.0:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+
   fraction.js@4.3.7: {}
 
   fresh@0.5.2: {}
@@ -10210,6 +10268,8 @@ snapshots:
 
   protocols@2.0.1: {}
 
+  proxy-from-env@1.1.0: {}
+
   punycode@2.3.1: {}
 
   queue-microtask@1.2.3: {}
diff --git a/document-service/documents-ui/src/app/router.options.ts b/document-service/documents-ui/src/app/router.options.ts
index 0c7665d4..4c64cc95 100644
--- a/document-service/documents-ui/src/app/router.options.ts
+++ b/document-service/documents-ui/src/app/router.options.ts
@@ -28,7 +28,7 @@ export default <RouterConfig|Ro<unknown>> {
     },
     {
       name: RouteNameE.DOCUMENT_RECORDS,
-      path: '/document-records',
+      path: '/document-records/:identifier',
       component: () => import('~/pages/DocumentRecords.vue').then(r => r.default || r),
       meta: {
         layout: 'default',
diff --git a/document-service/documents-ui/src/components/DatePicker.vue b/document-service/documents-ui/src/components/DatePicker.vue
index b67cde32..8d2d236f 100644
--- a/document-service/documents-ui/src/components/DatePicker.vue
+++ b/document-service/documents-ui/src/components/DatePicker.vue
@@ -6,7 +6,7 @@ import type { PropType } from 'vue'
 
 const props = defineProps({
   modelValue: {
-    type: [String, Date] as PropType<DatePickerDate | DatePickerRangeObject>,
+    type: [String, Date, Object] as PropType<DatePickerDate | DatePickerRangeObject>,
     default: null
   },
   isRangedPicker: {
diff --git a/document-service/documents-ui/src/components/InputDatePicker/index.vue b/document-service/documents-ui/src/components/InputDatePicker/index.vue
index 07239496..28a26558 100644
--- a/document-service/documents-ui/src/components/InputDatePicker/index.vue
+++ b/document-service/documents-ui/src/components/InputDatePicker/index.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { format } from 'date-fns'
 import type { PropType } from 'vue'
-import type { DatePickerDate } from 'v-calendar/dist/types/src/use/datePicker'
+import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker'
 
 const emit = defineEmits(['update:modelValue'])
 
 const props = defineProps({
   modelValue: {
-    type: [String, Date] as PropType<DatePickerDate>,
+    type: [String, Date, Object] as PropType<DatePickerDate | DatePickerRangeObject>,
     default: null
   },
   disabled: {
diff --git a/document-service/documents-ui/src/components/contentWrapper/index.vue b/document-service/documents-ui/src/components/contentWrapper/index.vue
index 3991b3cd..47ac61a7 100644
--- a/document-service/documents-ui/src/components/contentWrapper/index.vue
+++ b/document-service/documents-ui/src/components/contentWrapper/index.vue
@@ -10,13 +10,13 @@ defineProps({
   <div :data-cy="'content_wrapper_' + name">
     <div
       :data-cy="'header_' + name"
-      class="font-bold text-gray-900 bg-bcGovColor-ltBlue px-6 py-[18px]"
+      class="font-bold text-gray-900 bg-bcGovColor-ltBlue px-8 py-[18px]"
     >
       <slot name="header" />
     </div>
     <div
       :data-cy="'content_' + name"
-      class="bg-white rounded px-6 pt-8 pb-0"
+      class="bg-white rounded px-8 pt-8 pb-0"
     >
       <slot name="content" />
     </div>
diff --git a/document-service/documents-ui/src/components/documentRecord/index.vue b/document-service/documents-ui/src/components/documentRecord/index.vue
new file mode 100644
index 00000000..2897fc14
--- /dev/null
+++ b/document-service/documents-ui/src/components/documentRecord/index.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { formatToReadableDate } from '~/utils/dateHelper'
+import { getScanningRecord } from '~/utils/documentRequests'
+const { documentRecord } = storeToRefs(useBcrosDocuments())
+const { downloadFileFromUrl, getDocumentDescription } = useDocuments()
+const identifier = useRoute()?.params?.identifier as string
+onMounted(async () => {
+  if (!documentRecord.value) {
+    // TODO: Fetch Record if absent (ie coming from another app with identifier) Requires isolated DocumentID Endpoint
+    await navigateTo({ name: RouteNameE.DOCUMENT_MANAGEMENT })
+  }
+
+  if(!documentRecord.value?.accessionNumber) {
+    try {
+      const scanningData = await getScanningRecord(documentRecord.value.documentClass, identifier)
+      documentRecord.value = { ...documentRecord.value, ...scanningData }
+    } catch (error) {
+      console.error('Error fetching document scanning record', error)
+    }
+  }
+})
+</script>
+<template>
+  <ContentWrapper
+    v-if="!!documentRecord"
+    name="document-record"
+    class="mt-7 pb-10"
+    data-cy="document-record"
+  >
+    <template #header>{{ $t('documentRecord.subtitle') }}</template>
+    <template #content>
+      <div class="grid grid-cols-3 auto-rows-max">
+
+        <!-- Document Meta Data -->
+        <span class="font-bold">{{ $t('documentReview.labels.entityId') }} </span>
+        <span class="col-span-2">{{ documentRecord.consumerIdentifier || 'Not Entered' }}</span>
+
+        <span class="font-bold">{{ $t('documentReview.labels.documentId') }} </span>
+        <span class="col-span-2">{{ documentRecord.consumerDocumentId }}</span>
+
+        <span class="font-bold">{{ $t('documentReview.labels.documentCategory') }} </span>
+        <span class="col-span-2">{{ getDocumentDescription(documentRecord.documentClass) }}</span>
+
+        <span class="font-bold">{{ $t('documentReview.labels.documentType') }} </span>
+        <span class="col-span-2">{{ getDocumentDescription(documentRecord.documentType, true) }}</span>
+
+        <span class="font-bold">{{ $t('documentReview.labels.filingDate') }} </span>
+        <span class="col-span-2">
+          {{ formatToReadableDate(documentRecord.consumerFilingDateTime) || 'Not Entered' }}
+        </span>
+
+        <span class="font-bold">{{ $t('documentReview.labels.uploadDate') }} </span>
+        <span class="col-span-2">{{ formatToReadableDate(documentRecord.createDateTime) }}</span>
+
+        <!-- Scanning Information -->
+        <UDivider class="my-6 col-span-3" />
+        <span class="font-bold">{{ $t('documentReview.labels.scanningLabel') }} </span>
+        <span class="col-span-2"/>
+
+        <span class="font-bold">{{ $t('documentReview.labels.accessionNumber') }} </span>
+        <span class="col-span-2">{{ documentRecord.accessionNumber }}</span>
+
+        <span class="font-bold">{{ $t('documentReview.labels.batchId') }} </span>
+        <span class="col-span-2">{{ documentRecord.batchId }}</span>
+
+        <span class="font-bold">{{ $t('documentReview.labels.pagesToScan') }} </span>
+        <span class="col-span-2">{{ documentRecord.pageCount }}</span>
+
+        <span class="font-bold">{{ $t('documentReview.labels.scannedDate') }} </span>
+        <span class="col-span-2">{{ documentRecord.scanDateTime }}</span>
+
+        <span class="font-bold">{{ $t('documentReview.labels.author') }} </span>
+        <span class="col-span-2">{{ documentRecord.author }}</span>
+
+        <!-- Document Files -->
+        <UDivider class="my-6 col-span-3" />
+
+        <span class="font-bold">{{ $t('documentReview.labels.documentListLabel') }}</span>
+        <span class="col-span-2 flex flex-col">
+          <span
+            v-for="(file, i) in documentRecord.consumerFilenames"
+            :key="`file-${i}`"
+            class="spanLink pb-2"
+          >
+             <ULink
+               inactive-class="text-primary underline"
+               @click="downloadFileFromUrl(documentRecord.documentUrls[i], file)"
+             >
+               {{ file }}
+             </ULink>
+          </span>
+        </span>
+      </div>
+    </template>
+  </ContentWrapper>
+</template>
+<style scoped lang="scss">
+span:not(.spanLink) {
+  padding: 0.5rem 0;
+}
+</style>
\ No newline at end of file
diff --git a/document-service/documents-ui/src/components/documentReviewModal/index.vue b/document-service/documents-ui/src/components/documentReviewModal/index.vue
index 206d4378..9f0a0214 100644
--- a/document-service/documents-ui/src/components/documentReviewModal/index.vue
+++ b/document-service/documents-ui/src/components/documentReviewModal/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { formatToReadableDate } from '~/utils/dateHelper'
-
+const { getDocumentDescription } = useDocuments()
 const { displayDocumentReview, documentInfoRO } = storeToRefs(useBcrosDocuments())
 const loadingDocuments = ref(false)
 
@@ -15,25 +15,6 @@ const requestDocumentRecord = async (consumerId: string) => {
   await getDocumentRecord(consumerId)
   loadingDocuments.value = false
 }
-
-/**
- * Retrieves the description based on the provided class or type value.
- *
- * @param value - The class or type value to look up.
- * @param isType - Boolean indicating whether the value is a type or class. Defaults to false (class).
- * @returns The description of the class or type if found, otherwise undefined.
- */
-const getDescription = (value: string, isType = false): string | undefined => {
-  const docClass = documentTypes.find(docClass =>
-    isType
-      ? docClass.documents.some(doc => doc.type === value)
-      : docClass.class === value
-  )
-
-  return isType
-    ? docClass?.documents.find(doc => doc.type === value)?.description
-    : docClass?.description
-}
 </script>
 
 <template>
@@ -70,11 +51,11 @@ const getDescription = (value: string, isType = false): string | undefined => {
           </div>
           <div>
             <span class="font-bold">{{ $t('documentReview.labels.documentCategory') }}: </span>
-            <span class="px-1">{{ getDescription(documentInfoRO.documentClass) }}</span>
+            <span class="px-1">{{ getDocumentDescription(documentInfoRO.documentClass) }}</span>
           </div>
           <div>
             <span class="font-bold">{{ $t('documentReview.labels.documentType') }}: </span>
-            <span class="px-1">{{ getDescription(documentInfoRO.documentType, true) }}</span>
+            <span class="px-1">{{ getDocumentDescription(documentInfoRO.documentType, true) }}</span>
           </div>
           <div>
             <span class="font-bold">{{ $t('documentReview.labels.filingDate') }}: </span>
diff --git a/document-service/documents-ui/src/components/documentsTable/index.vue b/document-service/documents-ui/src/components/documentsTable/index.vue
index 7b51e7ab..9a130cde 100644
--- a/document-service/documents-ui/src/components/documentsTable/index.vue
+++ b/document-service/documents-ui/src/components/documentsTable/index.vue
@@ -1,40 +1,15 @@
 <script setup lang="ts">
 import { formatToReadableDate } from '~/utils/dateHelper'
-const { getDocumentClassDescription, downloadFileFromUrl } = useDocuments()
+import { documentResultColumns } from '~/utils/documentTypes'
+import type { DocumentInfoIF } from '~/interfaces/document-types-interface'
+const { getDocumentDescription, downloadFileFromUrl } = useDocuments()
 const { documentSearchResults } = storeToRefs(useBcrosDocuments())
-const { searchEntityId } = storeToRefs(useBcrosDocuments())
-const documentResultCols = [
-  {
-    key: 'consumerIdentifier',
-    label: 'Entity ID',
-    sortable: true
-  },
-  {
-    key: 'consumerDocumentId',
-    label: 'Document ID',
-    sortable: true
-  },
-  {
-    key: 'documentClass',
-    label: 'Document Category'
-  },
-  {
-    key: 'documentTypeDescription',
-    label: 'Document Type'
-  },
-  {
-    key: 'consumerFilingDateTime',
-    label: 'Filing Date'
-  },
-  {
-    key: 'documentURL',
-    label: 'Documents'
-  },
-  {
-    key: 'actions',
-    label: 'Actions'
-  }
-]
+const { documentRecord, searchEntityId } = storeToRefs(useBcrosDocuments())
+
+const openDocumentRecord = (searchResult: DocumentInfoIF) => {
+  documentRecord.value = { ...searchResult }
+  navigateTo({ name: RouteNameE.DOCUMENT_RECORDS, params: { identifier: searchResult.consumerDocumentId } })
+}
 </script>
 <template>
   <ContentWrapper
@@ -46,18 +21,6 @@ const documentResultCols = [
     <template #header>
       <div class="flex justify-between items-center">
         <span>Search Results</span>
-        <!-- Column Selection Pending User Preferences -->
-<!--        <UFormGroup>-->
-<!--          <USelectMenu-->
-<!--            v-model="selectedColumns"-->
-<!--            multiple-->
-<!--            placeholder="Columns to Show"-->
-<!--            select-class="text-gray-700"-->
-<!--            :options="documentResultCols"-->
-<!--            value-attribute="key"-->
-<!--            option-attribute="label"-->
-<!--          />-->
-<!--        </UFormGroup>-->
       </div>
     </template>
     <template #content>
@@ -70,7 +33,7 @@ const documentResultCols = [
 
       <UTable
         class="mt-8"
-        :columns="documentResultCols"
+        :columns="documentResultColumns"
         :rows="documentSearchResults || []"
         :sort-button="{
           class: 'font-bold text-sm',
@@ -82,7 +45,7 @@ const documentResultCols = [
 
         <!-- Document URL -->
         <template #documentClass-data="{ row }">
-          {{ getDocumentClassDescription(row.documentClass) }}
+          {{ getDocumentDescription(row.documentClass) }}
         </template>
 
         <!-- Consumer DateTime -->
@@ -92,15 +55,17 @@ const documentResultCols = [
 
         <!-- Document URL -->
         <template #documentURL-data="{ row }">
-            <ULink
-              v-for="(file, i) in row.consumerFilenames"
-              :key="`file-${i}`"
-              inactive-class="text-primary underline"
-              @click="downloadFileFromUrl(row.documentUrls[i], file)"
-            >
+          <span
+            v-for="(file, i) in row.consumerFilenames"
+            :key="`file-${i}`"
+          >
+             <ULink
+               inactive-class="text-primary underline"
+               @click="downloadFileFromUrl(row.documentUrls[i], file)"
+             >
               {{ file }}
             </ULink>
-          <br>
+          </span>
         </template>
 
         <!-- Actions -->
@@ -109,7 +74,7 @@ const documentResultCols = [
             class="h-[35px] px-8 text-base"
             outlined
             color="primary"
-            @click="navigateTo({ name: RouteNameE.DOCUMENT_RECORDS, params: { documentId: row.consumerDocumentId } })"
+            @click="openDocumentRecord(row)"
           >
             {{ $t('button.open') }}
           </UButton>
diff --git a/document-service/documents-ui/src/composables/useDocuments.ts b/document-service/documents-ui/src/composables/useDocuments.ts
index 8d6e55ac..65c5aee0 100644
--- a/document-service/documents-ui/src/composables/useDocuments.ts
+++ b/document-service/documents-ui/src/composables/useDocuments.ts
@@ -34,12 +34,22 @@ export const useDocuments = () => {
   }
 
   /**
-   * Retrieves class descriptions for the specified category
-   * @param documentClass - The document class for which to retrieve documents
-   * @returns An class descriptions or an empty string if the category is not found
+   * Retrieves the description based on the provided class or type value.
+   *
+   * @param value - The class or type value to look up.
+   * @param isType - Boolean indicating whether the value is a type or class. Defaults to false (class).
+   * @returns The description of the class or type if found, otherwise undefined.
    */
-  function getDocumentClassDescription(documentClass: string): string  {
-    return documentTypes.find(doc => doc.class === documentClass)?.description || ''
+  function getDocumentDescription(value: string, isType = false): string | undefined {
+    const docClass = documentTypes.find(docClass =>
+      isType
+        ? docClass.documents.some(doc => doc.type === value)
+        : docClass.class === value
+    )
+
+    return isType
+      ? docClass?.documents.find(doc => doc.type === value)?.description
+      : docClass?.description
   }
 
   /**
@@ -223,7 +233,7 @@ export const useDocuments = () => {
     isValidIndexData,
     findCategoryByPrefix,
     getDocumentTypesByClass,
-    getDocumentClassDescription,
+    getDocumentDescription,
     searchDocuments,
     downloadFileFromUrl,
     hasMinimumSearchCriteria,
diff --git a/document-service/documents-ui/src/interfaces/document-types-interface.ts b/document-service/documents-ui/src/interfaces/document-types-interface.ts
index 49ca497c..dd95ec8f 100644
--- a/document-service/documents-ui/src/interfaces/document-types-interface.ts
+++ b/document-service/documents-ui/src/interfaces/document-types-interface.ts
@@ -1,3 +1,36 @@
+import type { DocumentRequestIF } from '~/interfaces/request-interfaces'
+
+export interface DocumentStateIF {
+  // Document Search
+  searchDocumentId: string
+  searchEntityId: string
+  searchDocumentClass: string
+  searchDocumentType: string
+  searchDateRange: {
+    start: Date | null
+    end: Date | null
+  }
+
+  // Document Meta
+  consumerIdentifier: string
+  noIdCheckbox: boolean
+  documentClass: string
+  documentType: string
+  consumerFilingDate: string
+  documentList: any[]
+
+  // Validations
+  validateIndex: boolean
+  isLoading: boolean
+  validateDocumentSearch: boolean
+
+  // Document Review
+  displayDocumentReview: boolean
+  documentInfoRO: DocumentInfoIF | null
+  documentSearchResults: DocumentRequestIF[]
+  documentRecord: DocumentInfoIF | null
+}
+
 export interface DocumentDetailIF {
   type: string
   description: string
@@ -23,4 +56,13 @@ export interface DocumentInfoIF {
   documentTypeDescription: string
   documentURL: string
   filenames: Array<string>
+  consumerFilenames?: Array<string>
+  documentUrls?: Array<string>
+
+  // Scanning properties
+  scanDateTime: string
+  accessionNumber: string
+  batchId: string
+  pageCount: number
+  author: string
 }
\ No newline at end of file
diff --git a/document-service/documents-ui/src/lang/en.json b/document-service/documents-ui/src/lang/en.json
index 017aa602..67d1ed1a 100644
--- a/document-service/documents-ui/src/lang/en.json
+++ b/document-service/documents-ui/src/lang/en.json
@@ -2,7 +2,7 @@
   "breadcrumb": {
     "documentManagement": "Document Record Services",
     "documentIndexing": "Document Indexing",
-    "documentRecords": "Document Records"
+    "documentRecords": "Document Record"
   },
   "title": {
     "documentManagement": "Document Record Services",
@@ -25,8 +25,8 @@
         "help": "Example: MH107403, BC1234567, CP1234567"
       },
       "docId": {
-        "label": "Document ID",
-        "help": "Enter the 8 digit document ID number"
+        "label": "Document Record ID",
+        "help": "Enter the 8 digit document record ID number"
       },
       "selectMenu": {
         "label": "Document Information",
@@ -75,18 +75,29 @@
     "title": "Document Information Saved",
     "description": "Your document information has been successfully uploaded and saved. To view, complete a search on the document management page using the following information",
     "labels": {
-      "documentId": "Document ID",
+      "documentId": "Document Record ID",
       "entityId": "Entity ID",
       "documentCategory": "Document Category",
       "documentType": "Document Type",
       "filingDate": "Filing Date",
       "uploadDate": "Upload Date and Time",
       "documentsUploaded": "Documents Uploaded",
-      "documentListLabel": "Documents"
+      "documentListLabel": "Documents",
+      "scanningLabel": "Scanning Information",
+      "accessionNumber": "Accession Number",
+      "batchId": "Batch ID",
+      "pagesToScan": "Pages to Scan",
+      "scannedDate": "Scanned Date",
+      "author": "Author"
     },
     "buttonLabels": {
       "cancel": "Back to Documents Services Page",
       "downloadReport": "Download Document Record Statement"
     }
+  },
+  "documentRecord": {
+    "title": "Document Record",
+    "description": "View and download your document record",
+    "subtitle": "Document Record Information"
   }
 }
diff --git a/document-service/documents-ui/src/pages/DocumentIndexing.vue b/document-service/documents-ui/src/pages/DocumentIndexing.vue
index 139769fa..a2320590 100644
--- a/document-service/documents-ui/src/pages/DocumentIndexing.vue
+++ b/document-service/documents-ui/src/pages/DocumentIndexing.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const { resetStore } = useBcrosDocuments()
 const { isValidIndexData, saveDocuments } = useDocuments()
-const { validateIndex, displayDocumentReview } = storeToRefs(useBcrosDocuments())
+const { validateIndex } = storeToRefs(useBcrosDocuments())
 // Use onScopeDispose to reset the store when the component is unmounted
 onMounted(() => { resetStore() })
 // Reset the store when the component is unmounted or scope is disposed
@@ -18,7 +18,7 @@ onScopeDispose(() => { resetStore() })
         <template #header>
           <div class="grid grid-cols-6">
             <div class="col-span-6">
-              <h1 class="text-[32px] pb-2" @click="displayDocumentReview = true">{{ $t('title.documentIndexing') }}</h1>
+              <h1 class="text-[32px] pb-2">{{ $t('title.documentIndexing') }}</h1>
               <span class="text-gray-700 font-normal text-base">{{ $t('descriptions.documentIndexing') }}</span>
             </div>
           </div>
diff --git a/document-service/documents-ui/src/pages/DocumentRecords.vue b/document-service/documents-ui/src/pages/DocumentRecords.vue
index d77731ed..20a29e8b 100644
--- a/document-service/documents-ui/src/pages/DocumentRecords.vue
+++ b/document-service/documents-ui/src/pages/DocumentRecords.vue
@@ -1,5 +1,35 @@
 <script setup lang="ts">
+const showNavActions = ref(false)
 </script>
 <template>
-  <div data-cy="document-records"/>
+  <div
+    data-cy="document-records"
+    class="grid grid-cols-8 gap-4 mt-12 mb-16"
+  >
+    <div class="col-span-6">
+      <BcrosSection name="documentRecords">
+        <template #header>
+          <div class="grid grid-cols-6">
+            <div class="col-span-6">
+              <h1 class="text-[32px] pb-2">{{ $t('documentRecord.title') }}</h1>
+              <span class="text-gray-700 font-normal text-base">{{ $t('documentRecord.description') }}</span>
+            </div>
+          </div>
+        </template>
+
+        <template #default>
+          <DocumentRecord />
+        </template>
+      </BcrosSection>
+    </div>
+
+    <div class="col-span-2 pl-6">
+      <NavActionsAside
+        v-if="showNavActions"
+        :validation-error="false"
+        @cancel="navigateTo({ name: RouteNameE.DOCUMENT_MANAGEMENT })"
+        @submit="null"
+      />
+    </div>
+  </div>
 </template>
\ No newline at end of file
diff --git a/document-service/documents-ui/src/stores/documents.ts b/document-service/documents-ui/src/stores/documents.ts
index 59e6b542..5ab83000 100644
--- a/document-service/documents-ui/src/stores/documents.ts
+++ b/document-service/documents-ui/src/stores/documents.ts
@@ -1,9 +1,9 @@
-import type { DocumentInfoIF } from '~/interfaces/document-types-interface'
+import type { DocumentInfoIF, DocumentStateIF } from '~/interfaces/document-types-interface'
 
 export const useBcrosDocuments = defineStore('bcros/documents', () => {
 
   // Function to return default values
-  const getDefaultState = () => ({
+  const getDefaultState = (): DocumentStateIF => ({
     // Document Search
     searchDocumentId: '',
     searchEntityId: '',
@@ -20,7 +20,7 @@ export const useBcrosDocuments = defineStore('bcros/documents', () => {
     documentList: [],
 
     // Validations
-    validateIndex: undefined,
+    validateIndex: false,
     isLoading: false,
     validateDocumentSearch: false,
 
@@ -28,12 +28,13 @@ export const useBcrosDocuments = defineStore('bcros/documents', () => {
     displayDocumentReview: false,
     documentInfoRO: null as DocumentInfoIF,
     documentSearchResults: [],
+    documentRecord: null
   })
 
   // Initial state
   const state = reactive(getDefaultState())
 
-  // Reset function
+  // Reset state function
   const resetStore = () => {
     Object.assign(state, getDefaultState())
   }
diff --git a/document-service/documents-ui/src/utils/breadcrumbs.ts b/document-service/documents-ui/src/utils/breadcrumbs.ts
index 9c41fdfa..9b3998bd 100644
--- a/document-service/documents-ui/src/utils/breadcrumbs.ts
+++ b/document-service/documents-ui/src/utils/breadcrumbs.ts
@@ -19,7 +19,7 @@ export function getDocumentIndexingCrumb (): BreadcrumbI {
 export function getDocumentRecordsCrumb (): BreadcrumbI {
   const t = useNuxtApp().$i18n.t
   return {
-    text: ref(t('breadcrumb.documentRecords')),
+    text: ref(t('breadcrumb.documentRecords') + ' ' + useRoute()?.params?.identifier),
     to: { name: RouteNameE.DOCUMENT_RECORDS},
   }
 }
\ No newline at end of file
diff --git a/document-service/documents-ui/src/utils/documentRequests.ts b/document-service/documents-ui/src/utils/documentRequests.ts
index 73df5668..34ec8d8b 100644
--- a/document-service/documents-ui/src/utils/documentRequests.ts
+++ b/document-service/documents-ui/src/utils/documentRequests.ts
@@ -13,7 +13,7 @@ const docApiKey = config.public.documentsApiKey
 /**
  * Sends a GET request to fetch a document from the specified API endpoint.
  *
- * @param params - The parameters for the document request, including document class, type, and optional consumer information.
+ * @param params - The parameters for the document request, including document class, type, and consumer information.
  * @returns A promise that resolves to either an ApiResponseIF on success or an ApiErrorIF on failure.
  */
 export async function getDocuments(params: DocumentRequestIF): Promise<ApiResponseOrError> {
@@ -139,4 +139,36 @@ export async function getDocumentRecord(consumerDocumentId: string): Promise<Api
       statusText: axiosError.response?.statusText,
     }
   }
+}
+
+/**
+ * Sends a GET request to retrieve a document scanning record by its consumerDocumentId.
+ *
+ * @param documentClass - The class of the document to be retrieved.
+ * @param documentId - The unique identifier for the document to be retrieved.
+ * @returns A promise that resolves to either an ApiResponseIF on success or an ApiErrorIF on failure.
+ */
+export async function getScanningRecord(documentClass: string, documentId: string): Promise<ApiResponseOrError> {
+  const options = {
+    method: 'GET',
+    headers: { 'x-apikey': `${docApiKey}` }
+  }
+
+  // Build the full URL
+    const url = `${baseURL}/scanning/${documentClass}/${documentId}`
+
+  try {
+    const response = await useBcrosFetch<ApiResponseIF>(url, options)
+    return {
+      data: response.data,
+      status: response.status
+    }
+  } catch (error) {
+    const axiosError = error as AxiosError
+    return {
+      message: axiosError.message,
+      status: axiosError.response?.status,
+      statusText: axiosError.response?.statusText,
+    }
+  }
 }
\ No newline at end of file
diff --git a/document-service/documents-ui/src/utils/documentTypes.ts b/document-service/documents-ui/src/utils/documentTypes.ts
index e054aa52..12eb91a1 100644
--- a/document-service/documents-ui/src/utils/documentTypes.ts
+++ b/document-service/documents-ui/src/utils/documentTypes.ts
@@ -176,3 +176,36 @@ export const documentTypes: Array<DocumentClassIF> = [
     ]
   }
 ]
+
+export const documentResultColumns = [
+  {
+    key: 'consumerIdentifier',
+    label: 'Entity ID',
+    sortable: true
+  },
+  {
+    key: 'consumerDocumentId',
+    label: 'Document ID',
+    sortable: true
+  },
+  {
+    key: 'documentClass',
+    label: 'Document Category'
+  },
+  {
+    key: 'documentTypeDescription',
+    label: 'Document Type'
+  },
+  {
+    key: 'consumerFilingDateTime',
+    label: 'Filing Date'
+  },
+  {
+    key: 'documentURL',
+    label: 'Documents'
+  },
+  {
+    key: 'actions',
+    label: 'Actions'
+  }
+]
diff --git a/document-service/documents-ui/tests/setup.ts b/document-service/documents-ui/tests/setup.ts
index 6222df57..c88e7d45 100644
--- a/document-service/documents-ui/tests/setup.ts
+++ b/document-service/documents-ui/tests/setup.ts
@@ -1,5 +1,4 @@
 import { mockNuxtImport } from '@nuxt/test-utils/runtime'
-
 import { testAccount, testUser } from './test-utils'
 
 mockNuxtImport('useBcrosNavigate', () => {
diff --git a/document-service/documents-ui/tests/test-utils/mockedi18n.ts b/document-service/documents-ui/tests/test-utils/mockedi18n.ts
index 1d109e45..3ebfb8f3 100644
--- a/document-service/documents-ui/tests/test-utils/mockedi18n.ts
+++ b/document-service/documents-ui/tests/test-utils/mockedi18n.ts
@@ -1,7 +1,10 @@
 import { createI18n } from 'vue-i18n'
 import en from '~/lang/en.json'
 
+
 export const mockedI18n = createI18n({
   locale: 'en',
-  messages: en
+  messages: {
+    en: en
+  }
 })
diff --git a/document-service/documents-ui/tests/unit/DocumentRecord.spec.ts b/document-service/documents-ui/tests/unit/DocumentRecord.spec.ts
new file mode 100644
index 00000000..12c4e713
--- /dev/null
+++ b/document-service/documents-ui/tests/unit/DocumentRecord.spec.ts
@@ -0,0 +1,52 @@
+import { beforeAll, beforeEach, describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { mockedI18n } from '~~/tests/test-utils/mockedi18n'
+import { DocumentRecord } from '#components'
+
+const mockDocumentRecord = {
+  consumerDocumentId: "0100000056",
+  consumerFilename: "Example2.pdf",
+  consumerFilingDateTime: "2024-08-23T19:00:00+00:00",
+  consumerIdentifier: "NR123",
+  createDateTime: "2024-08-13T17:55:41+00:00",
+  documentClass: "NR",
+  documentServiceId: "DS0000100059",
+  documentType: "NR_MISC",
+  documentTypeDescription: "Name requests miscellaneous documents",
+  consumerFilenames: ["Example1.pdf", "Example2.pdf"],
+  documentUrls: ["https://mockurl.com", "https://mockurl.com"],
+  accessionNumber: '123456',
+  batchId: 'batch-001',
+  pageCount: 10,
+  scanDateTime: '2024-08-23',
+  author: 'Author Name'
+}
+
+describe('DocumentRecord', () => {
+  let wrapper
+  beforeAll(() => {
+    const { documentRecord } = storeToRefs(useBcrosDocuments())
+    documentRecord.value = { ...mockDocumentRecord }
+  })
+  beforeEach(async () => {
+    wrapper = mount(DocumentRecord, { global: { plugins: [mockedI18n] } })
+    await nextTick()
+  })
+
+  it('displays the document filenames correctly', async () => {
+    // Verify the document filenames are rendered correctly
+    const fileLinks = wrapper.findAll('.spanLink')
+    expect(fileLinks.length).toBe(2)
+    expect(fileLinks[0].text()).toBe('Example1.pdf')
+    expect(fileLinks[1].text()).toBe('Example2.pdf')
+  })
+
+  it('renders the Scanning Information section correctly when data is present', async () => {
+    // Verify the scanning information fields are rendered correctly
+    expect(wrapper.text()).toContain('123456')
+    expect(wrapper.text()).toContain('batch-001')
+    expect(wrapper.text()).toContain('10')
+    expect(wrapper.text()).toContain('2024-08-23')
+    expect(wrapper.text()).toContain('Author Name')
+  })
+})
diff --git a/document-service/documents-ui/tests/unit/DocumentRecords.spec.ts b/document-service/documents-ui/tests/unit/DocumentRecords.spec.ts
new file mode 100644
index 00000000..e5d3c15c
--- /dev/null
+++ b/document-service/documents-ui/tests/unit/DocumentRecords.spec.ts
@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DocumentRecords from '~/pages/DocumentRecords.vue'
+import { mockedI18n } from '~~/tests/test-utils/mockedi18n'
+import { BcrosSection, DocumentRecord, NavActionsAside } from '#components'
+
+describe('DocumentRecords', () => {
+  it('renders the component and displays the correct content', () => {
+    const wrapper = mount(DocumentRecords, { global: { plugins: [mockedI18n] } })
+    // Verify the main container is rendered
+    expect(wrapper.find('[data-cy="document-records"]').exists()).toBe(true)
+
+    // Verify the BcrosSection component is rendered
+    const bcrosSection = wrapper.findComponent(BcrosSection)
+    expect(bcrosSection.exists()).toBe(true)
+
+    // Verify the title and description are rendered correctly
+    expect(bcrosSection.find('h1').text()).toBe('Document Record')
+    expect(bcrosSection.find('span').text()).toBe('View and download your document record')
+
+    // Verify the DocumentRecord component is rendered
+    const documentRecord = wrapper.findComponent(DocumentRecord)
+    expect(documentRecord.exists()).toBe(true)
+
+    // Verify the NavActionsAside component is not rendered
+    const navActionsAside = wrapper.findComponent(NavActionsAside)
+    expect(navActionsAside.exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+
+  it('renders the NavActionsAside component when condition is met', async () => {
+    const wrapper = mount(DocumentRecords, { global: { plugins: [mockedI18n] } })
+    wrapper.vm.showNavActions = true
+    await nextTick()
+
+    // Verify the NavActionsAside component is rendered
+    const navActionsAside = wrapper.findComponent(NavActionsAside)
+    expect(navActionsAside.exists()).toBe(true)
+
+    wrapper.unmount()
+  })
+})
diff --git a/document-service/documents-ui/tests/unit/DocumentsTable.spec.ts b/document-service/documents-ui/tests/unit/DocumentsTable.spec.ts
index a8bb0a44..3fc769d1 100644
--- a/document-service/documents-ui/tests/unit/DocumentsTable.spec.ts
+++ b/document-service/documents-ui/tests/unit/DocumentsTable.spec.ts
@@ -3,7 +3,7 @@ import { mount } from '@vue/test-utils'
 import { DocumentsTable } from '#components'
 import { mockedI18n } from '~~/tests/test-utils/mockedi18n'
 import { formatToReadableDate } from '~/utils/dateHelper'
-const { getDocumentClassDescription, downloadFileFromUrl } = useDocuments()
+const { getDocumentDescription } = useDocuments()
 const mockDocumentResults = [
   {
     "consumerDocumentId": "0100000056",
@@ -65,7 +65,7 @@ describe('DocumentsTable', () => {
     const firstRowCells = rows[0].findAll('td')
     expect(firstRowCells[0].text()).toBe(mockDocumentResults[0].consumerIdentifier)
     expect(firstRowCells[1].text()).toBe(mockDocumentResults[0].consumerDocumentId)
-    expect(firstRowCells[2].text()).toBe(getDocumentClassDescription('NR'))
+    expect(firstRowCells[2].text()).toBe(getDocumentDescription('NR'))
     expect(firstRowCells[3].text()).toBe(mockDocumentResults[0].documentTypeDescription)
     expect(firstRowCells[4].text()).toContain(formatToReadableDate('2024-08-23T19:00:00+00:00', true))