diff --git a/frontend-react/src/components/CodeMapping/CodeMappingForm.tsx b/frontend-react/src/components/CodeMapping/CodeMappingForm.tsx
index 4abe85e9586..9cbd24aad2a 100644
--- a/frontend-react/src/components/CodeMapping/CodeMappingForm.tsx
+++ b/frontend-react/src/components/CodeMapping/CodeMappingForm.tsx
@@ -1,33 +1,24 @@
 import { Button, ButtonGroup, FileInput } from "@trussworks/react-uswds";
-import { FormEventHandler, MouseEventHandler, type PropsWithChildren, useCallback } from "react";
-import CodeMappingResults from "./CodeMappingResults";
+import { FormEventHandler, MouseEventHandler, useCallback } from "react";
 import site from "../../content/site.json";
-import useCodeMappingFormSubmit from "../../hooks/api/UseCodeMappingFormSubmit/UseCodeMappingFormSubmit";
-import Spinner from "../Spinner";
-import { USLink } from "../USLink";
 
-export type CodeMappingFormProps = PropsWithChildren;
+interface CodeMappingFormProps {
+    onSubmit: FormEventHandler<HTMLFormElement>;
+    setFileName: (fileName: string) => void;
+}
 
-const CodeMappingForm = (props: CodeMappingFormProps) => {
-    const { data, isPending, mutate } = useCodeMappingFormSubmit();
-    /**
-     * TODO: Implement submit handler
-     */
-    const onSubmitHandler = useCallback<FormEventHandler<HTMLFormElement>>(
-        (ev) => {
-            ev.preventDefault();
-            mutate();
-            return false;
-        },
-        [mutate],
-    );
+const CodeMappingForm = ({ onSubmit, setFileName }: CodeMappingFormProps) => {
     const onBackHandler = useCallback<MouseEventHandler>((_ev) => {
         window.history.back();
     }, []);
-    const onCancelHandler = useCallback<MouseEventHandler>((_ev) => {
-        // Don't have a proper mechanism to cancel in-flight requests so refresh page
-        window.location.reload();
-    }, []);
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const files = event.target.files;
+        if (!files || files.length === 0) return;
+
+        // Take the first file name
+        setFileName(files[0].name);
+    };
 
     return (
         <>
@@ -40,41 +31,22 @@ const CodeMappingForm = (props: CodeMappingFormProps) => {
                 <a href={site.assets.codeMapTemplate.path}>our template</a> to format your result and organism codes to
                 LOINC or SNOMED. Note: Local codes cannot be automatically mapped.
             </p>
-            {data && <CodeMappingResults />}
-            {isPending && (
-                <>
-                    <Spinner />
-                    <p className="text-center">
-                        Checking your file for any unmapped codes that will <br /> prevent data from being reported
-                        successfully
-                    </p>
-                    <Button type={"button"} outline onClick={onCancelHandler}>
-                        Cancel
+
+            <form onSubmit={onSubmit}>
+                <label className="usa-label" htmlFor="file-input-specific">
+                    Upload CSV file
+                </label>
+                <span className="usa-hint" id="file-input-specific-hint">
+                    Make sure your file has a .csv extension
+                </span>
+                <FileInput id={""} name={"file"} className="maxw-full" accept=".csv" onChange={handleFileChange} />
+                <ButtonGroup className="margin-top-5">
+                    <Button type={"button"} outline onClick={onBackHandler}>
+                        Back
                     </Button>
-                </>
-            )}
-            {!data && !isPending && (
-                <form onSubmit={onSubmitHandler}>
-                    <label className="usa-label" htmlFor="file-input-specific">
-                        Upload CSV file
-                    </label>
-                    <span className="usa-hint" id="file-input-specific-hint">
-                        Make sure your file has a .csv extension
-                    </span>
-                    <FileInput id={""} name={"file"} className="maxw-full" accept=".csv" />
-                    <ButtonGroup className="margin-top-5">
-                        <Button type={"button"} outline onClick={onBackHandler}>
-                            Back
-                        </Button>
-                        <Button type={"submit"}>Submit</Button>
-                    </ButtonGroup>
-                </form>
-            )}
-            {props.children}
-            <p className="margin-top-9">
-                Questions or feedback? Please email{" "}
-                <USLink href="mailto:reportstream@cdc.gov">reportstream@cdc.gov</USLink>
-            </p>
+                    <Button type={"submit"}>Submit</Button>
+                </ButtonGroup>
+            </form>
         </>
     );
 };
diff --git a/frontend-react/src/components/CodeMapping/CodeMappingResults.tsx b/frontend-react/src/components/CodeMapping/CodeMappingResults.tsx
index a61595508bb..e6cc755e50e 100644
--- a/frontend-react/src/components/CodeMapping/CodeMappingResults.tsx
+++ b/frontend-react/src/components/CodeMapping/CodeMappingResults.tsx
@@ -1,10 +1,69 @@
-import type { PropsWithChildren } from "react";
+import { Button } from "@trussworks/react-uswds";
+import site from "../../content/site.json";
+import { CodeMapData } from "../../hooks/api/UseCodeMappingFormSubmit/UseCodeMappingFormSubmit";
+import { Alert, Table } from "../../shared";
+import { USExtLink } from "../USLink";
 
-export type CodeMappingResultsProps = PropsWithChildren;
+interface CodeMappingResultsProps {
+    fileName: string;
+    data: CodeMapData[];
+    onReset: () => void;
+}
 
-/**
- * TODO: Implement result page
- */
-const CodeMappingResults = (props: CodeMappingResultsProps) => <>TODO {props.children}</>;
+const CodeMappingResults = ({ fileName, data, onReset }: CodeMappingResultsProps) => {
+    const unmappedData = data.filter((item: CodeMapData) => item.mapped === "N");
+    const areCodesMapped = unmappedData.length === 0;
+    const rowData = unmappedData.map((dataRow) => [
+        {
+            columnKey: "Code",
+            columnHeader: "Code",
+            content: dataRow["test code"],
+        },
+        {
+            columnKey: "Name",
+            columnHeader: "Name",
+            content: dataRow["test description"],
+        },
+        {
+            columnKey: "Coding system",
+            columnHeader: "Coding system",
+            content: dataRow["coding system"],
+        },
+    ]);
+    return (
+        <>
+            <h2 className="margin-bottom-0">
+                <span className="text-normal font-body-md text-base margin-bottom-0">
+                    <p>File Name</p>
+                    <p>{fileName}</p>
+                </span>
+            </h2>
+            <div className="margin-top-2">
+                {areCodesMapped ? (
+                    <Alert type={"success"} heading={"All codes are mapped"}></Alert>
+                ) : (
+                    <Alert type={"error"} heading={"Your file contains unmapped codes "}>
+                        Review unmapped codes for any user error, such as a typo. If the unmapped codes are accurate,
+                        download the table and send the file to your onboarding engineer or{" "}
+                        <USExtLink href={`mailto: ${site.orgs.RS.email}`}>{site.orgs.RS.email}</USExtLink> . Our team
+                        will support any remaining mapping needed.
+                    </Alert>
+                )}
+            </div>
+            <h3>Unmapped codes</h3>
+            <div className="padding-top-2 padding-bottom-4 padding-x-3 bg-gray-5 margin-bottom-4">
+                <Table gray borderless rowData={rowData} />
+            </div>
+            <Alert type="tip" className="margin-bottom-6">
+                Follow <a href="/developer-resources/api/getting-started#2_4">these instructions</a> and use{" "}
+                <a href={site.assets.codeMapTemplate.path}>our template</a> to format your result and organism codes to
+                LOINC or SNOMED.
+            </Alert>
+            <Button type="button" onClick={onReset}>
+                Test another file
+            </Button>
+        </>
+    );
+};
 
 export default CodeMappingResults;
diff --git a/frontend-react/src/hooks/api/UseCodeMappingFormSubmit/UseCodeMappingFormSubmit.ts b/frontend-react/src/hooks/api/UseCodeMappingFormSubmit/UseCodeMappingFormSubmit.ts
index 61d78969a82..ad4aeea3f43 100644
--- a/frontend-react/src/hooks/api/UseCodeMappingFormSubmit/UseCodeMappingFormSubmit.ts
+++ b/frontend-react/src/hooks/api/UseCodeMappingFormSubmit/UseCodeMappingFormSubmit.ts
@@ -1,16 +1,43 @@
 import { useMutation } from "@tanstack/react-query";
 
-/**
- * TODO: Implement hook
- */
+export interface CodeMapData {
+    "test code": string;
+    "test description": string;
+    "coding system": string;
+    mapped: string;
+}
+
 const useCodeMappingFormSubmit = () => {
     const fn = async () => {
-        // Fake request until implementation
+        // Simulate network request
         await new Promise((resolve) => setTimeout(resolve, 2500));
+
+        // Return sample JSON
+        return [
+            {
+                "test code": "97097-0",
+                "test description":
+                    "SARS-CoV-2 (COVID-19) Ag [Presence] in Upper respiratory specimen by Rapid  immunoassay",
+                "coding system": "LOINC",
+                mapped: "Y",
+            },
+            {
+                "test code": "80382-5",
+                "test description":
+                    "Influenza virus A Ag [Presence] in Upper respiratory specimen by Rapid immunoassay",
+                "coding system": "LOINC",
+                mapped: "Y",
+            },
+            {
+                "test code": "12345",
+                "test description": "Flu B",
+                "coding system": "LOCAL",
+                mapped: "N",
+            },
+        ];
     };
-    return useMutation({
-        mutationFn: fn,
-    });
+
+    return useMutation({ mutationFn: fn });
 };
 
 export default useCodeMappingFormSubmit;
diff --git a/frontend-react/src/pages/onboarding/CodeMappingPage.tsx b/frontend-react/src/pages/onboarding/CodeMappingPage.tsx
index 9691a5ccc26..95d52ebe5c7 100644
--- a/frontend-react/src/pages/onboarding/CodeMappingPage.tsx
+++ b/frontend-react/src/pages/onboarding/CodeMappingPage.tsx
@@ -1,14 +1,73 @@
-import type { PropsWithChildren } from "react";
+import { Button, GridContainer } from "@trussworks/react-uswds";
+import { FormEventHandler, MouseEventHandler, useCallback, useState } from "react";
+import { Helmet } from "react-helmet-async";
 import CodeMappingForm from "../../components/CodeMapping/CodeMappingForm";
+import CodeMappingResults from "../../components/CodeMapping/CodeMappingResults";
+import Spinner from "../../components/Spinner";
+import { USExtLink } from "../../components/USLink";
+import site from "../../content/site.json";
+import useCodeMappingFormSubmit from "../../hooks/api/UseCodeMappingFormSubmit/UseCodeMappingFormSubmit";
 
-export type CodeMappingPageProps = PropsWithChildren;
+enum CodeMappingSteps {
+    StepOne = "CodeMapFileSelect",
+    StepTwo = "CodeMapResult",
+}
 
-const CodeMappingPage = (props: CodeMappingPageProps) => {
+const CodeMappingPage = () => {
+    const { data, isPending, mutate } = useCodeMappingFormSubmit();
+    const [currentCodeMapStep, setCurrentCodeMapStep] = useState<CodeMappingSteps>(CodeMappingSteps.StepOne);
+    const [fileName, setFileName] = useState("");
+    const onCancelHandler = useCallback<MouseEventHandler>((_ev) => {
+        // Don't have a proper mechanism to cancel in-flight requests so refresh page
+        window.location.reload();
+    }, []);
+    const onReset = () => {
+        setCurrentCodeMapStep(CodeMappingSteps.StepOne);
+    };
+    const onSubmit = useCallback<FormEventHandler<HTMLFormElement>>(
+        (ev) => {
+            ev.preventDefault();
+            mutate();
+            setCurrentCodeMapStep(CodeMappingSteps.StepTwo);
+            return false;
+        },
+        [mutate],
+    );
     return (
         <>
-            <h1>Code mapping tool</h1>
-            <CodeMappingForm />
-            {props.children}
+            <Helmet>
+                <title>Code mapping tool - ReportStream</title>
+            </Helmet>
+
+            <GridContainer>
+                <h1>Code mapping tool</h1>
+                {isPending ? (
+                    <>
+                        <Spinner />
+                        <p className="text-center">
+                            Checking your file for any unmapped codes that will <br /> prevent data from being reported
+                            successfully
+                        </p>
+                        <Button type={"button"} outline onClick={onCancelHandler}>
+                            Cancel
+                        </Button>
+                    </>
+                ) : (
+                    <>
+                        {currentCodeMapStep === CodeMappingSteps.StepOne && (
+                            <CodeMappingForm onSubmit={onSubmit} setFileName={setFileName} />
+                        )}
+                        {currentCodeMapStep === CodeMappingSteps.StepTwo && (
+                            <CodeMappingResults fileName={fileName} data={data ?? []} onReset={onReset} />
+                        )}
+                    </>
+                )}
+
+                <p className="margin-top-9">
+                    Questions or feedback? Please email{" "}
+                    <USExtLink href={`mailto: ${site.orgs.RS.email}`}>{site.orgs.RS.email}</USExtLink>{" "}
+                </p>
+            </GridContainer>
         </>
     );
 };
diff --git a/frontend-react/src/shared/Table/Table.module.scss b/frontend-react/src/shared/Table/Table.module.scss
index b1a1c1ba80f..343459c0102 100644
--- a/frontend-react/src/shared/Table/Table.module.scss
+++ b/frontend-react/src/shared/Table/Table.module.scss
@@ -89,6 +89,14 @@
             font-size: 16px;
             margin: 0;
         }
+
+        .gray-table {
+          background-color: color("gray-5");
+
+          &.usa-table td {
+            background-color: color("gray-5");
+          }
+        }
     }
 
     &__StickyHeader {
diff --git a/frontend-react/src/shared/Table/Table.tsx b/frontend-react/src/shared/Table/Table.tsx
index ecab8a76fcd..a75cfe469a9 100644
--- a/frontend-react/src/shared/Table/Table.tsx
+++ b/frontend-react/src/shared/Table/Table.tsx
@@ -47,6 +47,7 @@ export interface TableProps {
     sticky?: boolean;
     striped?: boolean;
     rowData: RowData[][];
+    gray?: boolean;
 }
 
 const TableHeader = ({ dataContent }: { dataContent: RowData["content"] }) => (
@@ -98,9 +99,7 @@ const SortableTableHeader = ({
                 onClick={handleHeaderClick}
             >
                 <div className="column-header--sortable">
-                    <p className="column-header-text">
-                        {columnHeaderData.columnHeader}
-                    </p>
+                    <p className="column-header-text">{columnHeaderData.columnHeader}</p>
                     {<SortIcon size={3} />}
                 </div>
             </button>
@@ -136,14 +135,9 @@ const CustomSortableTableHeader = ({
                 "column-header--sticky": sticky,
             })}
         >
-            <button
-                className="column-header-button"
-                onClick={handleHeaderClick}
-            >
+            <button className="column-header-button" onClick={handleHeaderClick}>
                 <div className="column-header--sortable">
-                    <p className="column-header-text">
-                        {columnHeaderData.columnHeader}
-                    </p>
+                    <p className="column-header-text">{columnHeaderData.columnHeader}</p>
                     {<SortIcon size={3} />}
                 </div>
             </button>
@@ -151,17 +145,11 @@ const CustomSortableTableHeader = ({
     );
 };
 
-function sortTableData(
-    activeColumn: string,
-    rowData: RowData[][],
-    sortOrder: FilterOptions,
-) {
+function sortTableData(activeColumn: string, rowData: RowData[][], sortOrder: FilterOptions) {
     return sortOrder !== FilterOptions.NONE && activeColumn
         ? rowData.sort((a, b): number => {
-              const contentColA =
-                  a.find((item) => item.columnKey === activeColumn) ?? "";
-              const contentColB =
-                  b.find((item) => item.columnKey === activeColumn) ?? "";
+              const contentColA = a.find((item) => item.columnKey === activeColumn) ?? "";
+              const contentColB = b.find((item) => item.columnKey === activeColumn) ?? "";
               if (sortOrder === FilterOptions.ASC) {
                   return contentColA < contentColB ? 1 : -1;
               } else {
@@ -191,12 +179,7 @@ const SortableTable = ({
                 <tr>
                     {columnHeaders.map((columnHeaderData, index) => {
                         if (apiSortable && !columnHeaderData.columnCustomSort) {
-                            return (
-                                <TableHeader
-                                    key={index}
-                                    dataContent={columnHeaderData.columnHeader}
-                                />
-                            );
+                            return <TableHeader key={index} dataContent={columnHeaderData.columnHeader} />;
                         } else if (
                             apiSortable &&
                             columnHeaderData.columnCustomSort &&
@@ -207,12 +190,8 @@ const SortableTable = ({
                                     key={index}
                                     columnHeaderData={columnHeaderData}
                                     sticky={sticky}
-                                    onColumnCustomSort={
-                                        columnHeaderData.columnCustomSort
-                                    }
-                                    columnCustomSortSettings={
-                                        columnHeaderData.columnCustomSortSettings
-                                    }
+                                    onColumnCustomSort={columnHeaderData.columnCustomSort}
+                                    columnCustomSortSettings={columnHeaderData.columnCustomSortSettings}
                                 />
                             );
                         }
@@ -235,8 +214,7 @@ const SortableTable = ({
                     return (
                         <tr key={index}>
                             {row.map((data, dataIndex) => {
-                                const isActive =
-                                    data.columnKey === activeColumn;
+                                const isActive = data.columnKey === activeColumn;
                                 return (
                                     <td
                                         key={dataIndex}
@@ -267,6 +245,7 @@ const Table = ({
     sticky,
     striped,
     rowData,
+    gray,
 }: TableProps) => {
     const classes = classnames("usa-table", {
         "usa-table--borderless": borderless,
@@ -275,29 +254,24 @@ const Table = ({
         "usa-table--stacked": stackedStyle === "default",
         "usa-table--stacked-header": stackedStyle === "headers",
         "usa-table--striped": striped,
+        "gray-table": gray,
     });
 
     const columnHeaders = rowData.flat().filter((rowItemFilter, pos, arr) => {
-        return (
-            arr
-                .map((rowItemMap) => rowItemMap.columnKey)
-                .indexOf(rowItemFilter.columnKey) === pos
-        );
+        return arr.map((rowItemMap) => rowItemMap.columnKey).indexOf(rowItemFilter.columnKey) === pos;
     });
 
     return (
         <div
             className={styles.Table}
             {...(scrollable && {
-                className: `usa-table-container--scrollable ${styles.Table} ${
-                    sticky && styles.Table__StickyHeader
-                }`,
+                className: `usa-table-container--scrollable ${styles.Table} ${sticky && styles.Table__StickyHeader}`,
                 tabIndex: 0,
             })}
         >
             {rowData.length ? (
                 <table className={classes}>
-                    {sortable ?? apiSortable ? (
+                    {(sortable ?? apiSortable) ? (
                         <SortableTable
                             sticky={sticky}
                             rowData={rowData}
@@ -312,17 +286,11 @@ const Table = ({
                                         return (
                                             <th
                                                 key={index}
-                                                className={classnames(
-                                                    "column-header",
-                                                    {
-                                                        "column-header--sticky":
-                                                            sticky,
-                                                    },
-                                                )}
+                                                className={classnames("column-header", {
+                                                    "column-header--sticky": sticky,
+                                                })}
                                             >
-                                                <p className="column-header-text">
-                                                    {header.columnHeader}
-                                                </p>
+                                                <p className="column-header-text">{header.columnHeader}</p>
                                             </th>
                                         );
                                     })}