diff --git a/src/Components/Assets/AssetType/ONVIFCamera.tsx b/src/Components/Assets/AssetType/ONVIFCamera.tsx
index 21beb5f7bf8..d5dfff0aac0 100644
--- a/src/Components/Assets/AssetType/ONVIFCamera.tsx
+++ b/src/Components/Assets/AssetType/ONVIFCamera.tsx
@@ -1,20 +1,20 @@
-import { useEffect, useState } from "react";
-import { AssetData, ResolvedMiddleware } from "../AssetTypes";
+import { SyntheticEvent, useEffect, useState } from "react";
+import useAuthUser from "../../../Common/hooks/useAuthUser";
+import { checkIfValidIP } from "../../../Common/validation";
 import * as Notification from "../../../Utils/Notifications.js";
-import { BedModel } from "../../Facility/models";
 import { getCameraConfig } from "../../../Utils/transformUtils";
-import CameraConfigure from "../configure/CameraConfigure";
 import Loading from "../../Common/Loading";
-import { checkIfValidIP } from "../../../Common/validation";
-import TextFormField from "../../Form/FormFields/TextFormField";
 import { Submit } from "../../Common/components/ButtonV2";
-import { SyntheticEvent } from "react";
-import useAuthUser from "../../../Common/hooks/useAuthUser";
+import { BedModel } from "../../Facility/models";
+import TextFormField from "../../Form/FormFields/TextFormField";
+import { AssetData, ResolvedMiddleware } from "../AssetTypes";
+import CameraConfigure from "../configure/CameraConfigure";
 
-import request from "../../../Utils/request/request";
 import routes from "../../../Redux/api";
+import request from "../../../Utils/request/request";
 import useQuery from "../../../Utils/request/useQuery";
 
