diff --git a/src/CAREUI/misc/Fullscreen.tsx b/src/CAREUI/misc/Fullscreen.tsx
index 3bb7488ebf9..5cfa7865128 100644
--- a/src/CAREUI/misc/Fullscreen.tsx
+++ b/src/CAREUI/misc/Fullscreen.tsx
@@ -1,26 +1,28 @@
 import { useEffect, useRef } from "react";
 
 interface Props {
+  className?: string;
+  fullscreenClassName?: string;
   children: React.ReactNode;
   fullscreen: boolean;
   onExit: () => void;
 }
 
-export default function Fullscreen({ children, fullscreen, onExit }: Props) {
+export default function Fullscreen(props: Props) {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (fullscreen) {
+    if (props.fullscreen) {
       ref.current?.requestFullscreen();
     } else {
       document.exitFullscreen();
     }
-  }, [fullscreen]);
+  }, [props.fullscreen]);
 
   useEffect(() => {
     const listener = () => {
       if (!document.fullscreenElement) {
-        onExit();
+        props.onExit();
       }
     };
 
@@ -28,7 +30,14 @@ export default function Fullscreen({ children, fullscreen, onExit }: Props) {
     return () => {
       document.removeEventListener("fullscreenchange", listener);
     };
-  }, [onExit]);
+  }, [props.onExit]);
 
-  return <div ref={ref}>{children}</div>;
+  return (
+    <div
+      ref={ref}
+      className={props.fullscreen ? props.fullscreenClassName : props.className}
+    >
+      {props.children}
+    </div>
+  );
 }
diff --git a/src/Common/hooks/useFeedPTZ.ts b/src/Common/hooks/useFeedPTZ.ts
index 4e7fbf27c86..b064e9180ee 100644
--- a/src/Common/hooks/useFeedPTZ.ts
+++ b/src/Common/hooks/useFeedPTZ.ts
@@ -5,7 +5,6 @@
  * co-related PR. Will be removed in the future.
  */
 
-import { getPTZPayload } from "../../Components/Feed/utils";
 import { operateAsset } from "../../Redux/actions";
 
 export interface IAsset {
@@ -164,6 +163,39 @@ const relativeMove =
         : options?.onError && options.onError(resp));
   };
 
