diff --git a/src/components/Assets/AssetType/HL7Monitor.tsx b/src/components/Assets/AssetType/HL7Monitor.tsx
index 269deacbf58..57d30d6cc45 100644
--- a/src/components/Assets/AssetType/HL7Monitor.tsx
+++ b/src/components/Assets/AssetType/HL7Monitor.tsx
@@ -1,15 +1,16 @@
 import { SyntheticEvent, useEffect, useState } from "react";
 
-import Card from "@/CAREUI/display/Card";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+
 import {
   AssetClass,
   AssetData,
   ResolvedMiddleware,
 } from "@/components/Assets/AssetTypes";
 import { BedSelect } from "@/components/Common/BedSelect";
-import { Submit } from "@/components/Common/ButtonV2";
 import Loading from "@/components/Common/Loading";
 import { BedModel } from "@/components/Facility/models";
 import { FieldLabel } from "@/components/Form/FormFields/FormField";
@@ -91,7 +92,7 @@ const HL7Monitor = (props: HL7MonitorProps) => {
       <div className="mx-auto flex flex-col gap-4 xl:flex-row-reverse">
         {["DistrictAdmin", "StateAdmin"].includes(authUser.user_type) && (
           <div className="flex w-full shrink-0 flex-col gap-4 xl:max-w-xs">
-            <Card className="flex w-full flex-col">
+            <Card className="flex flex-wrap flex-col p-4 m-1 mt-4 md:m-0 w-[55%] sm:w-3/4 md:w-full">
               <form onSubmit={handleSubmit}>
                 <h2 className="mb-2 text-lg font-bold">Connection</h2>
                 <div className="flex flex-col gap-2">
@@ -127,15 +128,19 @@ const HL7Monitor = (props: HL7MonitorProps) => {
                     required
                     error={ipadrdress_error}
                   />
-                  <Submit className="w-full">
+                  <Button
+                    id="submit"
+                    variant={"primary"}
+                    className="flex gap-2 w-full"
+                  >
                     <CareIcon icon="l-save" />
                     <span>Save Configuration</span>
-                  </Submit>
+                  </Button>
                 </div>
               </form>
             </Card>
             {["HL7MONITOR"].includes(assetType) && (
-              <Card>
+              <Card className="p-4 m-1 md:m-0 w-[55%] sm:w-3/4 md:w-full">
                 <MonitorConfigure asset={asset as AssetData} />
               </Card>
             )}
@@ -150,6 +155,7 @@ const HL7Monitor = (props: HL7MonitorProps) => {
             hideFooter={true}
           />
         )}
+
         {assetType === "VENTILATOR" && (
           <VentilatorPatientVitalsMonitor
             key={socketUrl}
@@ -231,10 +237,14 @@ function MonitorConfigure({ asset }: { asset: AssetData }) {
             className="w-full"
           />
         </div>
-        <Submit className="mt-6 w-full shrink-0">
+        <Button
+          id="submit"
+          variant={"primary"}
+          className="flex gap-2 mt-6 w-full shrink-0"
+        >
           <CareIcon icon="l-bed" className="text-lg" />
           {shouldUpdateLink ? "Update Bed" : "Save Bed"}
-        </Submit>
+        </Button>
       </div>
     </form>
   );
diff --git a/src/components/VitalsMonitor/HL7PatientVitalsMonitor.tsx b/src/components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
index 662d2786a32..797cbb6a666 100644
--- a/src/components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
+++ b/src/components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
@@ -47,7 +47,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
   );
 
   return (
-    <div className="flex flex-col gap-1 rounded bg-[#020617] p-2">
+    <div className="flex flex-col gap-1 rounded bg-[#020617] p-2 w-[55%] m-1 md:w-full md:m-0">
       {props.hideHeader ? null : (
         <VitalsMonitorHeader patientAssetBed={props.patientAssetBed} />
       )}
@@ -150,7 +150,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
             </div>
           </div>
         </VitalsNonWaveformContent>
-        <div>
+        <div className="flex flex-wrap md:flex-nowrap">
           <div
             className={classNames(
               "flex flex-col items-center justify-center gap-1 p-1 text-center font-mono font-medium text-warning-500",
@@ -203,7 +203,7 @@ export const VitalsNonWaveformContent = ({
 }: {
   children: JSX.Element | JSX.Element[];
 }) => (
-  <div className="z-[5] grid grid-cols-2 gap-x-8 gap-y-4 divide-blue-600 border-b border-blue-600 bg-[#020617] tracking-wider text-white md:absolute md:inset-y-0 md:right-0 md:grid-cols-1 md:gap-0 md:divide-y md:border-b-0 md:border-l">
+  <div className="z-[5] grid grid-cols-2 gap-x-8 gap-y-8 sm:gap-y-4 mt-2  divide-blue-600 border-b border-blue-600 bg-[#020617] tracking-wider text-white md:absolute md:inset-y-0 md:right-0 md:grid-cols-1 md:gap-0 md:divide-y md:border-b-0 md:border-l md:mt-0">
     {children}
   </div>
 );
diff --git a/src/components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx b/src/components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
index c75ee5f2510..dbdc6b4bff1 100644
--- a/src/components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
+++ b/src/components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
@@ -25,12 +25,12 @@ export default function VentilatorPatientVitalsMonitor(
   }, [props.socketUrl]);
 
   return (
-    <div className="flex flex-col gap-1 rounded bg-[#020617] p-2">
+    <div className="flex flex-col gap-1 rounded bg-[#020617] p-2 w-[55%] m-1 md:w-full md:m-0">
       {props.hideHeader ? null : (
         <VitalsMonitorHeader patientAssetBed={props.patientAssetBed} />
       )}
       <div className="relative flex flex-col gap-2 divide-x-0 divide-y divide-blue-600 md:flex-row md:justify-between md:divide-x md:divide-y-0">
-        <div>
+        <div className="flex flex-wrap md:flex-nowrap">
           <div
             className={classNames(
               "flex flex-col items-center justify-center gap-1 p-1 text-center font-mono font-medium text-warning-500",