+import { useTranslation } from "react-i18next";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 
 interface Props {
@@ -25,6 +25,7 @@ interface Props {
 }
 
 const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
+  const { t } = useTranslation();
   const [isLoading, setIsLoading] = useState(true);
   const [assetType, setAssetType] = useState("");
   const [middlewareHostname, setMiddlewareHostname] = useState("");
@@ -40,7 +41,7 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
   const [loadingAddPreset, setLoadingAddPreset] = useState(false);
   const [loadingSetConfiguration, setLoadingSetConfiguration] = useState(false);
   const [refreshPresetsHash, setRefreshPresetsHash] = useState(
-    Number(new Date()),
+    Number(new Date())
   );
   const { data: facility, loading } = useQuery(routes.getPermittedFacility, {
     pathParams: { id: facilityId },
@@ -99,15 +100,13 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
     };
     try {
       setLoadingAddPreset(true);
-
       const response = await fetch(
-        `https://${resolvedMiddleware?.hostname}/status?hostname=${config.hostname}&port=${config.port}&username=${config.username}&password=${config.password}`,
+        `https://${resolvedMiddleware?.hostname}/status?hostname=${config.hostname}&port=${config.port}&username=${config.username}&password=${config.password}`
       );
       if (!response.ok) {
         throw new Error("Network error");
       }
       const presetData = await response.json();
-
       const { res } = await request(routes.createAssetBed, {
         body: {
           meta: { ...data, ...presetData },
@@ -145,7 +144,7 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
               name="middleware_hostname"
               label={
                 <div className="flex flex-row gap-1">
-                  <p>Middleware Hostname</p>
+                  <p>{t("middleware_hostname")}</p>
                   {resolvedMiddleware?.source != "asset" && (
                     <div className="tooltip">
                       <CareIcon
@@ -153,7 +152,7 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
                         className="tooltip text-indigo-500 hover:text-indigo-600"
                       />
                       <span className="tooltip-text w-56 whitespace-normal">
-                        Middleware hostname sourced from asset{" "}
+                        {t("middleware_hostname_sourced_from_asset")}{" "}
                         {resolvedMiddleware?.source}
                       </span>
                     </div>
@@ -166,7 +165,7 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
             />
             <TextFormField
               name="camera_address"
-              label="Local IP Address"
+              label={t("local_ip_address")}
               autoComplete="off"
               value={cameraAddress}
               onChange={({ value }) => setCameraAddress(value)}
@@ -174,14 +173,14 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
             />
             <TextFormField
               name="username"
-              label="Username"
+              label={t("username")}
               autoComplete="off"
               value={username}
               onChange={({ value }) => setUsername(value)}
             />
             <TextFormField
               name="password"
-              label="Password"
+              label={t("password")}
               autoComplete="off"
               type="password"
               value={password}
@@ -189,7 +188,7 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
             />
             <TextFormField
               name="stream_uuid"
-              label="Stream UUID"
+              label={t("stream_uuid")}
               autoComplete="off"
               value={streamUuid}
               type="password"
@@ -202,7 +201,7 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
             <Submit
               disabled={loadingSetConfiguration}
               className="w-full md:w-auto"
-              label="Set Configuration"
+              label={t("set_configuration")}
             />
           </div>
         </form>
diff --git a/src/Components/Facility/Consultations/LiveFeed.tsx b/src/Components/Facility/Consultations/LiveFeed.tsx
index 621a0baf0aa..12394857d09 100644
--- a/src/Components/Facility/Consultations/LiveFeed.tsx
+++ b/src/Components/Facility/Consultations/LiveFeed.tsx
@@ -1,56 +1,53 @@
-import { useEffect, useState, useRef, LegacyRef } from "react";
+import { AxiosError } from "axios";
+import { LegacyRef, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import ReactPlayer from "react-player";
 import { useDispatch } from "react-redux";
 import useKeyboardShortcut from "use-keyboard-shortcut";
-import {
-  listAssetBeds,
-  partialUpdateAssetBed,
-  deleteAssetBed,
-} from "../../../Redux/actions";
+import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { getCameraPTZ } from "../../../Common/constants";
+import { useFeedPTZ } from "../../../Common/hooks/useFeedPTZ";
+import useFullscreen from "../../../Common/hooks/useFullscreen";
 import {
   StreamStatus,
   useMSEMediaPlayer,
 } from "../../../Common/hooks/useMSEplayer";
-import { useFeedPTZ } from "../../../Common/hooks/useFeedPTZ";
+import useWindowDimensions from "../../../Common/hooks/useWindowDimensions";
+import { deleteAssetBed, partialUpdateAssetBed } from "../../../Redux/actions";
+import routes from "../../../Redux/api";
 import * as Notification from "../../../Utils/Notifications.js";
-import { FeedCameraPTZHelpButton } from "./Feed";
-import { AxiosError } from "axios";
+import request from "../../../Utils/request/request";
+import useQuery from "../../../Utils/request/useQuery";
+import { isIOS } from "../../../Utils/utils";
 import { BedSelect } from "../../Common/BedSelect";
-import { BedModel } from "../models";
-import useWindowDimensions from "../../../Common/hooks/useWindowDimensions";
-import CareIcon from "../../../CAREUI/icons/CareIcon";
-import Page from "../../Common/components/Page";
 import ConfirmDialog from "../../Common/ConfirmDialog";
+import Page from "../../Common/components/Page";
 import { FieldLabel } from "../../Form/FormFields/FormField";
-import useFullscreen from "../../../Common/hooks/useFullscreen";
-import ReactPlayer from "react-player";
-import { isIOS } from "../../../Utils/utils";
+import { BedModel, CameraPresetModel } from "../models";
+import { FeedCameraPTZHelpButton } from "./Feed";
 
 const LiveFeed = (props: any) => {
+  const { t } = useTranslation();
   const middlewareHostname = props.middlewareHostname;
   const [presetsPage, setPresetsPage] = useState(0);
   const cameraAsset = props.asset;
   const [presets, setPresets] = useState<any>([]);
-  const [bedPresets, setBedPresets] = useState<any>([]);
   const [showDefaultPresets, setShowDefaultPresets] = useState<boolean>(false);
   const [precision, setPrecision] = useState(1);
   const [streamStatus, setStreamStatus] = useState<StreamStatus>(
-    StreamStatus.Offline,
+    StreamStatus.Offline
   );
   const [videoStartTime, setVideoStartTime] = useState<Date | null>(null);
   const [bed, setBed] = useState<BedModel>({});
-  const [preset, setNewPreset] = useState<string>("");
   const [loading, setLoading] = useState<string | undefined>();
   const dispatch: any = useDispatch();
-  const [page, setPage] = useState({
-    count: 0,
-    limit: 8,
-    offset: 0,
-  });
-  const [toDelete, setToDelete] = useState<any>(null);
-  const [toUpdate, setToUpdate] = useState<any>(null);
+  const [toDelete, setToDelete] = useState<CameraPresetModel>();
+  const [toUpdate, setToUpdate] = useState<CameraPresetModel>();
   const [_isFullscreen, setFullscreen] = useFullscreen();
 
+  const [offset, setOffset] = useState(0);
+  const limit = 8;
+
   const { width } = useWindowDimensions();
   const extremeSmallScreenBreakpoint = 320;
   const isExtremeSmallScreen =
@@ -75,7 +72,7 @@ const LiveFeed = (props: any) => {
   const refreshPresetsHash = props.refreshPresetsHash;
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [currentPreset, setCurrentPreset] = useState<any>();
+  const [currentPreset, setCurrentPreset] = useState<CameraPresetModel>();
   const {
     absoluteMove,
     getCameraStatus,
@@ -114,67 +111,64 @@ const LiveFeed = (props: any) => {
     return timeDifference - video.currentTime;
   };
 
-  const getBedPresets = async (id: any) => {
-    const bedAssets = await dispatch(
-      listAssetBeds({
-        asset: id,
-        limit: page.limit,
-        offset: page.offset,
-      }),
-    );
-    setBedPresets(bedAssets?.data?.results);
-    setPage({
-      ...page,
-      count: bedAssets?.data?.count,
-    });
-  };
+  const { data: bedPresets, refetch: refetchBedPresets } = useQuery(
+    routes.getCameraPresets,
+    {
+      query: {
+        limit: limit,
+        offset: offset,
+      },
+      pathParams: {
+        external_id: cameraAsset?.id,
+      },
+    }
+  );
 
-  const deletePreset = async (id: any) => {
+  const deletePreset = async (id: string) => {
     const res = await dispatch(deleteAssetBed(id));
     if (res?.status === 204) {
       Notification.Success({ msg: "Preset deleted successfully" });
-      getBedPresets(cameraAsset.id);
+      refetchBedPresets();
     } else {
       Notification.Error({
         msg: "Error while deleting Preset: " + (res?.data?.detail || ""),
       });
     }
-    setToDelete(null);
+    setToDelete(undefined);
   };
 
-  const updatePreset = async (currentPreset: any) => {
-    const data = {
-      bed_id: bed.id,
-      preset_name: preset,
-    };
-    const response = await dispatch(
-      partialUpdateAssetBed(
-        {
-          asset: currentPreset.asset_object.id,
-          bed: bed.id,
-          meta: {
-            ...currentPreset.meta,
-            ...data,
-          },
-        },
-        currentPreset?.id,
-      ),
-    );
-    if (response && response.status === 200) {
+  const updatePreset = async (currentPreset: CameraPresetModel) => {
+    const resp = await request(routes.partialUpdateAssetBed, {
+      body: {
+        asset: currentPreset?.asset_bed_object.asset?.id,
+        bed: bed.id,
+      },
+      pathParams: {
+        external_id: currentPreset?.asset_bed_object.id || "",
+      },
+    });
+    if (resp && resp.res?.status === 200) {
       Notification.Success({ msg: "Preset Updated" });
     } else {
       Notification.Error({ msg: "Something Went Wrong" });
     }
-    getBedPresets(cameraAsset?.id);
+    refetchBedPresets();
     fetchCameraPresets();
-    setToUpdate(null);
+    setToUpdate(undefined);
   };
 
-  const gotoBedPreset = (preset: any) => {
+  const gotoBedPreset = (preset: CameraPresetModel) => {
     setLoading("Moving");
-    absoluteMove(preset.meta.position, {
-      onSuccess: () => setLoading(undefined),
-    });
+    absoluteMove(
+      {
+        x: preset?.x || 0.0,
+        y: preset?.y || 0.0,
+        zoom: preset?.zoom || 1,
+      },
+      {
+        onSuccess: () => setLoading(undefined),
+      }
+    );
   };
 
   useEffect(() => {
@@ -187,16 +181,16 @@ const LiveFeed = (props: any) => {
   }, []);
 
   useEffect(() => {
-    setNewPreset(toUpdate?.meta?.preset_name);
-    setBed(toUpdate?.bed_object);
-  }, [toUpdate]);
-
-  useEffect(() => {
-    getBedPresets(cameraAsset.id);
-    if (bedPresets?.[0]?.position) {
-      absoluteMove(bedPresets[0]?.position, {});
+    refetchBedPresets();
+    const position = {
+      x: bedPresets?.results[0]?.x || 0.0,
+      y: bedPresets?.results[0]?.y || 0.0,
+      zoom: bedPresets?.results[0]?.zoom || 1,
+    };
+    if (position) {
+      absoluteMove(position, {});
     }
-  }, [page.offset, cameraAsset.id, refreshPresetsHash]);
+  }, [offset, refreshPresetsHash]);
 
   const startStreamFeed = () => {
     startStream({
@@ -216,7 +210,7 @@ const LiveFeed = (props: any) => {
         }));
   };
   useEffect(() => {
-    let tId: any;
+    let tId: NodeJS.Timeout;
     if (streamStatus !== StreamStatus.Playing) {
       setStreamStatus(StreamStatus.Loading);
       tId = setTimeout(() => {
@@ -229,17 +223,10 @@ const LiveFeed = (props: any) => {
     };
   }, [startStream, streamStatus]);
 
-  const handlePagination = (cOffset: number) => {
-    setPage({
-      ...page,
-      offset: cOffset,
-    });
-  };
-
   const cameraPTZActionCBs: { [key: string]: (option: any) => void } = {
     precision: () => {
       setPrecision((precision: number) =>
-        precision === 16 ? 1 : precision * 2,
+        precision === 16 ? 1 : precision * 2
       );
     },
     reset: () => {
@@ -258,25 +245,21 @@ const LiveFeed = (props: any) => {
       getCameraStatus({
         onSuccess: async (data) => {
           console.log({ currentPreset, data });
-          if (currentPreset?.asset_object?.id && data?.position) {
+          if (currentPreset?.asset_bed_object?.asset?.id && data?.position) {
             setLoading(option.loadingLabel);
             console.log("Updating Preset");
             const response = await dispatch(
               partialUpdateAssetBed(
                 {
-                  asset: currentPreset.asset_object.id,
-                  bed: currentPreset.bed_object.id,
-                  meta: {
-                    ...currentPreset.meta,
-                    position: data?.position,
-                  },
+                  asset: currentPreset.asset_bed_object?.asset?.id,
+                  bed: currentPreset.asset_bed_object?.bed?.id,
                 },
-                currentPreset?.id,
-              ),
+                currentPreset?.asset_bed_object?.id || ""
+              )
             );
             if (response && response.status === 200) {
               Notification.Success({ msg: "Preset Updated" });
-              getBedPresets(cameraAsset?.id);
+              refetchBedPresets();
               fetchCameraPresets();
             }
             setLoading(undefined);
@@ -309,39 +292,40 @@ const LiveFeed = (props: any) => {
   }
 
   return (
-    <Page title="Live Feed" hideBack>
+    <Page title={t("live_feed")} hideBack>
       {toDelete && (
         <ConfirmDialog
           show
-          title="Are you sure you want to delete this preset?"
+          title={t("delete_preset")}
           description={
             <span>
               <p>
-                Preset: <strong>{toDelete.meta.preset_name}</strong>
+                {t("preset")} <strong>{toDelete.preset_name}</strong>
               </p>
               <p>
-                Bed: <strong>{toDelete.bed_object.name}</strong>
+                {t("bed")}:{" "}
+                <strong>{toDelete.asset_bed_object?.bed?.name}</strong>
               </p>
             </span>
           }
           action="Delete"
           variant="danger"
-          onClose={() => setToDelete(null)}
-          onConfirm={() => deletePreset(toDelete.id)}
+          onClose={() => setToDelete(undefined)}
+          onConfirm={() => deletePreset(toDelete?.id || "")}
         />
       )}
       {toUpdate && (
         <ConfirmDialog
           show
-          title="Update Preset"
-          description={"Preset: " + toUpdate.meta.preset_name}
+          title={t("update_preset")}
+          description={"Preset: " + toUpdate.preset_name}
           action="Update"
           variant="primary"
-          onClose={() => setToUpdate(null)}
+          onClose={() => setToUpdate(undefined)}
           onConfirm={() => updatePreset(toUpdate)}
         >
           <div className="mt-4 flex flex-col">
-            <FieldLabel required>Bed</FieldLabel>
+            <FieldLabel required>{t("bed")}</FieldLabel>
             <BedSelect
               name="bed"
               setSelected={(selected) => setBed(selected as BedModel)}
@@ -357,7 +341,6 @@ const LiveFeed = (props: any) => {
       <div className="mt-4 flex flex-col">
         <div className="relative mt-4 flex flex-col gap-4 lg:flex-row">
           <div className="flex-1">
-            {/* ADD VIDEO PLAYER HERE */}
             <div className="relative mb-4 aspect-video w-full rounded bg-primary-100 lg:mb-0">
               {isIOS ? (
                 <div className="absolute inset-0">
@@ -412,7 +395,7 @@ const LiveFeed = (props: any) => {
                 calculateVideoLiveDelay() > 3 && (
                   <div className="absolute left-8 top-12 z-10 flex items-center gap-2 rounded-3xl bg-red-400 px-3 py-1.5 text-xs font-semibold text-gray-100">
                     <CareIcon icon="l-wifi-slash" className="h-4 w-4" />
-                    <span>Slow Network Detected</span>
+                    <span>{t("slow_network_detected")}</span>
                   </div>
                 )}
 
@@ -424,39 +407,43 @@ const LiveFeed = (props: any) => {
                   </div>
                 </div>
               )}
-              {/* { streamStatus > 0 && */}
               <div className="absolute bottom-0 right-0 flex h-full w-full items-center justify-center p-4">
                 {streamStatus === StreamStatus.Offline && (
                   <div className="text-center">
                     <p className="font-bold text-black">
-                      STATUS: <span className="text-red-600">OFFLINE</span>
+                      {t("status")}:{" "}
+                      <span className="text-red-600">{t("offline")}</span>
                     </p>
                     <p className="font-semibold text-black">
-                      Feed is currently not live.
+                      {t("feed_is_currently_not_live")}
                     </p>
                     <p className="font-semibold text-black">
-                      Click refresh button to try again.
+                      {t("click_refresh_button_to_try_again")}
                     </p>
                   </div>
                 )}
                 {streamStatus === StreamStatus.Stop && (
                   <div className="text-center">
                     <p className="font-bold text-black">
-                      STATUS: <span className="text-red-600">STOPPED</span>
+                      {t("status")}:{" "}
+                      <span className="text-red-600">STOPPED</span>
+                    </p>
+                    <p className="font-semibold text-black">
+                      {t("feed_is_stopped")}
                     </p>
-                    <p className="font-semibold text-black">Feed is Stooped.</p>
                     <p className="font-semibold text-black">
-                      Click refresh button to start feed.
+                      {t("click_refresh_button_to_start_feed")}
                     </p>
                   </div>
                 )}
                 {streamStatus === StreamStatus.Loading && (
                   <div className="text-center">
                     <p className="font-bold text-black">
-                      STATUS: <span className="text-red-600"> LOADING</span>
+                      {t("status")}:{" "}
+                      <span className="text-red-600"> {t("loading")}</span>
                     </p>
                     <p className="font-semibold text-black">
-                      Fetching latest feed.
+                      {t("fetching_latest_feed")}
                     </p>
                   </div>
                 )}
@@ -513,7 +500,7 @@ const LiveFeed = (props: any) => {
                   setShowDefaultPresets(true);
                 }}
               >
-                Default Presets
+                {t("default_presets")}
               </button>
               <button
                 className={`flex-1 p-4  text-center font-bold  text-gray-700 hover:text-gray-800  ${
@@ -525,7 +512,7 @@ const LiveFeed = (props: any) => {
                   setShowDefaultPresets(false);
                 }}
               >
-                Patient Presets
+                {t("patient_presets")}
               </button>
             </nav>
             <div className="my-2 w-full space-y-4">
@@ -549,7 +536,7 @@ const LiveFeed = (props: any) => {
                                 setLoading(undefined);
                                 console.log("Preset Updated", option);
                               },
-                            },
+                            }
                           );
                         }}
                       >
@@ -559,44 +546,49 @@ const LiveFeed = (props: any) => {
                   </>
                 ) : (
                   <>
-                    {bedPresets?.map((preset: any, index: number) => (
-                      <div className="flex flex-col">
-                        <button
-                          key={preset.id}
-                          className="flex flex-col truncate rounded-t-md border border-white bg-green-100 p-2  text-black hover:bg-green-500 hover:text-white"
-                          onClick={() => {
-                            setLoading("Moving");
-                            gotoBedPreset(preset);
-                            setCurrentPreset(preset);
-                            getBedPresets(cameraAsset?.id);
-                            fetchCameraPresets();
-                          }}
-                        >
-                          <span className="justify-start text-xs font-semibold">
-                            {preset.bed_object.name}
-                          </span>
-                          <span className="mx-auto">
-                            {preset.meta.preset_name
-                              ? preset.meta.preset_name
-                              : `Unnamed Preset ${index + 1}`}
-                          </span>
-                        </button>
-                        <div className="flex">
-                          <button
-                            onClick={() => setToUpdate(preset)}
-                            className="flex w-1/2 items-center justify-center gap-2 bg-green-200 py-1 text-sm text-green-800 hover:bg-green-800 hover:text-green-200 "
-                          >
-                            <CareIcon icon="l-pen" />
-                          </button>
+                    {bedPresets?.results?.map(
+                      (preset: CameraPresetModel, index: number) => (
+                        <div className="flex flex-col">
                           <button
-                            onClick={() => setToDelete(preset)}
-                            className="flex w-1/2 items-center justify-center gap-2 bg-red-200 py-1 text-sm text-red-800 hover:bg-red-800 hover:text-red-200 "
+                            key={preset.id}
+                            className="flex flex-col truncate rounded-t-md border border-white bg-green-100 p-2  text-black hover:bg-green-500 hover:text-white"
+                            onClick={() => {
+                              setLoading("Moving");
+                              gotoBedPreset(preset);
+                              setCurrentPreset(preset);
+                              refetchBedPresets();
+                              fetchCameraPresets();
+                            }}
                           >
-                            <CareIcon icon="l-trash" />
+                            <span className="justify-start text-xs font-semibold">
+                              {preset.asset_bed_object.bed?.name}
+                            </span>
+                            <span className="mx-auto">
+                              {preset?.preset_name
+                                ? preset.preset_name
+                                : `Unnamed Preset ${index + 1}`}
+                            </span>
                           </button>
+                          <div className="flex">
+                            <button
+                              onClick={() => {
+                                setToUpdate(preset);
+                                setBed(preset.asset_bed_object.bed || {});
+                              }}
+                              className="flex w-1/2 items-center justify-center gap-2 bg-green-200 py-1 text-sm text-green-800 hover:bg-green-800 hover:text-green-200 "
+                            >
+                              <CareIcon icon="l-pen" />
+                            </button>
+                            <button
+                              onClick={() => setToDelete(preset)}
+                              className="flex w-1/2 items-center justify-center gap-2 bg-red-200 py-1 text-sm text-red-800 hover:bg-red-800 hover:text-red-200 "
+                            >
+                              <CareIcon icon="l-trash" />
+                            </button>
+                          </div>
                         </div>
-                      </div>
-                    ))}
+                      )
+                    )}
                   </>
                 )}
               </div>
@@ -626,19 +618,15 @@ const LiveFeed = (props: any) => {
                 <div className="flex flex-row gap-1">
                   <button
                     className="flex-1 p-4  text-center font-bold  text-gray-700 hover:bg-gray-300 hover:text-gray-800"
-                    disabled={page.offset === 0}
-                    onClick={() => {
-                      handlePagination(page.offset - page.limit);
-                    }}
+                    disabled={offset === 0}
+                    onClick={() => setOffset(offset - limit)}
                   >
                     <CareIcon icon="l-arrow-left" className="text-2xl" />
                   </button>
                   <button
                     className="flex-1 p-4  text-center font-bold  text-gray-700 hover:bg-gray-300 hover:text-gray-800"
-                    disabled={page.offset + page.limit >= page.count}
-                    onClick={() => {
-                      handlePagination(page.offset + page.limit);
-                    }}
+                    disabled={offset + limit >= (bedPresets?.count || 0)}
+                    onClick={() => setOffset(offset + limit)}
                   >
                     <CareIcon icon="l-arrow-right" className="text-2xl" />
                   </button>
@@ -648,11 +636,12 @@ const LiveFeed = (props: any) => {
                 <button
                   className="w-full rounded-md border border-white bg-green-100 px-3 py-2 font-semibold text-black hover:bg-green-500 hover:text-white"
                   onClick={() => {
-                    getBedPresets(cameraAsset?.id);
+                    refetchBedPresets();
                     fetchCameraPresets();
                   }}
                 >
-                  <CareIcon icon="l-redo" className="h-4 text-lg" /> Refresh
+                  <CareIcon icon="l-redo" className="h-4 text-lg" />{" "}
+                  {t("refresh")}
                 </button>
               )}
             </div>
diff --git a/src/Components/Facility/models.tsx b/src/Components/Facility/models.tsx
index 594d3bb08a1..769a76a8145 100644
--- a/src/Components/Facility/models.tsx
+++ b/src/Components/Facility/models.tsx
@@ -207,7 +207,7 @@ export interface InventoryItemsModel {
     {
       id: number;
       name: string;
-    },
+    }
   ];
 }
 
@@ -240,6 +240,25 @@ export interface BedModel {
   modified_date?: string;
 }
 
+export interface CameraPresetModel {
+  id?: string;
+  asset_bed_object: {
+    id?: string;
+    asset?: AssetData;
+    bed?: BedModel;
+  };
+  x?: number;
+  y?: number;
+  zoom?: number;
+  preset_name?: string;
+
+  created_date?: string;
+  modified_date?: string;
+
+  created_by?: UserBareMinimum;
+  updated_by?: UserBareMinimum;
+}
+
 export interface CurrentBed {
   id: string;
   consultation: string;
diff --git a/src/Locale/en/Asset.json b/src/Locale/en/Asset.json
index f24549ee0b6..5ba7fe6e868 100644
--- a/src/Locale/en/Asset.json
+++ b/src/Locale/en/Asset.json
@@ -9,7 +9,5 @@
   "back": "Back",
   "close": "Close",
   "update_asset_service_record": "Update Asset Service Record",
-  "eg_details_on_functionality_service_etc": "Eg. Details on functionality, service, etc.",
-  "updating": "Updating",
-  "update": "Update"
-}
+  "eg_details_on_functionality_service_etc": "Eg. Details on functionality, service, etc."
+}
\ No newline at end of file
diff --git a/src/Locale/en/Common.json b/src/Locale/en/Common.json
index 84466c99a72..c425dcdaab4 100644
--- a/src/Locale/en/Common.json
+++ b/src/Locale/en/Common.json
@@ -39,6 +39,7 @@
   "modified": "Modified",
   "updated": "Updated",
   "update": "Update",
+  "updating": "Updating",
   "configure": "Configure",
   "assigned_to": "Assigned to",
   "cancel": "Cancel",
@@ -162,5 +163,6 @@
   "DD/MM/YYYY": "DD/MM/YYYY",
   "clear_all_filters": "Clear All Filters",
   "summary": "Summary",
-  "report": "Report"
+  "report": "Report",
+  "refresh": "Refresh"
 }
\ No newline at end of file
diff --git a/src/Locale/en/Hub.json b/src/Locale/en/Hub.json
index 43454d1e215..024e039d1ed 100644
--- a/src/Locale/en/Hub.json
+++ b/src/Locale/en/Hub.json
@@ -1,14 +1,32 @@
 {
   "monitor": "Monitor",
+  "preset": "Preset",
+  "middleware_hostname": "Middleware Hostname",
+  "middleware_hostname_sourced_from_asset": "Middleware hostname sourced from asset",
+  "local_ip_address": "Local IP Address",
+  "stream_uuid": "Stream UUID",
+  "set_configuration": "Set Configuration",
   "show_default_presets": "Show Default Presets",
   "show_patient_presets": "Show Patient Presets",
+  "default_presets": "Default Presets",
+  "patient_presets": "Patient Presets",
+  "fetching_latest_feed": "Fetching latest feed",
   "moving_camera": "Moving Camera",
+  "click_refresh_button_to_start_feed": "Click refresh button to start feed",
+  "feed_is_stopped": "Feed is stopped",
   "full_screen": "Full Screen",
   "feed_is_currently_not_live": "Feed is currently not live",
+  "click_refresh_to_try_again": "Click refresh to try again",
+  "slow_network_detected": "Slow Network Detected",
+  "update_preset": "Update Preset",
+  "delete_preset": "Are you sure you want to delete this preset?",
+  "live_feed": "Live Feed",
   "zoom_out": "Zoom Out",
   "zoom_in": "Zoom In",
   "right": "Right",
   "left": "Left",
   "down": "Down",
-  "up": "Up"
-}
+  "up": "Up",
+  "stopped": "Stopped",
+  "offline": "Offline"
+}
\ No newline at end of file
diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
index 4dd3480ec8c..fc6e894b094 100644
--- a/src/Redux/api.tsx
+++ b/src/Redux/api.tsx
@@ -41,6 +41,7 @@ import {
 } from "../Components/ExternalResult/models";
 import {
   BedModel,
+  CameraPresetModel,
   CapacityModal,
   ConsultationModel,
   CreateBedBody,
@@ -102,8 +103,8 @@ import { InvestigationSessionType } from "../Components/Facility/Investigations/
 import { Investigation } from "../Components/Facility/Investigations/Reports/types";
 import { HCXPolicyModel } from "../Components/HCX/models";
 import { IComment, IResource } from "../Components/Resource/models";
-import { IShift } from "../Components/Shifting/models";
 import { ScribeModel } from "../Components/Scribe/Scribe";
+import { IShift } from "../Components/Shifting/models";
 
 /**
  * A fake function that returns an empty object casted to type T
@@ -464,6 +465,10 @@ const routes = {
     path: "/api/v1/asset/{external_id}/operate_assets/",
     method: "POST",
   },
+  addCameraPreset: {
+    path: "/api/v1/assetbed/{external_id}/add_camera_preset/",
+    method: "POST",
+  },
 
   // Patient Asset Beds (for CNS and Monitoring Hub)
   listPatientAssetBeds: {
@@ -1265,6 +1270,11 @@ const routes = {
     method: "GET",
     TRes: Type<PaginatedResponse<AvailabilityRecord>>(),
   },
+  getCameraPresets: {
+    path: "/api/v1/asset/{external_id}/get_presets/",
+    method: "GET",
+    TRes: Type<PaginatedResponse<CameraPresetModel>>(),
+  },
 
   // Asset transaction endpoints