diff --git a/src/Components/Patient/SampleDetails.tsx b/src/Components/Patient/SampleDetails.tsx
index dc5995792ab..cc3d04ce30f 100644
--- a/src/Components/Patient/SampleDetails.tsx
+++ b/src/Components/Patient/SampleDetails.tsx
@@ -1,17 +1,18 @@
-import loadable from "@loadable/component";
-import { useCallback, useState } from "react";
-import { useDispatch } from "react-redux";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import { getTestSample } from "../../Redux/actions";
 import { FlowModel, SampleTestModel } from "./models";
-import { FileUpload } from "./FileUpload";
-import { navigate } from "raviger";
 import { GENDER_TYPES, TEST_TYPE_CHOICES } from "../../Common/constants";
-import _ from "lodash";
-import { formatDate } from "../../Utils/utils";
+import { statusType, useAbortableEffect } from "../../Common/utils";
+import { useCallback, useState } from "react";
+
+import ButtonV2 from "../Common/components/ButtonV2";
 import Card from "../../CAREUI/display/Card";
+import { FileUpload } from "./FileUpload";
 import Page from "../Common/components/Page";
-import ButtonV2 from "../Common/components/ButtonV2";
+import _ from "lodash";
+import { formatDate } from "../../Utils/utils";
+import { getTestSample } from "../../Redux/actions";
+import loadable from "@loadable/component";
+import { navigate } from "raviger";
+import { useDispatch } from "react-redux";
 
 const Loading = loadable(() => import("../Common/Loading"));
 
diff --git a/src/Components/Patient/SamplePreview.tsx b/src/Components/Patient/SamplePreview.tsx
index dbcfe8812b8..480e2f1b7da 100644
--- a/src/Components/Patient/SamplePreview.tsx
+++ b/src/Components/Patient/SamplePreview.tsx
@@ -1,94 +1,70 @@
+import { classNames, formatDate } from "../../Utils/utils";
+import { statusType, useAbortableEffect } from "../../Common/utils";
 import { useCallback, useState } from "react";
-import { Box, Button, Paper, Typography } from "@material-ui/core";
-import { makeStyles } from "@material-ui/core/styles";
+
+import ButtonV2 from "../Common/components/ButtonV2";
+import Page from "../Common/components/Page";
+import { SampleReportModel } from "./models";
 import loadable from "@loadable/component";
-import { useDispatch } from "react-redux";
 import { sampleReport } from "../../Redux/actions";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import { SampleReportModel } from "./models";
-import { formatDate } from "../../Utils/utils";
-const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
+import useConfig from "../../Common/hooks/useConfig";
+import { useDispatch } from "react-redux";
 
-const useStyles = makeStyles({
-  root: {
-    width: "100%",
-  },
-  contentDiv: {
-    minHeight: "100vh",
-  },
-  internalUse: {
-    color: "#FC1514 !important",
-  },
-  allLogo: {
-    maxWidth: "400px",
-    height: "50px",
-    objectFit: "contain",
-  },
-  printBtn: {
-    margin: "10px",
-    paddingTop: "10px",
-  },
-  mainHeader: {
-    fontWeight: 600,
-    backgroundColor: "#000000 !important",
-    color: "#FFFFFF !important",
-  },
-  subHeader: {
-    fontWeight: 600,
-    backgroundColor: "#444444 !important",
-    color: "#FFFFFF !important",
-  },
-  borderTop: {
-    borderTop: "1px solid gray",
-  },
-  borderBottom: {
-    borderBottom: "1px solid gray",
-  },
-  borderRight: {
-    borderRight: "1px solid gray",
-  },
-  borderLeft: {
-    borderLeft: "1px solid gray",
-  },
-  cellTitle: {
-    textAlign: "right",
-    fontWeight: 600,
-    paddingRight: "8px",
-    paddingLeft: "4px",
-  },
-  cellText: {
-    textAlign: "left",
-    paddingLeft: "8px",
-    paddingRight: "4px",
-    whiteSpace: "pre-wrap",
-    wordBreak: "break-word",
-  },
-  cellTBPadding: {
-    paddingTop: "8px",
-    paddingBottom: "8px",
-  },
-  marginRight10: {
-    marginRight: "10px",
-  },
-  boldText: {
-    fontWeight: "bold",
-  },
-});
-const coronasafeLogo = "https://cdn.coronasafe.network/coronaSafeLogo.webp";
+const Loading = loadable(() => import("../Common/Loading"));
 
