diff --git a/src/Components/Assets/AssetType/ONVIFCamera.tsx b/src/Components/Assets/AssetType/ONVIFCamera.tsx
index 7024ff3c3f1..7eb4c77dd23 100644
--- a/src/Components/Assets/AssetType/ONVIFCamera.tsx
+++ b/src/Components/Assets/AssetType/ONVIFCamera.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import { Card, CardContent } from "@material-ui/core";
 import { AssetData } from "../AssetTypes";
 import { useDispatch } from "react-redux";
 import {
@@ -33,7 +32,9 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
     useState("");
   const [cameraAddress, setCameraAddress] = useState("");
   const [ipadrdress_error, setIpAddress_error] = useState("");
-  const [cameraAccessKey, setCameraAccessKey] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [streamUuid, setStreamUuid] = useState("");
   const [bed, setBed] = useState<BedModel>({});
   const [newPreset, setNewPreset] = useState("");
   const [refreshPresetsHash, setRefreshPresetsHash] = useState(
@@ -54,10 +55,15 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
   }, [dispatch, facilityId]);
 
   useEffect(() => {
-    setAssetType(asset?.asset_class);
-    setMiddlewareHostname(asset?.meta?.middleware_hostname);
-    setCameraAddress(asset?.meta?.local_ip_address);
-    setCameraAccessKey(asset?.meta?.camera_access_key);
+    if (asset) {
+      setAssetType(asset?.asset_class);
+      const cameraConfig = getCameraConfig(asset);
+      setMiddlewareHostname(cameraConfig.middleware_hostname);
+      setCameraAddress(cameraConfig.hostname);
+      setUsername(cameraConfig.username);
+      setPassword(cameraConfig.password);
+      setStreamUuid(cameraConfig.accessKey);
+    }
     setIsLoading(false);
   }, [asset]);
 
@@ -70,7 +76,7 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
           asset_type: "CAMERA",
           middleware_hostname: middlewareHostname, // TODO: remove this infavour of facility.middleware_address
           local_ip_address: cameraAddress,
-          camera_access_key: cameraAccessKey,
+          camera_access_key: `${username}:${password}:${streamUuid}`,
         },
       };
       const res: any = await Promise.resolve(
@@ -128,78 +134,58 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
       });
     }
   };
+
   if (isLoading) return <Loading />;
-  return (
-    <div>
-      <Card>
-        <CardContent>
-          <form onSubmit={handleSubmit}>
-            <CardContent>
-              <div className="mt-2 grid gap-4 grid-cols-1 lg:grid-cols-2 col-span-1">
-                <div>
-                  <label id="middleware-hostname">
-                    Hospital Middleware Hostname
-                  </label>
-                  <TextFormField
-                    name="middleware-hostname"
-                    id="middleware-hostname"
-                    type="text"
-                    autoComplete="off"
-                    value={middlewareHostname}
-                    onChange={(e) => setMiddlewareHostname(e.value)}
-                    className="mt-2"
-                  />
-                </div>
-                <div>
-                  <label id="camera-addess">Local IP Address</label>
-                  <TextFormField
-                    name="camera-access-addess"
-                    id="camera-access-addess"
-                    type="text"
-                    autoComplete="new-addess"
-                    value={cameraAddress}
-                    onChange={(e) => setCameraAddress(e.value)}
-                    className="mt-2"
-                    error={ipadrdress_error}
-                  />
-                </div>
-                <div>
-                  <label id="camera-access-key">
-                    Camera Access Key{" "}
-                    <button className="tooltip">
-                      <span className="tooltip-text tooltip-right">
-                        <span className="text-sm font-semibold">
-                          Camera Access Key format: username:password:uuid
-                        </span>
-                      </span>
-                      <button className="rounded">
-                        <i className="fa-solid fa-circle-question"></i>
-                      </button>
-                    </button>
-                  </label>
-                  <TextFormField
-                    name="camera-access-key"
-                    id="camera-access-key"
-                    type="password"
-                    autoComplete="new-password" // Chrome ignores autocomplete=off for password fields
-                    value={cameraAccessKey}
-                    onChange={(e) => setCameraAccessKey(e.value)}
-                    className="mt-2"
-                  />
-                </div>
-              </div>
 
-              <div className="flex justify-between mt-4">
-                <Submit
-                  className="w-full md:w-auto ml-auto"
-                  onClick={handleSubmit}
-                  label="Set Configuration"
-                />
-              </div>
-            </CardContent>
-          </form>
-        </CardContent>
-      </Card>
+  return (
+    <div className="space-y-6">
+      <form className="bg-white rounded shadow p-8" onSubmit={handleSubmit}>
+        <div className="grid gap-x-4 grid-cols-1 lg:grid-cols-2">
+          <TextFormField
+            name="middleware_hostname"
+            label="Hospital Middleware Hostname"
+            autoComplete="off"
+            value={middlewareHostname}
+            onChange={({ value }) => setMiddlewareHostname(value)}
+          />
+          <TextFormField
+            name="camera_address"
+            label="Local IP Address"
+            autoComplete="off"
+            value={cameraAddress}
+            onChange={({ value }) => setCameraAddress(value)}
+            error={ipadrdress_error}
+          />
+          <TextFormField
+            name="username"
+            label="Username"
+            autoComplete="off"
+            value={username}
+            onChange={({ value }) => setUsername(value)}
+          />
+          <TextFormField
+            name="password"
+            label="Password"
+            autoComplete="off"
+            type="password"
+            value={password}
+            onChange={({ value }) => setPassword(value)}
+          />
+          <TextFormField
+            name="stream_uuid"
+            label="Stream UUID"
+            autoComplete="off"
+            value={streamUuid}
+            type="password"
+            className="tracking-widest"
+            labelClassName="tracking-normal"
+            onChange={({ value }) => setStreamUuid(value)}
+          />
+        </div>
+        <div className="flex justify-end">
+          <Submit className="w-full md:w-auto" label="Set Configuration" />
+        </div>
+      </form>
 
       {assetType === "ONVIF" ? (
         <CameraConfigure
diff --git a/src/Utils/transformUtils.ts b/src/Utils/transformUtils.ts
index b5b0a8a560e..0050a0bcbb6 100644
--- a/src/Utils/transformUtils.ts
+++ b/src/Utils/transformUtils.ts
@@ -1,8 +1,9 @@
 import { AssetData } from "../Components/Assets/AssetTypes";
+
 export const getCameraConfig = (asset: AssetData) => {
-  const { meta }: any = asset;
+  const { meta } = asset;
   return {
-    middleware_hostname: meta.middleware_hostname,
+    middleware_hostname: meta?.middleware_hostname,
     id: asset?.id,
     hostname: meta?.local_ip_address,
     username: meta?.camera_access_key?.split(":")[0],