diff --git a/front-end/app/ecr_viewer/page.tsx b/front-end/app/ecr_viewer/page.tsx
deleted file mode 100644
index 12c5eccc..00000000
--- a/front-end/app/ecr_viewer/page.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-'use client'
-import {
-    Modal,
-    ButtonGroup,
-    ModalFooter,
-    ModalHeading,
-    ModalToggleButton,
-    ModalRef,
-    Select,
-    Label,
-    Table
-} from '@trussworks/react-uswds'
-import React, { useRef } from 'react'
-
-export default function ECRViewer() {
-    const modalRef = useRef<ModalRef>(null)
-    const options = []
-    const data = [
-        {
-            document_title: 'Declaration of Independence',
-            year: '1776'
-        },
-        {
-            document_title: 'Bill of Rights',
-            year: '1791'
-        },
-        {
-            document_title: 'Emancipation Proclamation',
-            year: '1863'
-        },
-    ]
-
-    const getTableBody = () => {
-        return (
-            <tbody>
-                {data.map(function (data, i) {
-                    return (
-                        <tr key={data.document_title}>
-                            <th scope="row">{data.document_title}</th>
-                            <td>{data.year}</td>
-                        </tr>
-                    );
-                })}
-            </tbody>
-        )
-    }
-
-    return (
-        <div className='margin-3'>
-            <h1>eCR Viewer</h1>
-            <div>
-                {ExportModal()}
-            </div>
-            <div>
-                <Table
-                    bordered
-                    caption="This table uses the fullWidth prop to increase to 100% width"
-                    fullWidth>
-                    <thead>
-                        <tr>
-                            <th scope="col">Document title</th>
-                            <th scope="col">Year</th>
-                        </tr>
-                    </thead>
-                    {getTableBody()}
-                </Table>
-            </div>
-        </div>
-    )
-}
-
-function ExportModal() {
-    const modalRef = useRef<ModalRef>(null)
-    return (
-        <>
-            <ModalToggleButton modalRef={modalRef} opener>
-                Export
-            </ModalToggleButton>
-            <Modal
-                ref={modalRef}
-                id="example-modal-1"
-                aria-labelledby="modal-1-heading"
-                aria-describedby="modal-1-description">
-                <ModalHeading id="modal-1-heading">
-                    Export eCR Data
-                </ModalHeading>
-                <div>
-                    <Label htmlFor="input-select">Select a file format</Label>
-                    <Select
-                        id="input-select"
-                        name="input-select"
-                    >
-                        <React.Fragment key=".0">
-                            <option>
-                                - Select -{' '}
-                            </option>
-                            <option value="value1">
-                                .csv
-                            </option>
-                            <option value="value2">
-                                .parquet
-                            </option>
-                            <option value="value3">
-                                .txt
-                            </option>
-                        </React.Fragment>
-                    </Select>
-                </div>
-                <div>
-                    <Label htmlFor="input-select">Select a data format</Label>
-                    <Select
-                        id="input-select"
-                        name="input-select"
-                    >
-                        <React.Fragment key=".0">
-                            <option>
-                                - Select -{' '}
-                            </option>
-                            <option value="value1">
-                                FHIR
-                            </option>
-                            <option value="value2">
-                                XML
-                            </option>
-                            <option value="value3">
-                                .txt
-                            </option>
-                        </React.Fragment>
-                    </Select>
-                </div>
-                <ModalFooter>
-                    <ButtonGroup>
-                        <ModalToggleButton modalRef={modalRef} closer>
-                            Download
-                        </ModalToggleButton>
-                        <ModalToggleButton
-                            modalRef={modalRef}
-                            closer
-                            unstyled
-                            className="padding-105 text-center">
-                            Go back
-                        </ModalToggleButton>
-                    </ButtonGroup>
-                </ModalFooter>
-            </Modal>
-        </>
-    )
-}
diff --git a/front-end/app/export/page.tsx b/front-end/app/export/page.tsx
index 954f59fb..5a26de5a 100644
--- a/front-end/app/export/page.tsx
+++ b/front-end/app/export/page.tsx
@@ -1,4 +1,5 @@
 'use client'
+import ECRTable from '@/components/ECRTable';
 import { useData } from '@/utils/DataContext';
 import { Button } from '@trussworks/react-uswds'
 
@@ -31,6 +32,7 @@ export default function ExportPage() {
         <div className="margin-3">
             <h1>Export Page</h1>
             <Button type="button" onClick={downloadFile}>Export</Button>
+            <ECRTable ecrData={data}></ECRTable>
         </div>
     );
 }
