diff --git a/src/Components/Common/components/AccordionV2.tsx b/src/Components/Common/components/AccordionV2.tsx
new file mode 100644
index 00000000000..e2b4ca54d93
--- /dev/null
+++ b/src/Components/Common/components/AccordionV2.tsx
@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+
+export default function AccordionV2(props: {
+  children: JSX.Element | JSX.Element[];
+  expandIcon?: JSX.Element;
+  title: JSX.Element | JSX.Element[] | string;
+  className?: string;
+  expanded?: boolean;
+}) {
+  const [toggle, setToggle] = useState(props.expanded as boolean);
+  const contentEl = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div className={props.className}>
+      <div className="flex justify-between">
+        <button
+          type="button"
+          className="w-full grid justify-start"
+          onClick={() => {
+            setToggle((prev) => !prev);
+          }}
+        >
+          <>{props.title}</>
+        </button>
+        <button
+          type="button"
+          className={
+            toggle
+              ? "transition-all rotate-180 duration-300 ease-in-out"
+              : "transition"
+          }
+          onClick={() => {
+            setToggle((prev) => !prev);
+          }}
+        >
+          {props.expandIcon ? (
+            props.expandIcon
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={2}
+              stroke="currentColor"
+              className="w-5 h-5"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M19.5 8.25l-7.5 7.5-7.5-7.5"
+              />
+            </svg>
+          )}
+        </button>
+      </div>
+      <div
+        className="transition-all ease-in-out duration-500 overflow-hidden"
+        ref={contentEl}
+        style={
+          toggle
+            ? {
+                maxHeight: contentEl.current
+                  ? contentEl.current.scrollHeight * 2
+                  : "0px",
+              }
+            : { maxHeight: "0px" }
+        }
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/Components/Common/components/CollapseV2.tsx b/src/Components/Common/components/CollapseV2.tsx
new file mode 100644
index 00000000000..6552868b6ac
--- /dev/null
+++ b/src/Components/Common/components/CollapseV2.tsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from "react";
+
+export default function CollapseV2(props: {
+  children: JSX.Element | JSX.Element[];
+  opened: boolean;
+  className?: string;
+}) {
+  const content = React.useRef<HTMLDivElement>(null);
+  const [innerDivState, setInnerDivState] = useState(false);
+  const [outerDivState, setOuterDivState] = useState(false);
+
+  useEffect(() => {
+    if (props.opened) {
+      setOuterDivState(props.opened);
+      setTimeout(() => {
+        setInnerDivState(props.opened);
+      }, 1);
+    } else {
+      setInnerDivState(props.opened);
+      setTimeout(() => {
+        setOuterDivState(props.opened);
+      }, 300);
+    }
+  }, [props.opened]);
+
+  return (
+    <div
+      className="transition-all ease-in-out duration-300"
+      style={
+        outerDivState
+          ? {
+              display: "block",
+            }
+          : { display: "none" }
+      }
+    >
+      <div
+        className={`transition-all ease-in-out duration-300 overflow-hidden ${
+          props.className ? props.className : ""
+        }`}
+        ref={content}
+        style={
+          innerDivState
+            ? {
+                maxHeight: content.current?.scrollHeight,
+              }
+            : { maxHeight: "0px" }
+        }
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/Components/Common/components/ResponsiveMedicineTables.tsx b/src/Components/Common/components/ResponsiveMedicineTables.tsx
index 7500b9f4efa..271563a4d2f 100644
--- a/src/Components/Common/components/ResponsiveMedicineTables.tsx
+++ b/src/Components/Common/components/ResponsiveMedicineTables.tsx
@@ -1,9 +1,5 @@
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-} from "@material-ui/core";
 import { useEffect, useState } from "react";
+import AccordionV2 from "./AccordionV2";
 
 function getWindowSize() {
   const { innerWidth, innerHeight } = window;
@@ -67,31 +63,11 @@ export default function ResponsiveMedicineTable(props: {
       ) : (
         <div className="rounded-md shadow-sm">
           {props.list.map((med: any, index: number) => (
-            <Accordion elevation={0} key={index}>
-              <AccordionSummary
-                className="overflow-hidden"
-                expandIcon={
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    strokeWidth={2}
-                    stroke="currentColor"
-                    className="w-5 h-5"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      d="M19.5 8.25l-7.5 7.5-7.5-7.5"
-                    />
-                  </svg>
-                }
-                aria-controls={`panel${index + 1}a-content`}
-                id={`panel${index + 1}a-header`}
-              >
+            <AccordionV2
+              title={
                 <div className="grid">
                   <div className="flex flex-col">
-                    <h3 className="text-sm font-medium overflow-hidden text-ellipsis w-full">
+                    <h3 className="text-sm font-medium overflow-hidden text-ellipsis w-full text-left">
                       {med[props.objectKeys[0]]}
                     </h3>
                   </div>
@@ -106,35 +82,40 @@ export default function ResponsiveMedicineTable(props: {
                     ))}
                   </div>
                 </div>
-              </AccordionSummary>
-              <AccordionDetails className="border-t border-t-gray-400">
-                <div className="flex flex-col w-full">
-                  <div className="grid grid-cols-2 gap-3 w-full">
-                    {props.objectKeys.map((key, i) => {
-                      if (i !== 0 && i !== props.objectKeys.length - 1)
-                        return (
-                          <div>
-                            <h4 className="font-semibold text-base">
-                              {props.theads[i]}
-                            </h4>{" "}
-                            <p>{med[key]}</p>
-                          </div>
-                        );
+              }
+              className={
+                props.list.length - 1 === index
+                  ? "bg-white p-5 "
+                  : "bg-white p-5 border-b border-b-gray-400"
+              }
+              key={index}
+            >
+              <div className="flex flex-col w-full border-t border-t-gray-400 mt-3">
+                <div className="grid grid-cols-2 gap-3 w-full mt-3">
+                  {props.objectKeys.map((key, i) => {
+                    if (i !== 0 && i !== props.objectKeys.length - 1)
+                      return (
+                        <div>
+                          <h4 className="font-semibold text-base">
+                            {props.theads[i]}
+                          </h4>{" "}
+                          <p>{med[key]}</p>
+                        </div>
+                      );
 
-                      if (i === props.objectKeys.length - 1)
-                        return (
-                          <div className="col-span-2">
-                            <h4 className="font-semibold text-base">
-                              {props.theads[i]}
-                            </h4>{" "}
-                            <p>{med[key]}</p>
-                          </div>
-                        );
-                    })}
-                  </div>
+                    if (i === props.objectKeys.length - 1)
+                      return (
+                        <div className="col-span-2">
+                          <h4 className="font-semibold text-base">
+                            {props.theads[i]}
+                          </h4>{" "}
+                          <p>{med[key]}</p>
+                        </div>
+                      );
+                  })}
                 </div>
-              </AccordionDetails>
-            </Accordion>
+              </div>
+            </AccordionV2>
           ))}
         </div>
       )}
diff --git a/src/Components/Common/components/SelectMenu.tsx b/src/Components/Common/components/SelectMenu.tsx
index 3a2f1fa3fea..8869916cf99 100644
--- a/src/Components/Common/components/SelectMenu.tsx
+++ b/src/Components/Common/components/SelectMenu.tsx
@@ -12,6 +12,7 @@ type Props<T> = {
   selected?: T;
   label?: string;
   position?: string;
+  parentRelative?: boolean;
 };
 
 export default function SelectMenu<T>(props: Props<T>) {
@@ -34,7 +35,13 @@ export default function SelectMenu<T>(props: Props<T>) {
       {({ open }) => (
         <>
           <Listbox.Label className="sr-only">{props.label}</Listbox.Label>
-          <div className="relative">
+          <div
+            className={
+              props.parentRelative || props.parentRelative === undefined
+                ? "relative"
+                : ""
+            }
+          >
             <Listbox.Button className="w-full flex shadow-sm rounded bg-gray-50 hover:bg-gray-200 focus:ring-primary-500 border focus:ring-1 ring-gray-400 focus:border-primary-500 border-gray-400 transition-all duration-200 ease-in-out">
               <div className="relative z-0 flex w-full">
                 <div className="relative flex-1 flex items-center py-2 pl-3 pr-4 border border-transparent rounded-l focus:outline-none focus:z-10">
diff --git a/src/Components/Facility/HospitalList.tsx b/src/Components/Facility/HospitalList.tsx
index bea9146376c..97463b51d8f 100644
--- a/src/Components/Facility/HospitalList.tsx
+++ b/src/Components/Facility/HospitalList.tsx
@@ -22,6 +22,7 @@ import {
   sendNotificationMessages,
 } from "../../Redux/actions";
 import loadable from "@loadable/component";
+
 import { InputLabel, TextField } from "@material-ui/core";
 import Pagination from "../Common/Pagination";
 import { FacilityModel } from "./models";
@@ -29,11 +30,7 @@ import { InputSearchBox } from "../Common/SearchBox";
 import { CSVLink } from "react-csv";
 import moment from "moment";
 import { Theme, createStyles, makeStyles } from "@material-ui/core/styles";
-import Accordion from "@material-ui/core/Accordion";
 import CircularProgress from "@material-ui/core/CircularProgress";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import Typography from "@material-ui/core/Typography";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import GetAppIcon from "@material-ui/icons/GetApp";
 import { make as SlideOver } from "../Common/SlideOver.gen";
@@ -42,6 +39,7 @@ import { useTranslation } from "react-i18next";
 import * as Notification from "../../Utils/Notifications.js";
 import { Modal } from "@material-ui/core";
 import SelectMenu from "../Common/components/SelectMenu";
+import AccordionV2 from "../Common/components/AccordionV2";
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
 
@@ -558,80 +556,74 @@ export const HospitalList = (props: any) => {
 
         <div className="flex md:justify-end w-full md:mt-4">
           <div className="w-full md:w-auto">
-            <Accordion className="lg:mt-0 md:mt-0 sm:mt-0">
-              <AccordionSummary
-                expandIcon={<ExpandMoreIcon />}
-                aria-controls="panel1a-content"
-                id="panel1a-header"
-              >
-                <Typography className={classes.heading}>
-                  {t("downloads")}
-                </Typography>
-              </AccordionSummary>
-              <AccordionDetails>
-                <div>
-                  <InputLabel className="text-sm">
-                    {t("download_type")}
-                  </InputLabel>
-                  <div className="flex flex-row gap-6">
-                    <SelectMenu
-                      options={[
-                        ...downloadTypes.map((download) => ({
-                          title: download,
-                          value: download,
-                        })),
-                      ]}
-                      selected={downloadSelect}
-                      onSelect={setdownloadSelect}
-                      position="right"
-                    />
-                    {downloadLoading ? (
-                      <div className="px-2 ml-2 my-2 pt-1 rounded">
-                        <CircularProgress className="text-primary-600 w-6 h-6" />
-                      </div>
-                    ) : (
-                      <button
-                        className="bg-primary-600 hover:shadow-md px-2 rounded-full"
-                        onClick={handleDownloader}
-                        disabled={downloadLoading}
-                      >
-                        <GetAppIcon style={{ color: "white" }} />
-                      </button>
-                    )}
-                  </div>
-                </div>
-                <div className="hidden">
-                  <CSVLink
-                    data={DownloadFile}
-                    filename={`facilities-${now}.csv`}
-                    target="_blank"
-                    className="hidden"
-                    id="facilityDownloader"
-                  ></CSVLink>
-                  <CSVLink
-                    data={capacityDownloadFile}
-                    filename={`facility-capacity-${now}.csv`}
-                    className="hidden"
-                    id="capacityDownloader"
-                    target="_blank"
-                  ></CSVLink>
-                  <CSVLink
-                    data={doctorsDownloadFile}
-                    filename={`facility-doctors-${now}.csv`}
-                    target="_blank"
-                    className="hidden"
-                    id="doctorsDownloader"
-                  ></CSVLink>
-                  <CSVLink
-                    data={triageDownloadFile}
-                    filename={`facility-triage-${now}.csv`}
-                    target="_blank"
-                    className="hidden"
-                    id="triageDownloader"
-                  ></CSVLink>
+            <AccordionV2
+              title={<p className="font-medium text-lg">Downloads</p>}
+              className="lg:mt-0 md:mt-0 sm:mt-0 bg-white shadow-md rounded-lg p-3 relative"
+              expandIcon={<ExpandMoreIcon />}
+            >
+              <div className="mt-3">
+                <InputLabel className="text-sm mb-2">
+                  {t("download_type")}
+                </InputLabel>
+                <div className="flex flex-row gap-6">
+                  <SelectMenu
+                    options={[
+                      ...downloadTypes.map((download) => ({
+                        title: download,
+                        value: download,
+                      })),
+                    ]}
+                    selected={downloadSelect}
+                    onSelect={setdownloadSelect}
+                    position="left"
+                    parentRelative={false}
+                  />
+                  {downloadLoading ? (
+                    <div className="px-2 ml-2 my-2 pt-1 rounded">
+                      <CircularProgress className="text-primary-600 w-6 h-6" />
+                    </div>
+                  ) : (
+                    <button
+                      className="bg-primary-600 hover:shadow-md px-2 rounded-full"
+                      onClick={handleDownloader}
+                      disabled={downloadLoading}
+                    >
+                      <GetAppIcon style={{ color: "white" }} />
+                    </button>
+                  )}
                 </div>
-              </AccordionDetails>
-            </Accordion>
+              </div>
+              <div className="hidden">
+                <CSVLink
+                  data={DownloadFile}
+                  filename={`facilities-${now}.csv`}
+                  target="_blank"
+                  className="hidden"
+                  id="facilityDownloader"
+                ></CSVLink>
+                <CSVLink
+                  data={capacityDownloadFile}
+                  filename={`facility-capacity-${now}.csv`}
+                  className="hidden"
+                  id="capacityDownloader"
+                  target="_blank"
+                ></CSVLink>
+                <CSVLink
+                  data={doctorsDownloadFile}
+                  filename={`facility-doctors-${now}.csv`}
+                  target="_blank"
+                  className="hidden"
+                  id="doctorsDownloader"
+                ></CSVLink>
+                <CSVLink
+                  data={triageDownloadFile}
+                  filename={`facility-triage-${now}.csv`}
+                  target="_blank"
+                  className="hidden"
+                  id="triageDownloader"
+                ></CSVLink>
+              </div>
+            </AccordionV2>
           </div>
         </div>
       </div>
@@ -704,6 +696,7 @@ export const HospitalList = (props: any) => {
           </div>
         </div>
       </div>
+
       <div>
         <SlideOver show={showFilters} setShow={setShowFilters}>
           <div className="bg-white min-h-screen p-4">
diff --git a/src/Components/Patient/PatientRegister.tsx b/src/Components/Patient/PatientRegister.tsx
index b15dbabeff5..fc47eef9fc5 100644
--- a/src/Components/Patient/PatientRegister.tsx
+++ b/src/Components/Patient/PatientRegister.tsx
@@ -1,12 +1,8 @@
 import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
   Box,
   Card,
   CardContent,
   CircularProgress,
-  Collapse,
   FormControlLabel,
   InputLabel,
   Radio,
@@ -63,7 +59,10 @@ import { goBack } from "../../Utils/utils";
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
 
+import AccordionV2 from "../Common/components/AccordionV2";
+import CollapseV2 from "../Common/components/CollapseV2";
 import { debounce } from "lodash";
+// const debounce = require("lodash.debounce");
 
 interface PatientRegisterProps extends PatientModel {
   facilityId: number;
@@ -1140,11 +1139,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                           />
                         </div>
 
-                        <Collapse
-                          in={String(state.form.gender) === "2"}
-                          timeout="auto"
-                          unmountOnExit
-                        >
+                        <CollapseV2 opened={String(state.form.gender) === "2"}>
                           {
                             <div id="is_antenatal-div" className="col-span-2">
                               <InputLabel
@@ -1176,7 +1171,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                               </RadioGroup>
                             </div>
                           }
-                        </Collapse>
+                        </CollapseV2>
                         <div data-testid="current-address" id="address-div">
                           <InputLabel
                             id="address-label"
@@ -1429,18 +1424,17 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                     </CardContent>
                   </Card>
                   <Card elevation={0} className="mb-8 rounded">
-                    <Accordion className="mt-2 lg:mt-0 md:mt-0">
-                      <AccordionSummary
-                        expandIcon={<ExpandMoreIcon />}
-                        aria-controls="panel1a-content"
-                        id="panel1a-header"
-                      >
-                        <h1 className="font-bold text-purple-500 text-left text-xl mb-4">
+                    <AccordionV2
+                      className="mt-2 lg:mt-0 md:mt-0 bg-white shadow-sm rounded-lg p-3 relative"
+                      expandIcon={<ExpandMoreIcon />}
+                      title={
+                        <h1 className="font-bold text-purple-500 text-left text-xl">
                           Health Details
                         </h1>
-                      </AccordionSummary>
-                      <AccordionDetails>
-                        <div className="grid gap-4 xl:gap-x-20 xl:gap-y-6 grid-cols-1 md:grid-cols-2 w-full">
+                      }
+                    >
+                      <div>
+                        <div className="grid gap-4 xl:gap-x-20 xl:gap-y-6 grid-cols-1 md:grid-cols-2 w-full mt-5">
                           <div id="test_type-div">
                             <InputLabel
                               id="test_type-label"
@@ -1504,13 +1498,11 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                 />
                               </Box>
                             </RadioGroup>
-                            <Collapse
-                              in={
+                            <CollapseV2
+                              opened={
                                 String(state.form.is_declared_positive) ===
                                 "true"
                               }
-                              timeout="auto"
-                              unmountOnExit
                               className="mt-4"
                             >
                               <div id="date_declared_positive-div">
@@ -1532,7 +1524,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                   disableFuture={true}
                                 />
                               </div>
-                            </Collapse>
+                            </CollapseV2>
                           </div>
 
                           <div id="is_vaccinated-div">
@@ -1564,10 +1556,8 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                               </Box>
                             </RadioGroup>
                           </div>
-                          <Collapse
-                            in={String(state.form.is_vaccinated) === "true"}
-                            timeout="auto"
-                            unmountOnExit
+                          <CollapseV2
+                            opened={String(state.form.is_vaccinated) === "true"}
                           >
                             {
                               <div className="grid gap-4 xl:gap-x-20 xl:gap-y-6 grid-cols-1 md:grid-cols-2">
@@ -1604,7 +1594,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                     onChange={handleChange}
                                     style={{ padding: "0px 5px" }}
                                   >
-                                    <Box display="flex" flexDirection="row">
+                                    <div className="flex flex-wrap">
                                       <FormControlLabel
                                         value="1"
                                         control={<Radio />}
@@ -1620,7 +1610,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                         control={<Radio />}
                                         label="3 (Booster/Precautionary Dose)"
                                       />
-                                    </Box>
+                                    </div>
                                   </RadioGroup>
                                 </div>
                                 <div id="vaccine_name-div">
@@ -1670,7 +1660,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                 </div>
                               </div>
                             }
-                          </Collapse>
+                          </CollapseV2>
                           <div id="contact_with_confirmed_carrier-div">
                             <InputLabel htmlFor="contact_with_confirmed_carrier">
                               Contact with confirmed Covid patient?
@@ -1724,8 +1714,8 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                               </Box>
                             </RadioGroup>
                           </div>
-                          <Collapse
-                            in={
+                          <CollapseV2
+                            opened={
                               JSON.parse(
                                 state.form.contact_with_confirmed_carrier
                               ) ||
@@ -1733,8 +1723,6 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                 state.form.contact_with_suspected_carrier
                               )
                             }
-                            timeout="auto"
-                            unmountOnExit
                           >
                             <div className="grid gap-4 xl:gap-x-20 xl:gap-y-6 grid-cols-1 md:grid-cols-2">
                               <div id="estimated_contact_date-div">
@@ -1783,7 +1771,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                 />
                               </div>
                             </div>
-                          </Collapse>
+                          </CollapseV2>
                           <div
                             data-testid="disease-status"
                             id="disease_status-div"
@@ -1929,8 +1917,8 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                             />
                           </div>
                         </div>
-                      </AccordionDetails>
-                    </Accordion>
+                      </div>
+                    </AccordionV2>
                   </Card>
                   <Card elevation={0} className="mb-8 rounded">
                     <CardContent>