-interface samplePreviewProps {
+interface ISamplePreviewProps {
   id: string;
   sampleId: string;
 }
-export default function SampleReport(props: samplePreviewProps) {
-  const classes = useStyles();
+
+interface ISampleReportSectionProps {
+  title: string;
+  fields: {
+    title: string;
+    value: string | undefined | null;
+  }[];
+}
+
+function SampleReportSection({ title, fields }: ISampleReportSectionProps) {
+  return (
+    <>
+      <div className="flex justify-center font-medium bg-gray-700 text-white py-2 border border-b-0 border-gray-800">
+        <h6 className="text-lg">{title}</h6>
+      </div>
+      <div className="grid grid-cols-2 border-b border-gray-800">
+        {fields.map((field, i) => (
+          <div
+            className={classNames(
+              "flex border-b border-gray-800",
+              i % 2 === 0 && "border-x"
+            )}
+          >
+            <div className="w-[65%] border-r border-gray-800 py-2">
+              <p className="text-right font-semibold pr-2 pl-1 mr-2.5">
+                {field.title}
+              </p>
+            </div>
+            <div className="w-[35%] py-2">
+              <p className="text-left pl-2 pr-1 whitespace-pre-wrap break-words">
+                {field.value}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
+
+export default function SampleReport(props: ISamplePreviewProps) {
   const dispatch: any = useDispatch();
   const { id, sampleId } = props;
   const [isLoading, setIsLoading] = useState(false);
   const [sampleData, setSampleData] = useState<SampleReportModel>({});
-  let report: any = null;
-  let reportData: any = null;
+  const { static_ohc_green_logo } = useConfig();
+
+  let report: JSX.Element = <></>;
+  let reportData: JSX.Element = <></>;
 
   const fetchData = useCallback(
     async (status: statusType) => {
@@ -115,1649 +91,388 @@ export default function SampleReport(props: samplePreviewProps) {
   if (sampleData) {
     reportData = (
       <>
-        <Box
-          display="flex"
-          flexDirection="row"
-          justifyContent="flex-end"
-          displayPrint="none"
-          className={classes.printBtn}
-        >
-          <Button
-            color="primary"
-            variant="contained"
-            size="small"
-            onClick={() => window.print()}
-          >
+        <div className="m-2 pt-2 flex justify-end print:hidden">
+          <ButtonV2 variant="primary" onClick={window.print}>
             Print Report
-          </Button>
-        </Box>
-        <Box display="block overflow-scroll h-screen" id="section-to-print">
-          <Box component="div" display="flex" flexDirection="column">
-            <Box
-              component="div"
-              display="flex"
-              flexDirection="row"
-              justifyContent="space-between"
-              alignItems="center"
-              className={`${classes.borderTop} ${classes.borderRight} ${classes.borderBottom} ${classes.borderLeft}`}
-            >
-              <Box justifySelf="flex-start" style={{ padding: "8px" }}></Box>
-              <Box justifySelf="flex-end">
-                <Box style={{ padding: "8px" }}>
+          </ButtonV2>
+        </div>
+        <div className="block h-screen" id="section-to-print">
+          <div className="flex flex-col">
+            <div className="flex justify-between items-center border border-gray-800">
+              <div className="flex justify-start p-2"></div>
+              <div className="flex justify-end">
+                <div className="p-2">
                   <img
-                    src={coronasafeLogo}
-                    className={classes.allLogo}
-                    alt="Coronasafe"
+                    src={static_ohc_green_logo}
+                    className="max-w-[400px] h-[50px] object-contain"
+                    alt="Open HealthCare Network"
                   />
-                </Box>
-              </Box>
-            </Box>
-            <Box
-              component="div"
-              display="flex"
-              flexDirection="row"
-              justifyContent="flex-start"
-              className={`${classes.borderRight} ${classes.borderLeft} ${classes.borderBottom}`}
-            >
-              <Box
-                className={`${classes.cellTBPadding} text-black`}
-                style={{ padding: "20px", width: "100%" }}
-              >
-                <Typography style={{ fontSize: "18px", fontWeight: "bold" }}>
+                </div>
+              </div>
+            </div>
+            <div className="flex justify-start border border-t-0 border-gray-800">
+              <div className="w-full p-5 py-2 text-black">
+                <p className="font-bold text-lg">
                   ICMR Specimen Referral Data for COVID-19 (SARS-CoV2)
-                </Typography>
-              </Box>
-            </Box>
-            <Box
-              display="flex"
-              flexDirection="row"
-              justifyContent="center"
-              className={`${classes.borderRight} ${classes.borderLeft} ${classes.borderBottom} ${classes.cellTBPadding}`}
-            >
-              <Typography
-                component="h6"
-                variant="h6"
-                className={classes.internalUse}
-                style={{ fontWeight: "bold" }}
-              >
+                </p>
+              </div>
+            </div>
+            <div className="py-2 flex justify-center border border-t-0 border-gray-800">
+              <h6 className="font-semibold text-lg text-danger-500">
                 FOR INTERNAL USE ONLY
-              </Typography>
-            </Box>
-            <Box display="flex" flexDirection="column">
-              <Box
-                display="flex"
-                flexDirection="row"
-                justifyContent="center"
-                className={`${classes.mainHeader} ${classes.borderRight} ${classes.borderLeft} ${classes.borderTop} ${classes.cellTBPadding}`}
-              >
-                <Typography component="h6" variant="h6">
-                  Sample Id : {sampleId}
-                </Typography>
-              </Box>
-              <Box
-                display="flex"
-                flexDirection="row"
-                justifyContent="center"
-                className={`${classes.mainHeader} ${classes.borderRight} ${classes.borderLeft} ${classes.borderTop} ${classes.cellTBPadding}`}
+              </h6>
+            </div>
+            <div className="flex flex-col">
+              <div className="flex justify-center font-medium bg-black text-white py-2 border border-b-0 border-gray-800">
+                <h6 className="text-lg">Sample Id : {sampleId}</h6>
+              </div>
+              <div className="flex justify-center font-medium bg-black text-white py-2 border border-b-0 border-gray-800">
+                <h6 className="text-lg">Patient Id : {id}</h6>
+              </div>
+              <div
+                className="border-4 border-black"
+                style={{ border: "solid 5px black" }}
               >
-                <Typography component="h6" variant="h6">
-                  Patient Id : {id}
-                </Typography>
-              </Box>
-              <div style={{ border: "solid 5px black" }}>
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  justifyContent="center"
-                  className={`${classes.subHeader} ${classes.borderRight} ${classes.borderLeft} ${classes.borderBottom} ${classes.cellTBPadding}`}
-                >
-                  <Typography component="h6" variant="h6">
-                    SECTION A - MANDATORY FIELDS
-                  </Typography>
-                </Box>
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  justifyContent="center"
-                  className={`${classes.subHeader} ${classes.borderRight} ${classes.borderLeft} ${classes.borderBottom} ${classes.cellTBPadding}`}
-                >
-                  <Typography component="h6" variant="h6">
-                    A.1 PERSON DETAILS
-                  </Typography>
-                </Box>
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Patient Name
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.personal_details &&
-                          sampleData.personal_details.name}
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Age
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.personal_details &&
-                          sampleData.personal_details.age_years}{" "}
-                        years{""}{" "}
-                        {sampleData &&
-                          sampleData.personal_details &&
-                          sampleData.personal_details.age_months}{" "}
-                        Months
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Present Patient Village or Town
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.personal_details &&
-                          sampleData.personal_details.local_body_name}
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Gender
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.personal_details &&
-                          sampleData.personal_details.gender}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Mobile Number (Self)
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.personal_details &&
-                          sampleData.personal_details.phone_number}
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        District of Present Residence
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.personal_details &&
-                          sampleData.personal_details.district_name}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Nationality
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        Indian
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        State Of Present Residence
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.personal_details &&
-                          sampleData.personal_details.state_name}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  justifyContent="center"
-                  className={`${classes.subHeader}
-                 ${classes.borderRight} ${classes.borderLeft} ${classes.borderBottom} ${classes.cellTBPadding}`}
-                >
-                  <Typography component="h6" variant="h6">
-                    A.2 SPECIMEN INFORMATION FROM REFERRING AGENCY
-                  </Typography>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Collection Date
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.specimen_details &&
-                          sampleData.specimen_details.created_date &&
-                          formatDate(sampleData.specimen_details.created_date)}
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Label
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.specimen_details &&
-                          sampleData.specimen_details.icmr_label}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Sample Repeated
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                        sampleData.specimen_details &&
-                        sampleData.specimen_details.is_repeated_sample !== null
-                          ? sampleData.specimen_details.is_repeated_sample
+                <div className="flex justify-center font-medium bg-gray-900 text-white py-2 border border-b-0 border-gray-800">
+                  <h6 className="text-lg">SECTION A - MANDATORY FIELDS</h6>
+                </div>
+                <SampleReportSection
+                  title="A.1 PERSON DETAILS"
+                  fields={[
+                    {
+                      title: "Patient Name",
+                      value: sampleData?.personal_details?.name,
+                    },
+                    {
+                      title: "Age",
+                      value: `${sampleData?.personal_details?.age_years} years ${sampleData?.personal_details?.age_months} Months`,
+                    },
+                    {
+                      title: "Present Patient Village or Town",
+                      value: sampleData?.personal_details?.local_body_name,
+                    },
+                    {
+                      title: "Gender",
+                      value: sampleData?.personal_details?.gender,
+                    },
+                    {
+                      title: "Mobile Number (Self)",
+                      value: sampleData?.personal_details?.phone_number,
+                    },
+                    {
+                      title: "District of Present Residence",
+                      value: sampleData?.personal_details?.district_name,
+                    },
+                    {
+                      title: "State Of Present Residence",
+                      value: sampleData?.personal_details?.state_name,
+                    },
+                    { title: "Nationality", value: "Indian" },
+                  ]}
+                />
+
+                <SampleReportSection
+                  title="A.2 SPECIMEN INFORMATION FROM REFERRING AGENCY"
+                  fields={[
+                    {
+                      title: "Collection Date",
+                      value: sampleData?.specimen_details?.created_date
+                        ? formatDate(sampleData?.specimen_details?.created_date)
+                        : "NA",
+                    },
+                    {
+                      title: "Label",
+                      value: sampleData?.specimen_details?.icmr_label,
+                    },
+                    {
+                      title: "Sample Repeated",
+                      value:
+                        sampleData?.specimen_details?.is_repeated_sample !==
+                        null
+                          ? sampleData?.specimen_details?.is_repeated_sample
                             ? "Yes"
                             : "No"
-                          : ""}
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Sample Collection Facility Name
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.medical_conditions &&
-                          sampleData.medical_conditions.hospital_name}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Collection Facility Pin code
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.medical_conditions &&
-                          sampleData.medical_conditions.hospital_pincode}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  justifyContent="center"
-                  className={`${classes.subHeader}
-                 ${classes.borderRight} ${classes.borderLeft} ${classes.borderBottom} ${classes.cellTBPadding}`}
-                >
-                  <Typography component="h6" variant="h6">
-                    A.3 Patient Category
-                  </Typography>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="100%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    {sampleData &&
-                      sampleData.specimen_details &&
-                      sampleData.specimen_details.icmr_category === "Cat 0" && (
-                        <Box width="35%" className={`${classes.cellTBPadding}`}>
-                          <Typography className={`${classes.cellText}`}>
-                            Cat 0 - Repeat Sample of Positive Case / Follow Up
-                            case
-                          </Typography>
-                        </Box>
-                      )}
-                    {sampleData &&
-                      sampleData.specimen_details &&
-                      sampleData.specimen_details.icmr_category === "Cat 1" && (
-                        <Box width="35%" className={`${classes.cellTBPadding}`}>
-                          <Typography className={`${classes.cellText}`}>
-                            Cat 1 - Symptomatic International Traveller in last
-                            14 days
-                          </Typography>
-                        </Box>
-                      )}
-                    {sampleData &&
-                      sampleData.specimen_details &&
-                      sampleData.specimen_details.icmr_category === "Cat 2" && (
-                        <Box width="35%" className={`${classes.cellTBPadding}`}>
-                          <Typography className={`${classes.cellText}`}>
-                            Cat 2 - Symptomatic contact of lab confirmed Case
-                          </Typography>
-                        </Box>
-                      )}
-                    {sampleData &&
-                      sampleData.specimen_details &&
-                      sampleData.specimen_details.icmr_category === "Cat 3" && (
-                        <Box width="35%" className={`${classes.cellTBPadding}`}>
-                          <Typography className={`${classes.cellText}`}>
-                            Cat 3 - Symptomatic Healthcare Worker
-                          </Typography>
-                        </Box>
-                      )}
-                    {sampleData &&
-                      sampleData.specimen_details &&
-                      sampleData.specimen_details.icmr_category === "Cat 4" && (
-                        <Box width="35%" className={`${classes.cellTBPadding}`}>
-                          <Typography className={`${classes.cellText}`}>
-                            Cat 4 - Hospitalized SARI (Severe Acute Respiratory
-                            illness Patient)
-                          </Typography>
-                        </Box>
-                      )}
-                    {sampleData &&
-                      sampleData.specimen_details &&
-                      sampleData.specimen_details.icmr_category ===
-                        "Cat 5a" && (
-                        <Box width="35%" className={`${classes.cellTBPadding}`}>
-                          <Typography className={`${classes.cellText}`}>
-                            Cat 5a - Asymptomatic Direct and High Risk contact
-                            of confirmed case - family Member
-                          </Typography>
-                        </Box>
-                      )}
-                    {sampleData &&
-                      sampleData.specimen_details &&
-                      sampleData.specimen_details.icmr_category ===
-                        "Cat 5b" && (
-                        <Box width="35%" className={`${classes.cellTBPadding}`}>
-                          <Typography className={`${classes.cellText}`}>
-                            Cat 5b - Asymptomatic Healthcare worker in contact
-                            with confimred case without adequete protection
-                          </Typography>
-                        </Box>
-                      )}
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  justifyContent="center"
-                  className={`${classes.subHeader} ${classes.borderRight} ${classes.borderLeft} ${classes.borderBottom} ${classes.cellTBPadding}`}
-                >
-                  <Typography component="h6" variant="h6">
+                          : "NA",
+                    },
+                    {
+                      title: "Sample Collection Facility Name",
+                      value: sampleData?.medical_conditions?.hospital_name,
+                    },
+                    {
+                      title: "Collection Facility Pin code",
+                      value: sampleData?.medical_conditions?.hospital_pincode,
+                    },
+                  ]}
+                />
+
+                <SampleReportSection
+                  title="A.3 Patient Category"
+                  fields={[
+                    {
+                      title:
+                        sampleData?.specimen_details?.icmr_category || "Cat 0",
+                      value: (() => {
+                        switch (sampleData?.specimen_details?.icmr_category) {
+                          case "Cat 0":
+                            return "Repeat Sample of Positive Case / Follow Up case";
+                          case "Cat 1":
+                            return "Symptomatic International Traveller in last 14 days";
+                          case "Cat 2":
+                            return "Symptomatic contact of lab confirmed Case";
+                          case "Cat 3":
+                            return "Symptomatic Healthcare Worker";
+                          case "Cat 4":
+                            return "Hospitalized SARI (Severe Acute Respiratory illness Patient)";
+                          case "Cat 5a":
+                            return "Asymptomatic Direct and High Risk contact of confirmed case - family Member";
+                          case "Cat 5b":
+                            return "Asymptomatic Healthcare worker in contact with confimred case without adequete protection";
+                        }
+                      })(),
+                    },
+                  ]}
+                />
+
+                <div className="flex justify-center font-medium bg-gray-900 text-white py-2 border border-b-0 border-gray-800">
+                  <h6 className="text-lg">
                     SECTION B - OTHER FIELDS TO BE UPDATED
