diff --git a/packages/esm-report-app/src/api/api.ts b/packages/esm-report-app/src/api/api.ts
index eb5fb6c9..9eedf948 100644
--- a/packages/esm-report-app/src/api/api.ts
+++ b/packages/esm-report-app/src/api/api.ts
@@ -36,8 +36,8 @@ async function postData(url: string, ac = new AbortController()) {
   return response.data;
 }
 
-export const generateMOH362Reports = () => {
-  const { data, error, isLoading, isValidating } = useSWR(`${BASE_URL}/view`, fetcher);
+export const generateMOH362Reports = (id) => {
+  const { data, error, isLoading, isValidating } = useSWR(`${BASE_URL}/view?id=${id}`, fetcher);
 
   const mohData = data ? (data as any)?.results : [];
   return {
@@ -84,6 +84,13 @@ export const fetchReportLogsByLocationAndId = async (
   return results.data;
 };
 
+export const generateReportData = async (reportId: number, ac = new AbortController()) => {
+  const results = await openmrsFetch(`${BASE_URL}/view?id=${reportId}`, {
+    signal: ac.signal,
+  });
+  return results.data;
+};
+
 export const getFacilityLocations = () => {
   const { data, error, isLoading, isValidating } = useSWR(`${url}/location?v=default`, async () => {
     const response = await openmrsFetch(`${url}/location?v=default`, {
diff --git a/packages/esm-report-app/src/registers/MOH-362/moh-362a/MOH_362A_component.tsx b/packages/esm-report-app/src/registers/MOH-362/moh-362a/MOH_362A_component.tsx
index ca373676..155ef40c 100644
--- a/packages/esm-report-app/src/registers/MOH-362/moh-362a/MOH_362A_component.tsx
+++ b/packages/esm-report-app/src/registers/MOH-362/moh-362a/MOH_362A_component.tsx
@@ -1,14 +1,8 @@
 import React from 'react';
-import { generateMOH362Reports } from '../../../api/api';
 import styles from '../MOH-362.scss';
 import { TableContainer, TableHead, TableRow, TableHeader, Table, TableBody, TableCell } from '@carbon/react';
 
-const RenderMOH362a: React.FC = () => {
-  const { mohData: moh362a, isLoading, error } = generateMOH362Reports();
-
-  if (isLoading) return <div>Loading...</div>;
-  if (error) return <div>Error loading data</div>;
-
+const RenderMOH362a: React.FC<{ reportData: any }> = ({ reportData }) => {
   return (
     <TableContainer className={styles['table-container']} title="MOH 362 HTS LAB, REFERRAL AND LINKAGE REGISTER">
       <div className={styles['header']}>
@@ -154,15 +148,15 @@ const RenderMOH362a: React.FC = () => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {moh362a && moh362a.length > 0 ? (
-            moh362a.map((item, i) => (
+          {reportData && reportData.length > 0 ? (
+            reportData.map((item, i) => (
               <React.Fragment key={i}>
                 <TableRow>
-                  <TableCell rowSpan={2}>{item.patient_id}</TableCell>
+                  <TableCell rowSpan={2}>{i}</TableCell>
                   <TableCell className={styles['dotted-border']} rowSpan={1}>
                     {item.patient_id}
                   </TableCell>
-                  <TableCell rowSpan={2}>{item.patient_id}</TableCell>
+                  <TableCell rowSpan={2}>{item.visit_date}</TableCell>
                   <TableCell rowSpan={2}>{item.patient_id}</TableCell>
                   <TableCell rowSpan={2}>{item.patient_id}</TableCell>
                   <TableCell rowSpan={2}>{item.patient_id}</TableCell>
diff --git a/packages/esm-report-app/src/registers/MOH-362/moh-362b/MOH_362B_component.tsx b/packages/esm-report-app/src/registers/MOH-362/moh-362b/MOH_362B_component.tsx
index b520de8c..02414401 100644
--- a/packages/esm-report-app/src/registers/MOH-362/moh-362b/MOH_362B_component.tsx
+++ b/packages/esm-report-app/src/registers/MOH-362/moh-362b/MOH_362B_component.tsx
@@ -1,16 +1,7 @@
 import React from 'react';
-import { TableContainer, TableHead, TableRow, TableHeader } from '@carbon/react';
-import { Table } from '@carbon/react';
-import { TableBody } from '@carbon/react';
-import { TableCell } from '@carbon/react';
-import { generateMOH362Reports } from '../../../api/api';
+import { TableContainer, TableHead, TableRow, TableHeader, Table, TableCell, TableBody } from '@carbon/react';
 import styles from '../MOH-362.scss';
-const RenderMOH362b: React.FC = () => {
-  const { mohData: moh362b, isLoading, error } = generateMOH362Reports();
-
-  if (isLoading) return <div>Loading...</div>;
-  if (error) return <div>Error loading data</div>;
-
+const RenderMOH362b: React.FC<{ reportData: any }> = ({ reportData }) => {
   return (
     <TableContainer className={styles['table-container']} title="MOH 362 HTS LAB, REFERRAL AND LINKAGE REGISTER">
       <div className={styles['header']}>
@@ -67,8 +58,8 @@ const RenderMOH362b: React.FC = () => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {moh362b && moh362b.length > 0 ? (
-            moh362b.map((item, i) => (
+          {reportData && reportData.length > 0 ? (
+            reportData.map((item, i) => (
               <React.Fragment key={i}>
                 <TableRow>
                   <TableCell rowSpan={2}> {item.patient_id}</TableCell>
diff --git a/packages/esm-report-app/src/registers/MOH-405/MOH_405_component.tsx b/packages/esm-report-app/src/registers/MOH-405/MOH_405_component.tsx
index 10bae6c1..fc8d6f83 100644
--- a/packages/esm-report-app/src/registers/MOH-405/MOH_405_component.tsx
+++ b/packages/esm-report-app/src/registers/MOH-405/MOH_405_component.tsx
@@ -1,11 +1,8 @@
 import React from 'react';
 import styles from './MOH-405.scss';
-import { TableContainer, TableHead, TableRow, TableHeader } from '@carbon/react';
-import { Table } from '@carbon/react';
-import { TableBody } from '@carbon/react';
-import { TableCell } from '@carbon/react';
+import { TableContainer, TableHead, TableRow, Table, TableBody, TableCell, TableHeader } from '@carbon/react';
 
-const RenderMOH405: React.FC = () => (
+const RenderMOH405: React.FC<{ reportData: any }> = ({ reportData }) => (
   <TableContainer className={styles['table-container']}>
     <div className={styles['header']}>
       <div className={styles['left']}>
diff --git a/packages/esm-report-app/src/registers/MOH-406/MOH_406_component.tsx b/packages/esm-report-app/src/registers/MOH-406/MOH_406_component.tsx
index 9beb2b9e..6c641c83 100644
--- a/packages/esm-report-app/src/registers/MOH-406/MOH_406_component.tsx
+++ b/packages/esm-report-app/src/registers/MOH-406/MOH_406_component.tsx
@@ -1,12 +1,9 @@
 import React from 'react';
 import styles from './MOH_406.scss';
 
-import { TableContainer, TableHead, TableRow, TableHeader } from '@carbon/react';
-import { Table } from '@carbon/react';
-import { TableBody } from '@carbon/react';
-import { TableCell } from '@carbon/react';
+import { TableContainer, TableHead, TableRow, TableHeader, Table, TableBody, TableCell } from '@carbon/react';
 
-const RenderMOH406: React.FC = () => (
+const RenderMOH406: React.FC<{ reportData: any }> = ({ reportData }) => (
   <TableContainer className={styles['table-container']}>
     <div className={styles['header']}>
       <div className={styles['left']}>
diff --git a/packages/esm-report-app/src/registers/MOH-407/clientFollowUp/ClientFollowUp_component.tsx b/packages/esm-report-app/src/registers/MOH-407/clientFollowUp/ClientFollowUp_component.tsx
index 235b8a41..3d1a1795 100644
--- a/packages/esm-report-app/src/registers/MOH-407/clientFollowUp/ClientFollowUp_component.tsx
+++ b/packages/esm-report-app/src/registers/MOH-407/clientFollowUp/ClientFollowUp_component.tsx
@@ -1,11 +1,8 @@
 import React from 'react';
 import styles from '../nutrition.scss';
-import { TableContainer, TableHead, TableRow, TableHeader } from '@carbon/react';
-import { Table } from '@carbon/react';
-import { TableBody } from '@carbon/react';
-import { TableCell } from '@carbon/react';
+import { TableContainer, TableHead, TableRow, TableHeader, Table, TableBody, TableCell } from '@carbon/react';
 
-const ClientFollowUpRegister: React.FC = () => (
+const ClientFollowUpRegister: React.FC<{ reportData: any }> = ({ reportData }) => (
   <TableContainer className={styles['table-container']}>
     <div className={styles['header']}>
       <div className={styles['left']}>
diff --git a/packages/esm-report-app/src/registers/MOH-407/nutrition/Nutrition_component.tsx b/packages/esm-report-app/src/registers/MOH-407/nutrition/Nutrition_component.tsx
index 96ca581d..8d88e959 100644
--- a/packages/esm-report-app/src/registers/MOH-407/nutrition/Nutrition_component.tsx
+++ b/packages/esm-report-app/src/registers/MOH-407/nutrition/Nutrition_component.tsx
@@ -1,11 +1,8 @@
 import React from 'react';
 import styles from '../nutrition.scss';
-import { TableContainer, TableHead, TableRow, TableHeader } from '@carbon/react';
-import { Table } from '@carbon/react';
-import { TableBody } from '@carbon/react';
-import { TableCell } from '@carbon/react';
+import { TableContainer, TableHead, TableRow, TableHeader, Table, TableBody, TableCell } from '@carbon/react';
 
-const NutritionRegister: React.FC = () => (
+const NutritionRegister: React.FC<{ reportData: any }> = ({ reportData }) => (
   <TableContainer className={styles['table-container']}>
     <div className={styles['header']}>
       <div className={styles['left']}>
diff --git a/packages/esm-report-app/src/registers/MOH-408/MOH-408-component.tsx b/packages/esm-report-app/src/registers/MOH-408/MOH-408-component.tsx
index 45991df8..83d4ecfa 100644
--- a/packages/esm-report-app/src/registers/MOH-408/MOH-408-component.tsx
+++ b/packages/esm-report-app/src/registers/MOH-408/MOH-408-component.tsx
@@ -1,10 +1,7 @@
 import React from 'react';
 import styles from './MOH-408.scss';
-import { TableContainer, TableHead, TableRow, TableHeader } from '@carbon/react';
-import { Table } from '@carbon/react';
-import { TableBody } from '@carbon/react';
-import { TableCell } from '@carbon/react';
-const RenderMOH408: React.FC = () => {
+import { TableContainer, TableHead, TableRow, TableHeader, Table, TableBody, TableCell } from '@carbon/react';
+const RenderMOH408: React.FC<{ reportData: any }> = ({ reportData }) => {
   return (
     <TableContainer className={styles['table-container']}>
       <div className={styles['header']}>
diff --git a/packages/esm-report-app/src/reports-dashboard/report-loader/dynamic-report-loader-component.tsx b/packages/esm-report-app/src/reports-dashboard/report-loader/dynamic-report-loader-component.tsx
index e1b33ab5..86e0bec5 100644
--- a/packages/esm-report-app/src/reports-dashboard/report-loader/dynamic-report-loader-component.tsx
+++ b/packages/esm-report-app/src/reports-dashboard/report-loader/dynamic-report-loader-component.tsx
@@ -10,42 +10,43 @@ import PrepRegister from '../../registers/MOH-267/prep-activity-register.compone
 import MOH731 from '../../registers/MOH-731/MOH_731';
 import CareAndTreatment from '../../registers/CARE_AND_TREATMENT/Care_and_Treatment';
 import MOH333 from '../../registers/MOH_333_MATERNITY/MOH_333_component';
-import { useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import styles from './dynamic-report-loader.scss';
 import RenderMOH408 from '../../registers/MOH-408/MOH-408-component';
 import UseBreadcrumb from '../breadcrumb/bread-crumb';
 import html2canvas from 'html2canvas';
 import { PDFDocument } from 'pdf-lib';
+import reportMapping from './reportMapping.json';
 
-const reportComponentMapping = {
-  'MOH 405 - AnteNatal(ANC) Register': RenderMOH405,
-  'MOH 406 A PNC REGISTER': RenderMOH406,
-  'MOH 362 A - HTS LABS REGISTER': RenderMOH362A,
-  'MOH 362 B - HTS LABS REGISTER': RenderMOH362B,
-  'MOH 407 Nutrition Service Register': NutritionRegisters,
-  'ClientFollowUp Service Register MOH 407': ClientFollowUpRegister,
-  'PrEP DAR': PrepRegister,
-  'MOH 408 HEI REGISTER': RenderMOH408,
-  'MOH 731': MOH731,
-  'Care & Treatment': CareAndTreatment,
-  'MOH 333 Maternity Register': MOH333,
+const componentMap = {
+  RenderMOH405,
+  RenderMOH406,
+  RenderMOH362A,
+  RenderMOH362B,
+  NutritionRegisters,
+  ClientFollowUpRegister,
+  PrepRegister,
+  RenderMOH408,
+  MOH333,
+  CareAndTreatment,
+  MOH731,
 };
 
 const DynamicReportLoader: React.FC = () => {
   const { reportUuid } = useParams<{ reportUuid: string }>();
-  const ReportComponent = reportComponentMapping[reportUuid];
+  const location = useLocation();
+  const { reportData } = location.state || {};
+
+  const reportMappingEntry = reportMapping.find((entry) => entry.report_uuid === reportUuid);
+  const ReportComponent = reportMappingEntry ? componentMap[reportMappingEntry.component] : null;
+
   const downloadPDF = async () => {
     const element = document.getElementById('report-content');
     if (element) {
-      // Capture the element as an image using html2canvas
       const canvas = await html2canvas(element);
       const imgData = canvas.toDataURL('image/png');
-
-      // Create a new PDF document
       const pdfDoc = await PDFDocument.create();
       const page = pdfDoc.addPage([canvas.width, canvas.height]);
-
-      // Draw the captured image in the PDF
       const pngImage = await pdfDoc.embedPng(imgData);
       page.drawImage(pngImage, {
         x: 0,
@@ -53,8 +54,6 @@ const DynamicReportLoader: React.FC = () => {
         width: canvas.width,
         height: canvas.height,
       });
-
-      // Save and open the PDF
       const pdfBytes = await pdfDoc.save();
       const blob = new Blob([pdfBytes], { type: 'application/pdf' });
       const url = URL.createObjectURL(blob);
@@ -82,11 +81,11 @@ const DynamicReportLoader: React.FC = () => {
               Download PDF
             </button>
             <button className={styles.downloadButton} onClick={downloadExcel}>
-              Download Excel
+              Export Excel
             </button>
           </div>
           <div id="report-content">
-            <ReportComponent />
+            <ReportComponent reportData={reportData} />
           </div>
         </>
       ) : (
diff --git a/packages/esm-report-app/src/reports-dashboard/report-loader/reportMapping.json b/packages/esm-report-app/src/reports-dashboard/report-loader/reportMapping.json
index 5c5396e3..44fbb6ff 100644
--- a/packages/esm-report-app/src/reports-dashboard/report-loader/reportMapping.json
+++ b/packages/esm-report-app/src/reports-dashboard/report-loader/reportMapping.json
@@ -1,12 +1,57 @@
-{
-    "MOH 405 - AnteNatal(ANC) Register": "MOH_405_component",
-    "MOH 406 A PNC REGISTER": "MOH_406_component",
-    "MOH 362 A - HTS LABS REGISTER": "MOH_362A_component",
-    "MOH 362 B - HTS LABS REGISTER": "MOH_362B_component",
-    "MOH 407 Nutrition Service Register": "Nutrition_component",
-    "ClientFollowUp Service Register MOH 407": "ClientFollowUp_component",
-    "uuid-for-prep-register": "prep-activity-register.component",
-    "MOH 408 HEI REGISTER": "MOH-408-component"
+[
+  {
+    "report_name": "MOH 405 - AnteNatal(ANC) Register",
+    "report_uuid": "9b3a8ae4-ad09-4806-a824-3807b41ba370",
+    "component": "RenderMOH405"
+  },
+  {
+    "report_name": "MOH 406 A PNC REGISTER",
+    "report_uuid": "fa94e87a-fc49-4e8e-bbec-aee08da51add",
+    "component": "RenderMOH406"
+  },
+  {
+    "report_name": "MOH 362 A - HTS LABS REGISTER",
+    "report_uuid": "7daf4258-eceb-47c3-81ba-8ae6ddea41d9",
+    "component": "RenderMOH362A"
+  },
+  {
+    "report_name": "MOH 362 B - HTS LABS REGISTER",
+    "report_uuid": "9b55b530-908a-44b2-8974-8328b2c952dd",
+    "component": "RenderMOH362B"
+  },
+  {
+    "report_name": "MOH 407 Nutrition Service Register",
+    "report_uuid": "43ca0b4f-7767-4beb-b122-f11500602470",
+    "component": "NutritionRegisters"
+  },
+  {
+    "report_name": "ClientFollowUp Service Register MOH 407",
+    "report_uuid": "43ca0b4f-7767-4beb-b122-f11500602470",
+    "component": "ClientFollowUpRegister"
+  },
+  {
+    "report_name": "PrEP DAR",
+    "report_uuid": "d611bd51-8cec-4069-87d6-d59a205bee05",
+    "component": "PrepRegister"
+  },
+  {
+    "report_name": "MOH 408 HEI REGISTER",
+    "report_uuid": "d611bd51-8cec-4069-87d6-d59a205bee05",
+    "component": "RenderMOH408"
+  },
+  {
+    "report_name": "MOH 731",
+    "report_uuid": "f3650738-5830-4159-ac8d-e68a15852cc4",
+    "component": "MOH731"
+  },
+  {
+    "report_name": "Care & Treatment",
+    "report_uuid": "b8dcd336-d8fa-405e-95fe-fd23783db908",
+    "component": "CareAndTreatment"
+  },
+  {
+    "report_name": "MOH 333 Maternity Register",
+    "report_uuid": "e6f9b821-e087-4a6e-b7ee-1a17dcd6f9b3",
+    "component": "MOH333"
   }
-  
-  
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/packages/esm-report-app/src/reports-dashboard/report-summary/ReportSummary.tsx b/packages/esm-report-app/src/reports-dashboard/report-summary/ReportSummary.tsx
index 6aa3c5ca..7baad0c1 100644
--- a/packages/esm-report-app/src/reports-dashboard/report-summary/ReportSummary.tsx
+++ b/packages/esm-report-app/src/reports-dashboard/report-summary/ReportSummary.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   DataTable,
   TableContainer,
@@ -10,13 +10,16 @@ import {
   TableCell,
   TableSelectAll,
   TableSelectRow,
-  Button,
-  Pagination,
+  Loading,
 } from '@carbon/react';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import styles from './ReportSummary.css';
+import reportMapping from '../report-loader/reportMapping.json';
+import { generateReportData } from '../../api/api';
 
 const ReportSummary: React.FC<any> = ({ rows }) => {
+  const [loading, setLoading] = useState(false);
+
   const headers = [
     { key: 'status', header: 'Status' },
     { key: 'start_date', header: 'Start Date' },
@@ -27,19 +30,40 @@ const ReportSummary: React.FC<any> = ({ rows }) => {
     { key: 'download', header: 'Download' },
   ];
 
-  // Add view and download buttons to rows data
-  const rowsWithButtons = rows.map((row) => ({
-    ...row,
-    view: (
-      <Link to={`/reports/${row.report_name}`}>
-        <button className={styles.view_button}>View</button>
-      </Link>
-    ),
-    download: <button className={styles.download_button}>Download</button>,
-  }));
+  const navigate = useNavigate();
+
+  const handleViewClick = async (report_uuid, report_id) => {
+    setLoading(true);
+    try {
+      const response = await generateReportData(report_id);
+      const data = response.results;
+
+      navigate(`/reports/${report_uuid}`, { state: { reportData: data } });
+    } catch (error) {
+      console.error('Error fetching report data:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const rowsWithButtons = rows.map((row) => {
+    const reportMappingEntry = reportMapping.find((entry) => entry.report_uuid === row.uuid);
+    return {
+      ...row,
+      view: reportMappingEntry ? (
+        <button
+          className={styles.view_button}
+          onClick={() => handleViewClick(reportMappingEntry.report_uuid, Number(row.log_id))}>
+          View
+        </button>
+      ) : null,
+      download: <button className={styles.download_button}>Download</button>,
+    };
+  });
 
   return (
     <div className={styles.wrapper_container}>
+      {loading && <Loading description="Loading data..." withOverlay={true} />}
       <TableContainer title="Reports logs">
         <DataTable
           rows={rowsWithButtons}
diff --git a/packages/esm-report-app/src/reports-dashboard/report-table/report-table-component.tsx b/packages/esm-report-app/src/reports-dashboard/report-table/report-table-component.tsx
index 7be744ad..3e6ad274 100644
--- a/packages/esm-report-app/src/reports-dashboard/report-table/report-table-component.tsx
+++ b/packages/esm-report-app/src/reports-dashboard/report-table/report-table-component.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import {
   DataTable,
   TableContainer,
@@ -10,7 +10,7 @@ import {
   TableCell,
   TableSelectAll,
   TableSelectRow,
-  Pagination,
+  InlineLoading,
 } from '@carbon/react';
 
 interface ReportTableProps {
@@ -23,14 +23,11 @@ import { useSession } from '@openmrs/esm-framework';
 const ReportTable: React.FC<ReportTableProps> = ({ onRowClick, rows }) => {
   const headers = [{ key: 'report_name', header: 'Name' }];
   const locationUuid = useSession()?.sessionLocation?.uuid;
-
-  function extractNumber(str) {
-    const match = str.match(/^\d+/);
-    return match ? match[0] : null;
-  }
+  const [loading, setLoading] = useState(false);
 
   const handleRowClick = async (row: any) => {
     try {
+      setLoading(true);
       const reportId = Number(row.id);
       const foundItem = rows.find((item) => item.id === row.id);
       const uuid = foundItem ? foundItem.uuid : undefined;
@@ -38,6 +35,8 @@ const ReportTable: React.FC<ReportTableProps> = ({ onRowClick, rows }) => {
       onRowClick(response, row.id, uuid);
     } catch (error) {
       console.error('Error fetching report logs', error);
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -78,8 +77,8 @@ const ReportTable: React.FC<ReportTableProps> = ({ onRowClick, rows }) => {
             </Table>
           )}
         />
-        {/* <Pagination pageSizes={[10, 20, 30, 40, 50]} totalItems={3956} page={1} pageSize={10} onChange={(page) => {}} /> */}
       </TableContainer>
+      {loading && <InlineLoading description="Loading..." />}
     </>
   );
 };