+export const getPTZPayload = (
+  action: PTZ,
+  precision = 1,
+  value?: number
+): PTZPayload => {
+  let x = 0;
+  let y = 0;
+  let zoom = 0;
+  const delta = !value ? 0.1 / Math.max(1, precision) : value;
+  switch (action) {
+    case PTZ.Up:
+      y = delta;
+      break;
+    case PTZ.Down:
+      y = -delta;
+      break;
+    case PTZ.Left:
+      x = -delta;
+      break;
+    case PTZ.Right:
+      x = delta;
+      break;
+    case PTZ.ZoomIn:
+      zoom = delta;
+      break;
+    case PTZ.ZoomOut:
+      zoom = -delta;
+      break;
+  }
+
+  return { x, y, zoom };
+};
+
 export const useFeedPTZ = ({
   config,
   dispatch,
diff --git a/src/Components/Feed/CameraFeed.tsx b/src/Components/Feed/CameraFeed.tsx
index b46f535e544..ad6df29f5d0 100644
--- a/src/Components/Feed/CameraFeed.tsx
+++ b/src/Components/Feed/CameraFeed.tsx
@@ -2,18 +2,19 @@ import { LegacyRef, useCallback, useEffect, useRef, useState } from "react";
 import { AssetData } from "../Assets/AssetTypes";
 import useOperateCamera, { PTZPayload } from "./useOperateCamera";
 import usePlayer from "./usePlayer";
-import { getPTZPayload, getStreamUrl } from "./utils";
+import { getStreamUrl } from "./utils";
 import ReactPlayer from "react-player";
 import { classNames, isIOS } from "../../Utils/utils";
 import FeedAlert, { FeedAlertState } from "./FeedAlert";
 import FeedNetworkSignal from "./FeedNetworkSignal";
 import NoFeedAvailable from "./NoFeedAvailable";
 import FeedControls from "./FeedControls";
+import Fullscreen from "../../CAREUI/misc/Fullscreen";
 
 interface Props {
   children?: React.ReactNode;
   asset: AssetData;
-  fallbackMiddleware: string;
+  fallbackMiddleware: string; // TODO: remove this in favour of `asset.resolved_middleware.hostname` once https://github.com/coronasafe/care/pull/1741 is merged
   preset?: PTZPayload;
   silent?: boolean;
   className?: string;
@@ -31,11 +32,9 @@ export default function CameraFeed(props: Props) {
   const streamUrl = getStreamUrl(props.asset, props.fallbackMiddleware);
 
   const player = usePlayer(streamUrl, playerRef);
-  const { precision, togglePrecision, operate } = useOperateCamera(
-    props.asset.id,
-    props.silent
-  );
+  const operate = useOperateCamera(props.asset.id, props.silent);
 
+  const [isFullscreen, setFullscreen] = useState(false);
   const [state, setState] = useState<FeedAlertState>();
   useEffect(() => setState(player.status), [player.status, setState]);
 
@@ -82,117 +81,119 @@ export default function CameraFeed(props: Props) {
 
   // Start stream on mount
   useEffect(() => initializeStream(), [initializeStream]);
+
   const resetStream = () => {
     setState("loading");
     initializeStream();
   };
-  // console.log({ assetId: props.asset.id, state, precision });
 
   return (
-    <div
-      className={classNames(
-        "flex flex-col overflow-clip rounded-xl bg-black",
-        props.className
-      )}
-    >
-      <div className="flex items-center justify-between bg-zinc-900 px-4 py-0.5">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-semibold text-white">
-            {props.asset.name}
-          </span>
-          <div className={state === "loading" ? "animate-pulse" : ""}>
-            <FeedNetworkSignal
-              playerRef={playerRef as any}
-              playedOn={player.playedOn}
-              status={player.status}
-              onReset={resetStream}
-            />
+    <Fullscreen fullscreen={isFullscreen} onExit={() => setFullscreen(false)}>
+      <div
+        className={classNames(
+          "flex flex-col overflow-clip rounded-xl bg-black",
+          props.className
+        )}
+      >
+        <div className="flex items-center justify-between bg-zinc-900 px-4 py-0.5">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-semibold text-white">
+              {props.asset.name}
+            </span>
+            <div className={state === "loading" ? "animate-pulse" : ""}>
+              <FeedNetworkSignal
+                playerRef={playerRef as any}
+                playedOn={player.playedOn}
+                status={player.status}
+                onReset={resetStream}
+              />
+            </div>
           </div>
+          {props.children}
         </div>
-        {props.children}
-      </div>
 
-      <div className="group relative aspect-video">
-        {/* Notifications */}
-        <FeedAlert state={state} />
+        <div className="group relative aspect-video">
+          {/* Notifications */}
+          <FeedAlert state={state} />
 
-        {/* No Feed informations */}
-        {state === "host_unreachable" && (
-          <NoFeedAvailable
-            message="Host Unreachable"
-            className="text-warning-500"
-            icon="l-exclamation-triangle"
-            streamUrl={streamUrl}
-            asset={props.asset}
-            onResetClick={resetStream}
-          />
-        )}
-        {player.status === "offline" && (
-          <NoFeedAvailable
-            message="Offline"
-            className="text-gray-500"
-            icon="l-exclamation-triangle"
-            streamUrl={streamUrl}
-            asset={props.asset}
-            onResetClick={resetStream}
-          />
-        )}
+          {/* No Feed informations */}
+          {state === "host_unreachable" && (
+            <NoFeedAvailable
+              message="Host Unreachable"
+              className="text-warning-500"
+              icon="l-exclamation-triangle"
+              streamUrl={streamUrl}
+              asset={props.asset}
+              onResetClick={resetStream}
+            />
+          )}
+          {player.status === "offline" && (
+            <NoFeedAvailable
+              message="Offline"
+              className="text-gray-500"
+              icon="l-exclamation-triangle"
+              streamUrl={streamUrl}
+              asset={props.asset}
+              onResetClick={resetStream}
+            />
+          )}
 
-        {/* Video Player */}
-        {isIOS ? (
-          <ReactPlayer
-            url={streamUrl}
-            ref={playerRef.current as LegacyRef<ReactPlayer>}
-            controls={false}
-            playsinline
-            playing
-            muted
-            width="100%"
-            height="100%"
-            onPlay={player.onPlayCB}
-            // onBuffer={props.onWait}
-            onEnded={() => player.setStatus("stop")}
-            onError={(e, _, hlsInstance) => {
-              if (e === "hlsError") {
-                const recovered = hlsInstance.recoverMediaError();
-                console.info(recovered);
-              }
-            }}
-          />
-        ) : (
-          <video
-            id="mse-video"
-            autoPlay
-            muted
-            playsInline
-            // className="h-full w-full"
-            onPlay={player.onPlayCB}
-            // onWaiting={props.onWait}
-            onEnded={() => player.setStatus("stop")}
-            ref={playerRef as LegacyRef<HTMLVideoElement>}
-          />
-        )}
+          {/* Video Player */}
+          {isIOS ? (
+            <div className="absolute inset-0">
+              <ReactPlayer
+                url={streamUrl}
+                ref={playerRef.current as LegacyRef<ReactPlayer>}
+                controls={false}
+                playsinline
+                playing
+                muted
+                width="100%"
+                height="100%"
+                onPlay={player.onPlayCB}
+                onEnded={() => player.setStatus("stop")}
+                onError={(e, _, hlsInstance) => {
+                  if (e === "hlsError") {
+                    const recovered = hlsInstance.recoverMediaError();
+                    console.info(recovered);
+                  }
+                }}
+              />
+            </div>
+          ) : (
+            <video
+              className="absolute inset-0"
+              id="mse-video"
+              autoPlay
+              muted
+              playsInline
+              onPlay={player.onPlayCB}
+              onEnded={() => player.setStatus("stop")}
+              ref={playerRef as LegacyRef<HTMLVideoElement>}
+            />
+          )}
 
-        {/* Controls */}
-        {!props.constrolsDisabled && player.status === "playing" && (
-          <FeedControls
-            shortcutsDisabled={props.shortcutsDisabled}
-            onMove={async (action) => {
-              setState("moving");
-              const { res } = await operate({
-                type: "relative_move",
-                data: getPTZPayload(action, precision),
-              });
-              setTimeout(() => {
-                setState((state) => (state === "moving" ? undefined : state));
-              }, 4000);
-              if (res?.status === 500) {
-                setState("host_unreachable");
-              }
-            }}
-          />
-        )}
+          {/* Controls */}
+          {!props.constrolsDisabled && player.status === "playing" && (
+            <FeedControls
+              shortcutsDisabled={props.shortcutsDisabled}
+              isFullscreen={isFullscreen}
+              setFullscreen={setFullscreen}
+              onReset={resetStream}
+              onMove={async (data) => {
+                setState("moving");
+                const { res } = await operate({ type: "relative_move", data });
+                setTimeout(() => {
+                  setState((state) => (state === "moving" ? undefined : state));
+                }, 4000);
+                if (res?.status === 500) {
+                  setState("host_unreachable");
+                }
+              }}
+            />
+          )}
+        </div>
       </div>
-    </div>
+    </Fullscreen>
   );
 }
diff --git a/src/Components/Feed/FeedButton.tsx b/src/Components/Feed/FeedButton.tsx
index 2e7c3b591e1..b1ad05f92e2 100644
--- a/src/Components/Feed/FeedButton.tsx
+++ b/src/Components/Feed/FeedButton.tsx
@@ -1,22 +1,21 @@
-import CareIcon from "../../CAREUI/icons/CareIcon";
 import KeyboardShortcut from "../../CAREUI/interactive/KeyboardShortcut";
-import { classNames, isAppleDevice } from "../../Utils/utils";
+import { classNames } from "../../Utils/utils";
 
 interface Props {
   className?: string;
   children?: React.ReactNode;
-  shortcut: string[];
+  readonly shortcut?: string[];
   onTrigger: () => void;
   helpText?: string;
   shortcutsDisabled?: boolean;
   tooltipClassName?: string;
 }
 
-function FeedButton(props: Props) {
+export default function FeedButton(props: Props) {
   const child = (
     <button
       className={classNames(
-        "flex h-10 w-10 items-center justify-center rounded-lg border border-zinc-800/50 bg-zinc-800/50 shadow-none transition hover:bg-zinc-800 hover:shadow active:shadow-2xl",
+        "flex h-10 w-10 items-center justify-center rounded-lg border border-zinc-700/50 bg-zinc-800/40 shadow-none backdrop-blur-md transition hover:bg-zinc-50 hover:text-zinc-800 hover:shadow hover:backdrop-blur-xl active:shadow-2xl",
         props.className
       )}
       type="button"
@@ -26,7 +25,7 @@ function FeedButton(props: Props) {
     </button>
   );
 
-  if (props.shortcutsDisabled) {
+  if (props.shortcutsDisabled || !props.shortcut) {
     return child;
   }
 
@@ -41,126 +40,3 @@ function FeedButton(props: Props) {
     </KeyboardShortcut>
   );
 }
-
-interface TemplateButtonProps {
-  onTrigger: () => void;
-  shortcutsDisabled?: boolean;
-  className?: string;
-}
-
-const Fullscreen = (props: TemplateButtonProps) => {
-  return (
-    <FeedButton shortcut={["F"]} {...props}>
-      <CareIcon icon="l-expand-arrows-alt" />
-    </FeedButton>
-  );
-};
-
-const Reset = (props: TemplateButtonProps) => {
-  return (
-    <FeedButton shortcut={["Shift", "R"]} {...props}>
-      <CareIcon icon="l-redo" />
-    </FeedButton>
-  );
-};
-
-const SavePreset = (props: TemplateButtonProps) => {
-  return (
-    <FeedButton shortcut={["Shift", "S"]} {...props}>
-      <CareIcon icon="l-save" />
-    </FeedButton>
-  );
-};
-
-const ZoomIn = (props: TemplateButtonProps) => {
-  return (
-    <FeedButton
-      shortcut={[isAppleDevice ? "Meta" : "Ctrl", "I"]}
-      tooltipClassName="tooltip-left translate-y-2 translate-x-1"
-      helpText="Zoom In"
-      {...props}
-    >
-      <CareIcon icon="l-search-plus" />
-    </FeedButton>
-  );
-};
-
-const ZoomOut = (props: TemplateButtonProps) => {
-  return (
-    <FeedButton
-      shortcut={[isAppleDevice ? "Meta" : "Ctrl", "O"]}
-      tooltipClassName="tooltip-left translate-y-2 translate-x-1"
-      helpText="Zoom Out"
-      {...props}
-    >
-      <CareIcon icon="l-search-minus" />
-    </FeedButton>
-  );
-};
-
-const TogglePrecisionMode = (props: TemplateButtonProps) => {
-  return <FeedButton shortcut={["Shift", "P"]} {...props} />;
-};
-
-const MoveUp = (props: TemplateButtonProps) => {
-  return (
-    <FeedButton
-      shortcut={[isAppleDevice ? "Meta" : "Ctrl", "Shift", "ArrowUp"]}
-      tooltipClassName="tooltip-bottom -translate-x-1/2 translate-y-1"
-      {...props}
-    >
-      <CareIcon icon="l-triangle" />
-    </FeedButton>
-  );
-};
-
-const MoveDown = (props: TemplateButtonProps) => {
-  return (
-    <FeedButton
-      shortcut={[isAppleDevice ? "Meta" : "Ctrl", "Shift", "ArrowDown"]}
-      tooltipClassName="tooltip-top -translate-x-1/2 -translate-y-1"
-      {...props}
-    >
-      <CareIcon icon="l-triangle" className="rotate-180" />
-    </FeedButton>
-  );
-};
-
-const MoveLeft = (props: TemplateButtonProps) => {
-  return (
-    <FeedButton
-      shortcut={[isAppleDevice ? "Meta" : "Ctrl", "Shift", "ArrowLeft"]}
-      tooltipClassName="tooltip-top -translate-x-1/3 -translate-y-1"
-      {...props}
-    >
-      <CareIcon icon="l-triangle" className="-rotate-90" />
-    </FeedButton>
-  );
-};
-
-const MoveRight = (props: TemplateButtonProps) => {
-  return (
-    <FeedButton
-      shortcut={[isAppleDevice ? "Meta" : "Ctrl", "Shift", "ArrowRight"]}
-      tooltipClassName="tooltip-top -translate-x-2/3 -translate-y-1"
-      {...props}
-    >
-      <CareIcon icon="l-triangle" className="rotate-90" />
-    </FeedButton>
-  );
-};
-
-const FeedButtons = {
-  Fullscreen,
-  Reset,
-  SavePreset,
-  ZoomIn,
-  ZoomOut,
-  TogglePrecisionMode,
-  MoveUp,
-  MoveDown,
-  MoveLeft,
-  MoveRight,
-};
-
-export default FeedButtons;
diff --git a/src/Components/Feed/FeedControls.tsx b/src/Components/Feed/FeedControls.tsx
index 98d684e29b5..fa64459ced0 100644
--- a/src/Components/Feed/FeedControls.tsx
+++ b/src/Components/Feed/FeedControls.tsx
@@ -1,50 +1,206 @@
-import FeedButtons from "./FeedButton";
-import { PTZAction } from "./utils";
+import { useState } from "react";
+import { isAppleDevice } from "../../Utils/utils";
+import FeedButton from "./FeedButton";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import { PTZPayload } from "./useOperateCamera";
+
+const Actions = {
+  UP: 1 << 0,
+  DOWN: 1 << 1,
+  LEFT: 1 << 2,
+  RIGHT: 1 << 3,
+  ZOOM_IN: 1 << 4,
+  ZOOM_OUT: 1 << 5,
+} as const;
+
+const Shortcuts = {
+  MoveUp: [isAppleDevice ? "Meta" : "Ctrl", "Shift", "ArrowUp"],
+  MoveLeft: [isAppleDevice ? "Meta" : "Ctrl", "Shift", "ArrowLeft"],
+  MoveDown: [isAppleDevice ? "Meta" : "Ctrl", "Shift", "ArrowDown"],
+  MoveRight: [isAppleDevice ? "Meta" : "Ctrl", "Shift", "ArrowRight"],
+  TogglePrecision: ["Shift", "P"],
+  ZoomIn: [isAppleDevice ? "Meta" : "Ctrl", "I"],
+  ZoomOut: [isAppleDevice ? "Meta" : "Ctrl", "O"],
+  Reset: ["Shift", "R"],
+  SavePreset: [isAppleDevice ? "Meta" : "Ctrl", "Shift", "S"],
+  Fullscreen: ["Shift", "F"],
+};
+
+export type PTZAction = keyof typeof Actions;
+
+/**
+ * Returns the PTZ payload for the given action
+ *
+ * Example:
+ * ```
+ * payload(Actions.TOP | Actions.LEFT);
+ * ```
+ *
+ * @param action An Actions or a combination of Actions
+ * @param precision Precision of the PTZ action
+ * @returns The PTZ payload
+ */
+const payload = (action: number, precision: number) => {
+  let [x, y, zoom] = [0, 0, 0];
+  const delta = 0.1 / Math.max(1, precision);
+
+  const _ = (direction: number) => action & direction && delta;
+
+  x -= _(Actions.LEFT);
+  x += _(Actions.RIGHT);
+  y += _(Actions.UP);
+  y -= _(Actions.DOWN);
+  zoom += _(Actions.ZOOM_IN);
+  zoom -= _(Actions.ZOOM_OUT);
+
+  return { x, y, zoom };
+};
 
 interface Props {
   shortcutsDisabled?: boolean;
-  onMove?: (direction: PTZAction) => void;
+  onMove?: (payload: PTZPayload) => void;
+  isFullscreen: boolean;
+  setFullscreen: (state: boolean) => void;
+  onReset: () => void;
 }
 
-export default function FeedControls({ shortcutsDisabled, onMove }: Props) {
+export default function FeedControls({
+  shortcutsDisabled,
+  onMove,
+  ...props
+}: Props) {
+  const [precision, setPrecision] = useState(1);
+  const togglePrecision = () => setPrecision((p) => (p === 16 ? 1 : p << 1));
+
+  const move =
+    onMove &&
+    ((direction: number) => () => onMove(payload(direction, precision)));
+
   return (
     <div className="text-white opacity-0 transition-all delay-100 duration-200 ease-in-out group-hover:opacity-100 group-hover:delay-0">
       {/* Move Controls */}
-      {onMove && (
+      {move && (
         <>
           <div className="absolute bottom-0 left-8 transition-all delay-100 duration-200 ease-in-out group-hover:bottom-5 group-hover:delay-0">
-            <div className="flex flex-col items-center justify-center gap-1">
-              <FeedButtons.MoveUp
-                onTrigger={() => onMove("up")}
-                shortcutsDisabled={shortcutsDisabled}
-              />
-              <div className="flex flex-row items-center justify-center gap-1">
-                <FeedButtons.MoveLeft
-                  onTrigger={() => onMove("left")}
-                  shortcutsDisabled={shortcutsDisabled}
-                />
-                <FeedButtons.MoveDown
-                  onTrigger={() => onMove("down")}
-                  shortcutsDisabled={shortcutsDisabled}
-                />
-                <FeedButtons.MoveRight
-                  onTrigger={() => onMove("right")}
-                  shortcutsDisabled={shortcutsDisabled}
-                />
-              </div>
+            <div className="grid grid-cols-3 gap-1">
+              <FeedButton onTrigger={move(Actions.UP | Actions.LEFT)}>
+                <CareIcon icon="l-triangle" className="-rotate-45" />
+              </FeedButton>
+              <FeedButton
+                onTrigger={move(Actions.UP)}
+                helpText="Up"
+                shortcut={Shortcuts.MoveUp}
+                shortcutsDisabled={shortcutsDisabled}
+              >
+                <CareIcon icon="l-triangle" className="rotate-0" />
+              </FeedButton>
+              <FeedButton onTrigger={move(Actions.UP | Actions.RIGHT)}>
+                <CareIcon icon="l-triangle" className="rotate-45" />
+              </FeedButton>
+              <FeedButton
+                onTrigger={move(Actions.LEFT)}
+                helpText="Left"
+                shortcut={Shortcuts.MoveLeft}
+                shortcutsDisabled={shortcutsDisabled}
+              >
+                <CareIcon icon="l-triangle" className="-rotate-90" />
+              </FeedButton>
+
+              <FeedButton
+                onTrigger={togglePrecision}
+                helpText="Toggle Precision"
+                shortcut={Shortcuts.TogglePrecision}
+                className="font-bold"
+                shortcutsDisabled={shortcutsDisabled}
+              >
+                {precision}x
+              </FeedButton>
+
+              <FeedButton
+                onTrigger={move(Actions.RIGHT)}
+                helpText="Right"
+                shortcut={Shortcuts.MoveRight}
+                shortcutsDisabled={shortcutsDisabled}
+              >
+                <CareIcon icon="l-triangle" className="rotate-90" />
+              </FeedButton>
+
+              <FeedButton onTrigger={move(Actions.DOWN | Actions.LEFT)}>
+                <CareIcon icon="l-triangle" className="rotate-[-135deg]" />
+              </FeedButton>
+
+              <FeedButton
+                onTrigger={move(Actions.DOWN)}
+                helpText="Down"
+                shortcut={Shortcuts.MoveDown}
+                shortcutsDisabled={shortcutsDisabled}
+                tooltipClassName="tooltip-top"
+              >
+                <CareIcon icon="l-triangle" className="rotate-180" />
+              </FeedButton>
+
+              <FeedButton onTrigger={move(Actions.DOWN | Actions.RIGHT)}>
+                <CareIcon icon="l-triangle" className="rotate-[135deg]" />
+              </FeedButton>
             </div>
           </div>
 
           <div className="absolute bottom-5 right-0 transition-all delay-100 duration-200 ease-in-out group-hover:right-8 group-hover:delay-0">
             <div className="flex flex-col items-center justify-center gap-1">
-              <FeedButtons.ZoomIn
-                onTrigger={() => onMove("zoomIn")}
+              <FeedButton
+                shortcut={Shortcuts.ZoomIn}
+                tooltipClassName="tooltip-left translate-y-2 translate-x-1"
+                helpText="Zoom In"
+                onTrigger={move(Actions.ZOOM_IN)}
+                shortcutsDisabled={shortcutsDisabled}
+              >
+                <CareIcon icon="l-search-plus" />
+              </FeedButton>
+              <FeedButton
+                shortcut={Shortcuts.ZoomOut}
+                tooltipClassName="tooltip-left translate-y-2 translate-x-1"
+                helpText="Zoom Out"
+                onTrigger={move(Actions.ZOOM_OUT)}
                 shortcutsDisabled={shortcutsDisabled}
-              />
-              <FeedButtons.ZoomOut
-                onTrigger={() => onMove("zoomOut")}
+              >
+                <CareIcon icon="l-search-minus" />
+              </FeedButton>
+              <FeedButton
+                shortcut={Shortcuts.Reset}
+                tooltipClassName="tooltip-left translate-y-2 translate-x-1"
+                helpText="Reset"
+                onTrigger={props.onReset}
                 shortcutsDisabled={shortcutsDisabled}
-              />
+              >
+                <CareIcon icon="l-redo" />
+              </FeedButton>
+              {/* TODO: implement this when this is used in where presets can be saved. */}
+              {/* <FeedButton
+                shortcut={Shortcuts.SavePreset}
+                tooltipClassName="tooltip-left translate-y-2 translate-x-1"
+                helpText="Save current view to preset"
+                onTrigger={() => console.error("Not implemented")}
+                shortcutsDisabled={shortcutsDisabled}
+              >
+                <CareIcon icon="l-save" />
+              </FeedButton> */}
+              <FeedButton
+                shortcut={Shortcuts.Fullscreen}
+                tooltipClassName="tooltip-left translate-y-2 translate-x-1"
+                helpText={
+                  props.isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"
+                }
+                onTrigger={() => props.setFullscreen(!props.isFullscreen)}
+                shortcutsDisabled={shortcutsDisabled}
+              >
+                <CareIcon
+                  icon={
+                    props.isFullscreen
+                      ? "l-compress-arrows"
+                      : "l-expand-arrows-alt"
+                  }
+                />
+              </FeedButton>
             </div>
           </div>
         </>
diff --git a/src/Components/Feed/LocationFeed.tsx b/src/Components/Feed/LocationFeed.tsx
index 55b5d21a9e3..b37d63e9bb8 100644
--- a/src/Components/Feed/LocationFeed.tsx
+++ b/src/Components/Feed/LocationFeed.tsx
@@ -15,15 +15,18 @@ import routes from "../../Redux/api";
 import { RouteParams } from "../../Routers/types";
 import LocationFeedTile from "./LocationFeedTile";
 import Fullscreen from "../../CAREUI/misc/Fullscreen";
-
-const PER_PAGE_LIMIT = 4;
+import useBreakpoints from "../../Common/hooks/useBreakpoints";
 
 type Props = RouteParams<"facilityId" | "locationId">;
 
 export default function LocationFeed(props: Props) {
   const [isFullscreen, setFullscreen] = useState(false);
+  const limit = useBreakpoints({
+    default: 4,
+    "3xl": 9,
+  });
   const { qParams, updateQuery, removeFilter, updatePage } = useFilters({
-    limit: PER_PAGE_LIMIT,
+    limit,
   });
 
   const facilityQuery = useQuery(routes.getPermittedFacility, {
@@ -33,8 +36,8 @@ export default function LocationFeed(props: Props) {
   const { data, loading } = useQuery(routes.listAssets, {
     query: {
       ...qParams,
-      limit: PER_PAGE_LIMIT,
-      offset: (qParams.page ? qParams.page - 1 : 0) * PER_PAGE_LIMIT,
+      limit,
+      offset: (qParams.page ? qParams.page - 1 : 0) * limit,
       facility: props.facilityId,
       location: props.locationId,
       asset_class: "ONVIF",
@@ -167,7 +170,7 @@ export default function LocationFeed(props: Props) {
           <Pagination
             className=""
             cPage={qParams.page}
-            defaultPerPage={PER_PAGE_LIMIT}
+            defaultPerPage={limit}
             data={{ totalCount }}
             onChange={(page) => updatePage(page)}
           />
@@ -185,6 +188,7 @@ export default function LocationFeed(props: Props) {
         </div>
       ) : (
         <Fullscreen
+          fullscreenClassName="h-screen overflow-auto"
           fullscreen={isFullscreen}
           onExit={() => setFullscreen(false)}
         >
@@ -194,8 +198,8 @@ export default function LocationFeed(props: Props) {
                 <LocationFeedTile
                   asset={asset}
                   fallbackMiddleware={
-                    asset.location_object.middleware_address ??
-                    facilityQuery.data!.middleware_address
+                    asset.location_object.middleware_address ||
+                    facilityQuery.data?.middleware_address
                   }
                 />
               </div>
diff --git a/src/Components/Feed/LocationFeedTile.tsx b/src/Components/Feed/LocationFeedTile.tsx
index 162724fe566..5c5d6452a47 100644
--- a/src/Components/Feed/LocationFeedTile.tsx
+++ b/src/Components/Feed/LocationFeedTile.tsx
@@ -17,6 +17,7 @@ export default function LocationFeedTile(props: Props) {
       fallbackMiddleware={props.fallbackMiddleware as string}
       silent
       preset={preset?.meta.position}
+      shortcutsDisabled
     >
       <div className="w-32">
         <AssetBedSelect
diff --git a/src/Components/Feed/NoFeedAvailable.tsx b/src/Components/Feed/NoFeedAvailable.tsx
index e155570a8f9..31af0083556 100644
--- a/src/Components/Feed/NoFeedAvailable.tsx
+++ b/src/Components/Feed/NoFeedAvailable.tsx
@@ -18,10 +18,11 @@ export default function NoFeedAvailable(props: Props) {
     .replace(/[a-f\d]{8}-[a-f\d]{4}-[a-f\d]{4}-[a-f\d]{4}-[a-f\d]{12}/gi, "***")
     // Replace all numbers in the URL's path params with "ID_REDACTED"
     .replace(/\/\d+/g, "/***");
+
   return (
     <div
       className={classNames(
-        "flex h-full w-full flex-col items-center justify-center gap-2 text-center",
+        "absolute inset-x-0 inset-y-0 flex flex-col items-center justify-center gap-2 text-center",
         props.className
       )}
     >
diff --git a/src/Components/Feed/useOperateCamera.ts b/src/Components/Feed/useOperateCamera.ts
index 75f2d9a9e78..259e45fcc89 100644
--- a/src/Components/Feed/useOperateCamera.ts
+++ b/src/Components/Feed/useOperateCamera.ts
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import request from "../../Utils/request/request";
 import { FeedRoutes } from "./routes";
 
@@ -45,23 +44,11 @@ export type OperationAction =
  * @param id The external id of the camera asset
  */
 export default function useOperateCamera(id: string, silent = false) {
-  const [precision, setPrecision] = useState(1);
-
-  const togglePrecision = () => {
-    setPrecision((p) => (p === 16 ? 1 : p << 1));
-  };
-
-  const operate = (action: OperationAction) => {
+  return (action: OperationAction) => {
     return request(FeedRoutes.operateAsset, {
       pathParams: { id },
       body: { action },
       silent,
     });
   };
-
-  return {
-    precision,
-    togglePrecision,
-    operate,
-  };
 }
diff --git a/src/Components/Feed/utils.ts b/src/Components/Feed/utils.ts
index ae8e34fa60d..b5b8920fd5a 100644
--- a/src/Components/Feed/utils.ts
+++ b/src/Components/Feed/utils.ts
@@ -1,46 +1,8 @@
 import { MutableRefObject } from "react";
-import { PTZPayload } from "./useOperateCamera";
 import { AssetData } from "../Assets/AssetTypes";
 import { getCameraConfig } from "../../Utils/transformUtils";
 import { isIOS } from "../../Utils/utils";
 
-export type PTZAction = "up" | "down" | "left" | "right" | "zoomIn" | "zoomOut";
-
-export const getPTZPayload = (
-  action: PTZAction,
-  precision = 1,
-  value?: number
-) => {
-  let x = 0;
-  let y = 0;
-  let zoom = 0;
-
-  const delta = value ?? 0.1 / Math.max(1, precision);
-
-  switch (action) {
-    case "up":
-      y = delta;
-      break;
-    case "down":
-      y = -delta;
-      break;
-    case "left":
-      x = -delta;
-      break;
-    case "right":
-      x = delta;
-      break;
-    case "zoomIn":
-      zoom = delta;
-      break;
-    case "zoomOut":
-      zoom = -delta;
-      break;
-  }
-
-  return { x, y, zoom } as PTZPayload;
-};
-
 export const calculateVideoDelay = (
   ref: MutableRefObject<HTMLVideoElement | null>,
   playedOn?: Date
@@ -57,7 +19,7 @@ export const calculateVideoDelay = (
 
 export const getStreamUrl = (asset: AssetData, fallbackMiddleware?: string) => {
   const config = getCameraConfig(asset);
-  const host = config.middleware_hostname ?? fallbackMiddleware;
+  const host = config.middleware_hostname || fallbackMiddleware;
   const uuid = config.accessKey;
 
   return isIOS