-                  </Typography>
-                </Box>
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  justifyContent="center"
-                  className={`${classes.subHeader} ${classes.borderRight} ${classes.borderLeft} ${classes.borderBottom} ${classes.cellTBPadding}`}
-                >
-                  <Typography component="h6" variant="h6">
-                    B.1 PERSON DETAILS
-                  </Typography>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Present Patient Address
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.personal_details &&
-                          sampleData.personal_details.address}
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Pin code
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.personal_details &&
-                          sampleData.personal_details.pincode}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Email Id
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.personal_details &&
-                          sampleData.personal_details.email}
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Date Of Birth
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.personal_details &&
-                          sampleData.personal_details.date_of_birth}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Patient Aadhar Number
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        ....................
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Patient Passport Number
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.personal_details &&
-                          sampleData.personal_details.passport_no}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  justifyContent="center"
-                  className={`${classes.subHeader} ${classes.borderRight} ${classes.borderLeft} ${classes.borderBottom} ${classes.cellTBPadding}`}
-                >
-                  <Typography component="h6" variant="h6">
-                    B.2 EXPOSURE HISTORY ( 2 WEEKS BEFORE THE ONSET OF SYMPTOMS
-                    )
-                  </Typography>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Travel to foreign country in last 14 days
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                        sampleData.exposure_history &&
-                        sampleData.exposure_history
-                          .has_travel_to_foreign_last_14_days !== null
-                          ? sampleData.exposure_history
-                              .has_travel_to_foreign_last_14_days
+                  </h6>
+                </div>
+
+                <SampleReportSection
+                  title="B.1 PERSON DETAILS"
+                  fields={[
+                    {
+                      title: "Present Patient Address",
+                      value: sampleData?.personal_details?.address,
+                    },
+                    {
+                      title: "Pin code",
+                      value: sampleData?.personal_details?.pincode,
+                    },
+                    {
+                      title: "Email Id",
+                      value: sampleData?.personal_details?.email,
+                    },
+                    {
+                      title: "Date Of Birth",
+                      value: sampleData?.personal_details?.date_of_birth,
+                    },
+                    { title: "Patient Aadhar Number", value: "............." },
+                    {
+                      title: "Patient Passport Number",
+                      value: sampleData?.personal_details?.passport_no,
+                    },
+                  ]}
+                />
+
+                <SampleReportSection
+                  title="B.2 EXPOSURE HISTORY ( 2 WEEKS BEFORE THE ONSET OF SYMPTOMS )"
+                  fields={[
+                    {
+                      title: "Travel to foreign country in last 14 days",
+                      value:
+                        sampleData?.exposure_history
+                          ?.has_travel_to_foreign_last_14_days !== null
+                          ? sampleData?.exposure_history
+                              ?.has_travel_to_foreign_last_14_days
                             ? "Yes"
                             : "No"
-                          : ""}
-                      </Typography>
-                    </Box>
-                  </Box>
-                  {/* Places of travel only if above is true*/}
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Places of travel
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.exposure_history &&
-                          sampleData.exposure_history.places_of_travel &&
-                          sampleData.exposure_history.places_of_travel.join(
-                            ", "
-                          )}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Travel Start Date
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.exposure_history &&
-                          sampleData.exposure_history.travel_start_date}
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Travel End Date
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.exposure_history &&
-                          sampleData.exposure_history.travel_end_date}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        In Contact with lab confimed Covid 19 Patient
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                        sampleData.exposure_history &&
-                        sampleData.exposure_history
-                          .contact_with_confirmed_case !== null
+                          : "NA",
+                    },
+                    {
+                      title: "Places of travel",
+                      value:
+                        sampleData?.exposure_history?.places_of_travel?.join(
+                          ", "
+                        ),
+                    },
+                    {
+                      title: "Travel Start Date",
+                      value: sampleData?.exposure_history?.travel_start_date,
+                    },
+                    {
+                      title: "Travel End Date",
+                      value: sampleData?.exposure_history?.travel_end_date,
+                    },
+                    {
+                      title: "In Contact with lab confimed Covid 19 Patient",
+                      value:
+                        sampleData?.exposure_history
+                          ?.contact_with_confirmed_case !== null
                           ? sampleData.exposure_history
-                              .contact_with_confirmed_case
+                              ?.contact_with_confirmed_case
                             ? "Yes"
                             : "No"
-                          : ""}
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Name of Confirmed Contacted Covid Patient
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.exposure_history &&
-                          sampleData.exposure_history.contact_case_name}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Quarantine Status
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                        sampleData.exposure_history &&
-                        sampleData.exposure_history.was_quarantined !== null
-                          ? sampleData.exposure_history.was_quarantined
+                          : "NA",
+                    },
+                    {
+                      title: "Name of Confirmed Contacted Covid Patient",
+                      value: sampleData?.exposure_history?.contact_case_name,
+                    },
+                    {
+                      title: "Quarantine Status",
+                      value:
+                        sampleData?.exposure_history?.was_quarantined !== null
+                          ? sampleData?.exposure_history?.was_quarantined
                             ? "Yes"
                             : "No"
-                          : ""}
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Quarantine Location
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.exposure_history &&
-                          sampleData.exposure_history.quarantined_type}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Health care worker working in a hospital involved in
-                        managing patients
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                        sampleData.exposure_history &&
-                        sampleData.exposure_history.healthcare_worker !== null
-                          ? sampleData.exposure_history.healthcare_worker
+                          : "NA",
+                    },
+                    {
+                      title: "Quarantine Location",
+                      value: sampleData?.exposure_history?.quarantined_type,
+                    },
+                    {
+                      title:
+                        "Health care worker working in a hospital involved in managing patients",
+                      value:
+                        sampleData?.exposure_history?.healthcare_worker !== null
+                          ? sampleData?.exposure_history?.healthcare_worker
                             ? "Yes"
                             : "No"
-                          : ""}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  justifyContent="center"
-                  className={`${classes.subHeader} ${classes.borderRight} ${classes.borderLeft} ${classes.borderBottom} ${classes.cellTBPadding}`}
-                >
-                  <Typography component="h6" variant="h6">
-                    B.3 CLINICAL SYMPTOMS AND SIGNS
-                  </Typography>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Date of Onset of Symptoms
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.medical_conditions &&
-                          sampleData.medical_conditions
-                            .date_of_onset_of_symptoms}
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Symptoms
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.medical_conditions &&
-                          sampleData.medical_conditions.symptoms &&
-                          !!sampleData.medical_conditions.symptoms.length &&
-                          sampleData.medical_conditions.symptoms.join(", ")}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        First Symptom
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        -
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Person has Severe Acute Respiratory illness
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                        sampleData.medical_conditions &&
-                        sampleData.medical_conditions.has_sari !== null
-                          ? sampleData.medical_conditions.has_sari
+                          : "NA",
+                    },
+                  ]}
+                />
+
+                <SampleReportSection
+                  title="B.3 CLINICAL SYMPTOMS AND SIGNS"
+                  fields={[
+                    {
+                      title: "Date of Onset of Symptoms",
+                      value:
+                        sampleData?.medical_conditions
+                          ?.date_of_onset_of_symptoms,
+                    },
+                    {
+                      title: "Symptoms",
+                      value:
+                        sampleData?.medical_conditions?.symptoms?.join(", "),
+                    },
+                    { title: "First Symptom", value: "............." },
+                    {
+                      title: "Person has Severe Acute Respiratory illness",
+                      value:
+                        sampleData?.medical_conditions?.has_sari !== null
+                          ? sampleData?.medical_conditions?.has_sari
                             ? "Yes"
                             : "No"
-                          : ""}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Person Has Acute Respiratory Illness
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                        sampleData.medical_conditions &&
-                        sampleData.medical_conditions.has_ari !== null
-                          ? sampleData.medical_conditions.has_ari
+                          : "NA",
+                    },
+                    {
+                      title: "Person Has Acute Respiratory Illness",
+                      value:
+                        sampleData?.medical_conditions?.has_ari !== null
+                          ? sampleData?.medical_conditions?.has_ari
                             ? "Yes"
                             : "No"
-                          : ""}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  justifyContent="center"
-                  className={`${classes.subHeader} ${classes.borderRight} ${classes.borderLeft} ${classes.borderBottom} ${classes.cellTBPadding}`}
-                >
-                  <Typography component="h6" variant="h6">
-                    B.4 UNDERLYING MEDICAL CONDITIONS
-                  </Typography>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  {/* <Box width="50%" display="flex" flexDirection="row"
-                                         className={`${classes.borderRight} ${classes.borderLeft}`}> */}
-                  <Box
-                    width="33.1%"
-                    className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                  >
-                    <Typography
-                      className={`${classes.cellTitle} ${classes.marginRight10}`}
-                    >
-                      Medical Conditions
-                    </Typography>
-                  </Box>
-                  <Box width="69%" className={`${classes.cellTBPadding}`}>
-                    <Typography className={`${classes.cellText}`}>
-                      {sampleData &&
-                        sampleData.medical_conditions &&
-                        sampleData.medical_conditions.medical_conditions_list &&
-                        !!sampleData.medical_conditions.medical_conditions_list
-                          .length &&
-                        sampleData.medical_conditions.medical_conditions_list.join(
+                          : "NA",
+                    },
+                  ]}
+                />
+
+                <SampleReportSection
+                  title="B.4 UNDERLYING MEDICAL CONDITIONS"
+                  fields={[
+                    {
+                      title: "Medical Conditions",
+                      value:
+                        sampleData?.medical_conditions?.medical_conditions_list?.join(
                           ", "
-                        )}
-                    </Typography>
-                  </Box>
-                  {/* </Box> */}
-                  {/*<Box width="50%" display="flex" flexDirection="row" className={`${classes.borderRight}`}>*/}
-                  {/*    <Box width="65%" className={`${classes.borderRight} ${classes.cellTBPadding}`}>*/}
-                  {/*        <Typography className={`${classes.cellTitle} ${classes.marginRight10}`}>*/}
-                  {/*            Immuno Compromised Conditions*/}
-                  {/*        </Typography>*/}
-                  {/*    </Box>*/}
-                  {/*    <Box width="35%" className={`${classes.cellTBPadding}`}>*/}
-                  {/*        <Typography className={`${classes.cellText}`}>*/}
-                  {/*            {sampleData && sampleData.medical_conditions && sampleData.medical_conditions.has_sari}*/}
-                  {/*        </Typography>*/}
-                  {/*    </Box>*/}
-                  {/*</Box>*/}
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  justifyContent="center"
-                  className={`${classes.subHeader} ${classes.borderRight} ${classes.borderLeft} ${classes.borderBottom} ${classes.cellTBPadding}`}
-                >
-                  <Typography component="h6" variant="h6">
-                    B.5 HOSPITALIZATION , TREATMENT AND INVESTIGATION
-                  </Typography>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Hospitalization Date
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.medical_conditions &&
-                          sampleData.medical_conditions.hospitalization_date}
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Diagnosis
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.medical_conditions &&
-                          sampleData.medical_conditions.diagnosis}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Differential diagnosis
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.medical_conditions &&
-                          sampleData.medical_conditions.diff_diagnosis}
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Etiology Identified
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.medical_conditions &&
-                          sampleData.medical_conditions.etiology_identified}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Asypical Presentation
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                        sampleData.medical_conditions &&
-                        sampleData.medical_conditions
-                          .is_atypical_presentation !== null
-                          ? sampleData.medical_conditions
-                              .is_atypical_presentation
+                        ),
+                    },
+                  ]}
+                />
+
+                <SampleReportSection
+                  title="B.5 HOSPITALIZATION , TREATMENT AND INVESTIGATION"
+                  fields={[
+                    {
+                      title: "Hospitalization Date",
+                      value:
+                        sampleData?.medical_conditions?.hospitalization_date,
+                    },
+                    {
+                      title: "Diagnosis",
+                      value: sampleData?.medical_conditions?.diagnosis,
+                    },
+                    {
+                      title: "Differential diagnosis",
+                      value: sampleData?.medical_conditions?.diff_diagnosis,
+                    },
+                    {
+                      title: "Etiology Identified",
+                      value:
+                        sampleData?.medical_conditions?.etiology_identified,
+                    },
+                    {
+                      title: "Asypical Presentation",
+                      value:
+                        sampleData?.medical_conditions
+                          ?.is_atypical_presentation !== null
+                          ? sampleData?.medical_conditions
+                              ?.is_atypical_presentation
                             ? "Yes"
                             : "No"
-                          : ""}
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Unusual or Unexpected Course
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                        sampleData.medical_conditions &&
-                        sampleData.medical_conditions.is_unusual_course !== null
-                          ? sampleData.medical_conditions.is_unusual_course
+                          : "NA",
+                    },
+                    {
+                      title: "Unusual or Unexpected Course",
+                      value:
+                        sampleData?.medical_conditions?.is_unusual_course !==
+                        null
+                          ? sampleData?.medical_conditions?.is_unusual_course
                             ? "Yes"
                             : "No"
-                          : ""}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  {/* <Box width="50%" display="flex" flexDirection="row"
-                                         className={`${classes.borderRight} ${classes.borderLeft}`}> */}
-                  <Box
-                    width="33.1%"
-                    className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                  >
-                    <Typography
-                      className={`${classes.cellTitle} ${classes.marginRight10}`}
-                    >
-                      Outcome
-                    </Typography>
-                  </Box>
-                  <Box width="69%" className={`${classes.cellTBPadding}`}>
-                    <Typography className={`${classes.cellText}`}>
-                      {sampleData &&
-                        sampleData.medical_conditions &&
-                        sampleData.medical_conditions.diagnosis}
-                    </Typography>
-                  </Box>
-                  {/* </Box> */}
-                  {/*<Box width="50%" display="flex" flexDirection="row"*/}
-                  {/*     className={`${classes.borderRight} ${classes.borderLeft}`}>*/}
-                  {/*    <Box width="65%" className={`${classes.borderRight} ${classes.cellTBPadding}`}>*/}
-                  {/*        <Typography className={`${classes.cellTitle} ${classes.marginRight10}`}>*/}
-                  {/*            Outcome Date*/}
-                  {/*        </Typography>*/}
-                  {/*    </Box>*/}
-                  {/*    <Box width="35%" className={`${classes.cellTBPadding}`}>*/}
-                  {/*        <Typography className={`${classes.cellText}`}>*/}
-                  {/*            20-01-2020*/}
-                  {/*        </Typography>*/}
-                  {/*    </Box>*/}
-                  {/*</Box>*/}
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Hospital Name / Address
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.medical_conditions &&
-                          sampleData.medical_conditions.hospital_name}
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Hospital Phone Number
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.medical_conditions &&
-                          sampleData.medical_conditions.hospital_phone_number}
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
-
-                <Box
-                  display="flex"
-                  flexDirection="row"
-                  className={`${classes.borderBottom}`}
-                >
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight} ${classes.borderLeft}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Name of Doctor
-                      </Typography>
-                    </Box>
-                    <Box width="35%" className={`${classes.cellTBPadding}`}>
-                      <Typography className={`${classes.cellText}`}>
-                        {sampleData &&
-                          sampleData.medical_conditions &&
-                          sampleData.medical_conditions.doctor_name}
-                      </Typography>
-                    </Box>
-                  </Box>
-                  <Box
-                    width="50%"
-                    display="flex"
-                    flexDirection="row"
-                    className={`${classes.borderRight}`}
-                  >
-                    <Box
-                      width="65%"
-                      className={`${classes.borderRight} ${classes.cellTBPadding}`}
-                    >
-                      <Typography
-                        className={`${classes.cellTitle} ${classes.marginRight10}`}
-                      >
-                        Signature & Date
-                      </Typography>
-                    </Box>
-                  </Box>
-                </Box>
+                          : "NA",
+                    },
+                    {
+                      title: "Hospital Name / Address",
+                      value: sampleData?.medical_conditions?.hospital_name,
+                    },
+                    {
+                      title: "Hospital Phone Number",
+                      value:
+                        sampleData?.medical_conditions?.hospital_phone_number,
+                    },
+                    {
+                      title: "Name of Doctor",
+                      value: sampleData?.medical_conditions?.doctor_name,
+                    },
+                    {
+                      title: "Signature & Date",
+                      value: "",
+                    },
+                  ]}
+                />
               </div>
