diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index f0565c1e8..a55c7a099 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -341,7 +341,7 @@ export function RecordingView({
       </div>
 
       <div
-        className={`h-full flex justify-center overflow-hidden ${isDesktop ? "" : "flex-col gap-2"}`}
+        className={`h-full flex justify-center overflow-hidden ${isDesktop ? "" : "flex-col landscape:flex-row gap-2"}`}
       >
         <div className={`${isDesktop ? "w-[80%]" : ""} flex flex-1 flex-wrap`}>
           <div
@@ -352,7 +352,7 @@ export function RecordingView({
               className={
                 isDesktop
                   ? `${mainCameraAspect == "tall" ? "h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"} px-4 flex justify-center`
-                  : `w-full pt-2 ${mainCameraAspect == "wide" ? "aspect-wide" : "aspect-video"}`
+                  : `portrait:w-full pt-2 ${mainCameraAspect == "wide" ? "landscape:w-full aspect-wide" : "landscape:h-[94%] aspect-video"}`
               }
               style={{
                 aspectRatio: isDesktop
@@ -497,7 +497,7 @@ function Timeline({
       className={`${
         isDesktop
           ? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} overflow-y-auto no-scrollbar`
-          : "flex-grow overflow-hidden"
+          : "portrait:flex-grow landscape:w-[20%] overflow-hidden"
       } relative`}
     >
       <div className="absolute top-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-b from-secondary to-transparent pointer-events-none"></div>
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 08a624581..c962f08f1 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -158,9 +158,9 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
         return "absolute left-2 right-2 top-[50%] -translate-y-[50%]";
       } else {
         if (aspect > 16 / 9) {
-          return "absolute left-0 top-[50%] -translate-y-[50%]";
+          return "p-2 absolute left-0 top-[50%] -translate-y-[50%]";
         } else {
-          return "absolute top-2 bottom-2 left-[50%] -translate-x-[50%]";
+          return "p-2 absolute top-2 bottom-2 left-[50%] -translate-x-[50%]";
         }
       }
     }
@@ -209,18 +209,20 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
         className={
           fullscreen
             ? `fixed inset-0 bg-black z-30`
-            : `size-full p-2 flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
+            : `size-full p-2 flex flex-col ${isMobile ? "landscape:flex-row landscape:gap-1" : ""}`
         }
       >
         <div
           className={
             fullscreen
               ? `absolute right-32 top-1 z-40 ${isMobile ? "landscape:left-2 landscape:right-auto landscape:bottom-1 landscape:top-auto" : ""}`
-              : `w-full h-12 flex flex-row items-center justify-between ${isMobile ? "landscape:w-min landscape:h-full landscape:flex-col" : ""}`
+              : `w-full h-12 flex flex-row items-center justify-between ${isMobile ? "landscape:w-12 landscape:h-full landscape:flex-col" : ""}`
           }
         >
           {!fullscreen ? (
-            <div className="flex items-center gap-2">
+            <div
+              className={`flex items-center gap-2 ${isMobile ? "landscape:flex-col" : ""}`}
+            >
               <Button
                 className={`flex items-center gap-2.5 rounded-lg`}
                 size="sm"
@@ -619,7 +621,7 @@ function FrigateCameraFeatures({
     <Drawer>
       <DrawerTrigger>
         <CameraFeatureToggle
-          className="p-2"
+          className="p-2 landscape:size-9"
           variant="primary"
           Icon={FaCog}
           isActive={false}