\ No newline at end of file
diff --git a/front-end/components/ECRTable.tsx b/front-end/components/ECRTable.tsx
new file mode 100644
index 00000000..cbdec29d
--- /dev/null
+++ b/front-end/components/ECRTable.tsx
@@ -0,0 +1,46 @@
+import {
+    Table
+} from '@trussworks/react-uswds'
+import _ from 'lodash';
+
+export default function ECRTable({ ecrData }) {
+    const options = ['patient_id', 'first_name', 'last_name', 'gender', 'birth_date']
+
+    console.log(ecrData);
+
+    const getTableBody = (data: any) => {
+        return (
+            <tbody>
+                {options.map(function (option) {
+                    return (
+                        <tr key={option}>
+                            <th scope="row">{_.startCase(option)}</th>
+                            <td>{data[option]}</td>
+                        </tr>
+                    );
+                })}
+
+            </tbody>
+        )
+    }
+
+    return (
+        <div className='margin-3'>
+            <h1>eCR Viewer</h1>
+            <div>
+                <Table
+                    bordered
+                    caption="This table uses the fullWidth prop to increase to 100% width"
+                    fullWidth>
+                    <thead>
+                        <tr>
+                            <th scope="col">Field Name</th>
+                            <th scope="col">Field Value</th>
+                        </tr>
+                    </thead>
+                    {getTableBody(ecrData.processed_values.parsed_values)}
+                </Table>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/front-end/package-lock.json b/front-end/package-lock.json
index b1a18e60..343904ae 100644
--- a/front-end/package-lock.json
+++ b/front-end/package-lock.json
@@ -15,6 +15,7 @@
         "autoprefixer": "10.4.15",
         "eslint": "8.47.0",
         "eslint-config-next": "13.4.15",
+        "lodash": "^4.17.21",
         "next": "13.5.5",
         "postcss": "8.4.27",
         "react": "18.2.0",
@@ -6670,8 +6671,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
diff --git a/front-end/package.json b/front-end/package.json
index a93ceed0..5c79f405 100644
--- a/front-end/package.json
+++ b/front-end/package.json
@@ -18,6 +18,7 @@
     "eslint": "8.47.0",
     "eslint-config-next": "13.4.15",
     "next": "13.5.5",
+    "lodash": "^4.17.21",
     "postcss": "8.4.27",
     "react": "18.2.0",
     "react-dom": "18.2.0",
diff --git a/front-end/tests/components/ECRTable.test.js b/front-end/tests/components/ECRTable.test.js
new file mode 100644
index 00000000..3bbb33ce
--- /dev/null
+++ b/front-end/tests/components/ECRTable.test.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import "@testing-library/jest-dom";
+import ECRTable from '../../components/ECRTable'; // Adjust the import path as per your project structure
+
+describe('ECRTable', () => {
+    it('renders ECRTable component with provided data', () => {
+        const ecrData = {
+            "processed_values": {
+                "message": "Parsing succeeded!",
+                "parsed_values": {
+                    "patient_id": "123",
+                    "person_id": null,
+                    "last_name": "BEAKER",
+                    "first_name": "CATEST",
+                    "birth_date": "2016-01-27",
+                    "gender": "female"
+                }
+            }
+        };
+
+        render(<ECRTable ecrData={ecrData} />);
+
+        // You can add more specific assertions here
+        // For example, checking if the table headers and data are rendered
+        expect(screen.getByText('eCR Viewer')).toBeInTheDocument();
+        expect(screen.getByText('Field Name')).toBeInTheDocument();
+        expect(screen.getByText('Field Value')).toBeInTheDocument();
+        expect(screen.getByText('Patient Id')).toBeInTheDocument();
+        expect(screen.getByText('123')).toBeInTheDocument();
+        // Add similar assertions for other data fields
+    });
+});
diff --git a/front-end/tests/export.test.js b/front-end/tests/export.test.js
index 7798e0a6..7f4c75f8 100644
--- a/front-end/tests/export.test.js
+++ b/front-end/tests/export.test.js
@@ -7,7 +7,17 @@ import ExportPage from '../app/export/page'; // Adjust the import path as needed
 jest.mock('../utils/DataContext', () => ({
     useData: () => ({
         data: {
-            "name": "this is a test"
+            "processed_values": {
+                "message": "Parsing succeeded!",
+                "parsed_values": {
+                    "patient_id": "95a52bd2-2a17-4888-af52-be3472c94e0e",
+                    "person_id": null,
+                    "last_name": "BEAKER",
+                    "first_name": "CATEST",
+                    "birth_date": "2016-01-27",
+                    "gender": "female"
+                }
+            }
         },
     }),
 }));