-            </Box>
-          </Box>
-        </Box>
+            </div>
+          </div>
+        </div>
       </>
     );
   }
   if (isLoading) {
     report = (
-      <Box
-        display="flex"
-        flexDirection="row"
-        justifyContent="center"
-        displayPrint="none"
-        className={classes.contentDiv}
-      >
+      <div className="flex justify-center print:hidden h-screen">
         <Loading />
-      </Box>
+      </div>
     );
   } else if (sampleData && reportData) {
     report = reportData;
   } else if (!sampleData) {
     report = (
-      <Box
-        display="flex"
-        flexDirection="row"
-        justifyContent="center"
-        displayPrint="none"
-        className={classes.contentDiv}
-      >
-        <Typography component="h5" variant="h5" style={{ alignSelf: "center" }}>
-          No Data Found
-        </Typography>
-      </Box>
+      <div className="flex justify-center print:hidden h-screen">
+        <h5 className="text-lg font-semibold self-center">No Data Found</h5>
+      </div>
     );
   }
   return (
-    <Paper className={classes.root}>
-      <PageTitle title="Sample Report" backUrl={`/sample/${sampleId}`} />
-      {report}
-    </Paper>
+    <div className="w-full">
+      <Page title="Sample Report" backUrl={`/sample/${sampleId}`}>
+        {report}
+      </Page>
+    </div>
   );
 }