diff --git a/src/components/Facility/Consultations/ABGPlots.tsx b/src/components/Facility/Consultations/ABGPlots.tsx
index 36f4d934254..20af90436d2 100644
--- a/src/components/Facility/Consultations/ABGPlots.tsx
+++ b/src/components/Facility/Consultations/ABGPlots.tsx
@@ -46,7 +46,7 @@ export const ABGPlots = (props: any) => {
   return (
     <div>
       <div className="grid-row-1 grid gap-4 md:grid-cols-2">
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="PH"
             name="PH"
@@ -56,7 +56,7 @@ export const ABGPlots = (props: any) => {
             high={7.45}
           />
         </div>
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="PCO2 (mm Hg)"
             name="PCO2"
@@ -66,7 +66,7 @@ export const ABGPlots = (props: any) => {
             high={45}
           />
         </div>
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="PO2 (mm Hg)"
             name="PO2"
@@ -76,7 +76,7 @@ export const ABGPlots = (props: any) => {
             high={200}
           />
         </div>
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="HCO3  (mmol/L)"
             name="HCO3"
@@ -86,7 +86,7 @@ export const ABGPlots = (props: any) => {
             high={26}
           />
         </div>
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="Base Excess  (mmol/L)"
             name="Base Excess"
@@ -96,7 +96,7 @@ export const ABGPlots = (props: any) => {
             high={2}
           />
         </div>
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="Lactate  (mmol/L)"
             name="Lactate"
@@ -107,7 +107,7 @@ export const ABGPlots = (props: any) => {
             high={2}
           />
         </div>
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="Sodium  (mmol/L)"
             name="Sodium"
@@ -117,7 +117,7 @@ export const ABGPlots = (props: any) => {
             high={145}
           />
         </div>
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="Potassium  (mmol/L)"
             name="Potassium"
@@ -127,7 +127,7 @@ export const ABGPlots = (props: any) => {
             high={5.5}
           />
         </div>
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="FIO2(Ventilator)(%)"
             name="fio2"
diff --git a/src/components/Facility/Consultations/DialysisPlots.tsx b/src/components/Facility/Consultations/DialysisPlots.tsx
index a99a9d43ffb..16614f72304 100644
--- a/src/components/Facility/Consultations/DialysisPlots.tsx
+++ b/src/components/Facility/Consultations/DialysisPlots.tsx
@@ -46,7 +46,7 @@ export const DialysisPlots = (props: any) => {
   return (
     <div>
       <div className="grid-row-1 grid gap-4 md:grid-cols-2">
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="Dialysis Fluid Balance"
             name="Fluid Balance"
@@ -55,7 +55,7 @@ export const DialysisPlots = (props: any) => {
           />
         </div>
 
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="Dialysis Net Balance"
             name="Net Balance"
diff --git a/src/components/Facility/Consultations/NutritionPlots.tsx b/src/components/Facility/Consultations/NutritionPlots.tsx
index dea0f351a2c..527f62cc70a 100644
--- a/src/components/Facility/Consultations/NutritionPlots.tsx
+++ b/src/components/Facility/Consultations/NutritionPlots.tsx
@@ -182,7 +182,7 @@ export const NutritionPlots = (props: any) => {
         <div
           className={showIO ? "grid-row-1 grid gap-4 md:grid-cols-2" : "hidden"}
         >
-          <div className="rounded-lg border bg-white px-4 pt-4 md:col-span-2">
+          <div className="rounded-lg border bg-white p-4 md:col-span-2">
             <LinePlot
               title="IO Balance"
               name="IO Balance"
@@ -190,7 +190,7 @@ export const NutritionPlots = (props: any) => {
               yData={IOvalues}
             />
           </div>
-          <div className="rounded-lg border bg-white px-4 pt-4">
+          <div className="rounded-lg border bg-white p-4">
             <LinePlot
               title="Total Intake"
               name="Total Intake"
@@ -198,7 +198,7 @@ export const NutritionPlots = (props: any) => {
               yData={yAxisData("total_intake_calculated")}
             />
           </div>
-          <div className="rounded-lg border bg-white px-4 pt-4">
+          <div className="rounded-lg border bg-white p-4">
             <LinePlot
               title="Total Output"
               name="Total Output"
@@ -221,7 +221,7 @@ export const NutritionPlots = (props: any) => {
           )}
         </div>
         <div className={showIntake ? "grid gap-4 md:grid-cols-2" : "hidden"}>
-          <div className="rounded-lg border bg-white px-4 pt-4 md:col-span-2">
+          <div className="rounded-lg border bg-white p-4 md:col-span-2">
             <LinePlot
               title="Total Intake"
               name="Total Intake"
@@ -229,14 +229,14 @@ export const NutritionPlots = (props: any) => {
               yData={yAxisData("total_intake_calculated")}
             />
           </div>
-          <div className="rounded-lg border bg-white px-4 pt-4">
+          <div className="rounded-lg border bg-white p-4">
             <StackedLinePlot
               title="Infusions"
               xData={dates}
               yData={Object.values(infusionsData)}
             />
           </div>
-          <div className="rounded-lg border bg-white px-4 pt-4 text-secondary-900">
+          <div className="rounded-lg border bg-white p-4 text-secondary-900">
             <h3 className="text-lg">Infusions:</h3>
             <div className="h-72 overflow-y-auto pb-2">
               {Object.entries(results).map((obj: any) => {
@@ -257,14 +257,14 @@ export const NutritionPlots = (props: any) => {
               })}
             </div>
           </div>
-          <div className="rounded-lg border bg-white px-4 pt-4">
+          <div className="rounded-lg border bg-white p-4">
             <StackedLinePlot
               title="IV Fluids"
               xData={dates}
               yData={Object.values(IVFluidsData)}
             />
           </div>
-          <div className="rounded-lg border bg-white px-4 pt-4 text-secondary-900">
+          <div className="rounded-lg border bg-white p-4 text-secondary-900">
             <h3 className="text-lg">IV Fluids:</h3>
             <div className="h-72 overflow-y-auto pb-2">
               {Object.entries(results).map((obj: any) => {
@@ -285,14 +285,14 @@ export const NutritionPlots = (props: any) => {
               })}
             </div>
           </div>
-          <div className="rounded-lg border bg-white px-4 pt-4">
+          <div className="rounded-lg border bg-white p-4">
             <StackedLinePlot
               title="Feeds"
               xData={dates}
               yData={Object.values(FeedsData)}
             />
           </div>
-          <div className="rounded-lg border bg-white px-4 pt-4 text-secondary-900">
+          <div className="rounded-lg border bg-white p-4 text-secondary-900">
             <h3 className="text-lg">Feeds:</h3>
             <div className="h-72 overflow-y-auto pb-2">
               {Object.entries(results).map((obj: any) => {
@@ -332,7 +332,7 @@ export const NutritionPlots = (props: any) => {
             showOutput ? "grid-row-1 grid gap-4 md:grid-cols-2" : "hidden"
           }
         >
-          <div className="rounded-lg border bg-white px-4 pt-4 md:col-span-2">
+          <div className="rounded-lg border bg-white p-4 md:col-span-2">
             <LinePlot
               title="Total Output"
               name="Total Output"
@@ -340,14 +340,14 @@ export const NutritionPlots = (props: any) => {
               yData={yAxisData("total_output_calculated")}
             />
           </div>
-          <div className="rounded-lg border bg-white px-4 pt-4">
+          <div className="rounded-lg border bg-white p-4">
             <StackedLinePlot
               title="Output"
               xData={dates}
               yData={Object.values(OutputData)}
             />
           </div>
-          <div className="rounded-lg border bg-white px-4 pt-4 text-secondary-900">
+          <div className="rounded-lg border bg-white p-4 text-secondary-900">
             <h3 className="text-lg">Output:</h3>
             <div className="h-72 overflow-y-auto pb-2">
               {Object.entries(results).map((obj: any) => {
diff --git a/src/components/Facility/Consultations/PrimaryParametersPlot.tsx b/src/components/Facility/Consultations/PrimaryParametersPlot.tsx
index 067e197e374..d845e994b00 100644
--- a/src/components/Facility/Consultations/PrimaryParametersPlot.tsx
+++ b/src/components/Facility/Consultations/PrimaryParametersPlot.tsx
@@ -127,10 +127,10 @@ export const PrimaryParametersPlot = ({
   return (
     <div>
       <div className="grid gap-4 md:grid-cols-2" id="vital-section">
-        <div className="m-2 overflow-x-auto rounded-lg border bg-white px-4 pt-4 shadow md:w-full">
+        <div className="m-2 overflow-x-auto rounded-lg border bg-white p-4 shadow md:w-full">
           <StackedLinePlot title="BP" xData={dates} yData={BPData} />
         </div>
-        <div className="m-2 overflow-x-auto rounded-lg border bg-white px-4 pt-4 shadow md:w-full">
+        <div className="m-2 overflow-x-auto rounded-lg border bg-white p-4 shadow md:w-full">
           <LinePlot
             title="Pulse"
             name="Pulse"
@@ -140,7 +140,7 @@ export const PrimaryParametersPlot = ({
             high={100}
           />
         </div>
-        <div className="m-2 overflow-x-auto rounded-lg border bg-white px-4 pt-4 shadow md:w-full">
+        <div className="m-2 overflow-x-auto rounded-lg border bg-white p-4 shadow md:w-full">
           <LinePlot
             title="Temperature (F)"
             name="Temperature"
@@ -148,7 +148,7 @@ export const PrimaryParametersPlot = ({
             yData={yAxisData("temperature")}
           />
         </div>
-        <div className="m-2 overflow-x-auto rounded-lg border bg-white px-4 pt-4 shadow md:w-full">
+        <div className="m-2 overflow-x-auto rounded-lg border bg-white p-4 shadow md:w-full">
           <LinePlot
             title="Resp"
             name="Resp"
@@ -156,10 +156,10 @@ export const PrimaryParametersPlot = ({
             yData={yAxisData("resp")}
           />
         </div>
-        <div className="m-2 overflow-x-auto rounded-lg border bg-white px-4 pt-4 shadow md:w-full">
+        <div className="m-2 overflow-x-auto rounded-lg border bg-white p-4 shadow md:w-full">
           <StackedLinePlot title="Insulin" xData={dates} yData={InsulinData} />
         </div>
-        <div className="m-2 overflow-x-auto rounded-lg border bg-white px-4 pt-4 shadow md:w-full">
+        <div className="m-2 overflow-x-auto rounded-lg border bg-white p-4 shadow md:w-full">
           <LinePlot
             title="SPO2 (%)"
             name="spo2"
@@ -169,7 +169,7 @@ export const PrimaryParametersPlot = ({
             high={100}
           />
         </div>
-        <div className="m-2 overflow-x-auto rounded-lg border bg-white px-4 pt-4 shadow md:w-full">
+        <div className="m-2 overflow-x-auto rounded-lg border bg-white p-4 shadow md:w-full">
           <LinePlot
             title="Ventilator FIO2 (%)"
             name="fio2"
@@ -179,7 +179,7 @@ export const PrimaryParametersPlot = ({
             high={60}
           />
         </div>
-        <div className="m-2 overflow-x-auto rounded-lg border bg-white px-4 pt-4 shadow md:w-full">
+        <div className="m-2 overflow-x-auto rounded-lg border bg-white p-4 shadow md:w-full">
           <h3 className="text-sm">Rhythm</h3>
           {Object.keys(rhythmValues).length === 0 ? (
             <div className="flex h-64 items-center justify-center">
diff --git a/src/components/Facility/Consultations/VentilatorPlot.tsx b/src/components/Facility/Consultations/VentilatorPlot.tsx
index db672f5de7d..ad14eb24c2f 100644
--- a/src/components/Facility/Consultations/VentilatorPlot.tsx
+++ b/src/components/Facility/Consultations/VentilatorPlot.tsx
@@ -80,7 +80,7 @@ export const VentilatorPlot = (props: any) => {
   return (
     <div>
       <div className="grid-row-1 grid gap-4 md:grid-cols-2">
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="PIP"
             name="PIP"
@@ -90,7 +90,7 @@ export const VentilatorPlot = (props: any) => {
             high={30}
           />
         </div>
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="MAP"
             name="MAP"
@@ -100,7 +100,7 @@ export const VentilatorPlot = (props: any) => {
             high={25}
           />
         </div>
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="Resp Rate"
             name="resp"
@@ -110,7 +110,7 @@ export const VentilatorPlot = (props: any) => {
             high={20}
           />
         </div>
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="Pressure Support"
             name="Pressure Support"
@@ -120,7 +120,7 @@ export const VentilatorPlot = (props: any) => {
             high={15}
           />
         </div>
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="Tidal Volume"
             name="Tidal Volume"
@@ -128,7 +128,7 @@ export const VentilatorPlot = (props: any) => {
             yData={yAxisData("ventilator_tidal_volume")}
           />
         </div>
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="PEEP"
             name="PEEP"
@@ -138,7 +138,7 @@ export const VentilatorPlot = (props: any) => {
             high={10}
           />
         </div>
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="FiO2"
             name="FiO2"
@@ -148,7 +148,7 @@ export const VentilatorPlot = (props: any) => {
             high={60}
           />
         </div>
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="SpO2"
             name="SpO2"
@@ -158,7 +158,7 @@ export const VentilatorPlot = (props: any) => {
             high={100}
           />
         </div>
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="EtCo2"
             name="EtCo2"
@@ -168,7 +168,7 @@ export const VentilatorPlot = (props: any) => {
             high={45}
           />
         </div>
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <BinaryChronologicalChart
             title="Bilateral Air Entry"
             data={bilateral}
@@ -176,7 +176,7 @@ export const VentilatorPlot = (props: any) => {
             falseName="No"
           />
         </div>
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="Oxygen Flow Rate"
             name="Oxygen Flow Rate"
@@ -184,7 +184,7 @@ export const VentilatorPlot = (props: any) => {
             yData={yAxisData("ventilator_oxygen_modality_oxygen_rate")}
           />
         </div>
-        <div className="rounded-lg border bg-white px-4 pt-4 shadow">
+        <div className="rounded-lg border bg-white p-4 shadow">
           <LinePlot
             title="Flow Rate"
             name="Flow Rate"
diff --git a/src/components/Facility/Consultations/components/LinePlot.tsx b/src/components/Facility/Consultations/components/LinePlot.tsx
index a4b4b988c30..2800177b1ef 100644
--- a/src/components/Facility/Consultations/components/LinePlot.tsx
+++ b/src/components/Facility/Consultations/components/LinePlot.tsx
@@ -214,7 +214,7 @@ export const LinePlot = (props: any) => {
       ))}
       <Suspense
         fallback={
-          <div className="mb-4 grid h-16 place-items-center">
+          <div className="grid h-16 place-items-center">
             <CircularProgress />
           </div>
         }
diff --git a/src/components/Facility/Consultations/components/ReactEcharts.tsx b/src/components/Facility/Consultations/components/ReactEcharts.tsx
index 8bec94b1e1e..e7d6c0291d2 100644
--- a/src/components/Facility/Consultations/components/ReactEcharts.tsx
+++ b/src/components/Facility/Consultations/components/ReactEcharts.tsx
@@ -1,4 +1,4 @@
-import { Suspense, memo } from "react";
+import { memo } from "react";
 import { EChartsReactProps } from "echarts-for-react";
 import ReactEchartsCore from "echarts-for-react/lib/core";
 import { BarChart, LineChart } from "echarts/charts";
@@ -38,11 +38,7 @@ function ReactEcharts(props: ReactEchartsProps) {
     ...props,
     echarts: props.echarts || echarts,
   };
-  return (
-    <Suspense fallback={<div>Loading chart...</div>}>
-      <ReactEchartsCore {...enhancedProps} />
-    </Suspense>
-  );
+  return <ReactEchartsCore {...enhancedProps} />;
 }
 
 export default memo(ReactEcharts);
diff --git a/src/components/Facility/Consultations/components/StackedLinePlot.tsx b/src/components/Facility/Consultations/components/StackedLinePlot.tsx
index c0ef4388ec3..c79175b8e53 100644
--- a/src/components/Facility/Consultations/components/StackedLinePlot.tsx
+++ b/src/components/Facility/Consultations/components/StackedLinePlot.tsx
@@ -100,7 +100,7 @@ export const StackedLinePlot = (props: StackedLinePlotProps) => {
   return (
     <Suspense
       fallback={
-        <div className="mb-4 grid h-16 place-items-center">
+        <div className="grid h-16 place-items-center">
           <CircularProgress />
         </div>
       }