diff --git a/web/src/components/overlay/PtzControlPanel.tsx b/web/src/components/overlay/PtzControlPanel.tsx
index 132883eb6..b4219842b 100644
--- a/web/src/components/overlay/PtzControlPanel.tsx
+++ b/web/src/components/overlay/PtzControlPanel.tsx
@@ -36,11 +36,13 @@ import { useTranslation } from "react-i18next";
 import TooltipButton from "@/views/button/TooltipButton";
 
 export default function PtzControlPanel({
+  className,
   camera,
   enabled,
   clickOverlay,
   setClickOverlay,
 }: {
+  className?: string;
   camera: string;
   enabled: boolean;
   clickOverlay: boolean;
@@ -128,6 +130,7 @@ export default function PtzControlPanel({
     <div
       className={cn(
         "absolute inset-x-2 bottom-[10%] flex select-none flex-wrap items-center justify-center gap-1 md:left-[50%] md:-translate-x-[50%] md:flex-nowrap",
+        className ?? "",
         isMobile && "landscape:ml-12",
       )}
     >
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index d3a95ae5c..b55837afa 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -680,6 +680,7 @@ export default function LiveCameraView({
       {camera.onvif.host != "" && (
         <div className="flex flex-col items-center justify-center">
           <PtzControlPanel
+            className={debug ? "bottom-auto top-[25%]" : ""}
             camera={camera.name}
             enabled={cameraEnabled}
             clickOverlay={clickOverlay}